滚动

2 years ago · 66e5c24fa9
10 changed files with 185 additions and 7 deletions
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -94,6 +94,7 @@
  .lending-ranking{
    .module-content{
      padding: 0.1625rem 0.25rem;
+      overflow: hidden;
    }
  }
  .book-list-item{
@ -164,6 +165,7 @@
  .read-star{
    .module-content{
      padding: .25rem;
+      overflow: hidden;
      .readstart-item{
        display: flex;
        justify-content: space-between;
@ -237,7 +239,7 @@
      p{
        height: 3.1rem;
        overflow: hidden;
-        overflow-y: auto;
+        // overflow-y: auto;
      }
    }
  }
--- a/src/common/scrollMixins.js
+++ b/src/common/scrollMixins.js
@ -0,0 +1,61 @@
+export default {
+  data() {
+    return {
+      scrollDom: null,
+      interval: null,
+      scrollTimer: null, // 滚动定时器
+      pauseTimer: null, // 暂停定时器
+      timeout: null,
+      step: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    // this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
+    // 清理点击监听
+    window.document.removeEventListener('click', this.pauseScroll)
+  },
+  methods: {
+    autoScroll() {
+      // 滚动长度为0
+      if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) {
+        // 如果定时器存在
+        if (this.scrollTimer) {
+        // 则先清除
+          clearInterval(this.scrollTimer)
+          clearTimeout(this.pauseTimer)
+          this.scrollTimer = null
+          this.pauseTimer = null
+        }
+        this.scrollTimer = setInterval(() => {
+          const scrollHeight = this.scrollDom.scrollHeight
+          const clientHeight = this.scrollDom.clientHeight
+          const scroll = scrollHeight - clientHeight
+          // 获取当前滚动条距离顶部高度
+          const scrollTop = this.scrollDom.scrollTop
+          // 当滚动到底部时,间隔时间后重回顶部开始
+          if (scrollTop + this.step >= scroll) {
+            this.scrollDom.scrollTop = scroll
+            this.pauseTimer = setTimeout(() => {
+              this.scrollDom.scrollTop = 0
+              this.autoScroll()
+            }, this.timeout)
+          } else { // 没有则继续滚动
+            this.scrollDom.scrollTop = scrollTop + this.step
+          }
+          // console.log(scrollHeight, clientHeight, scroll, scrollTop)
+        }, this.interval)
+      } else {
+        return
+      }
+    }
+  }
+}
--- a/src/views/accessToLibrary.vue
+++ b/src/views/accessToLibrary.vue
@ -20,11 +20,23 @@ export default {
  name: 'AccessToLibrary',
  data() {
    return {
+      timer: null
    }
  },
  created() {
+    // 获取数据
  },
  mounted() {
+    // 每15秒获取一次
+    this.timer = setInterval(() => {
+      //
+    }, 15000)
+  },
+  beforeDestroy() {
+    // 销毁定时器
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
  },
  methods: {
  }
--- a/src/views/data.json
+++ b/src/views/data.json
@ -29,6 +29,18 @@
      "title": "豆豆龙成长记",
      "author": "卷毛老师",
      "ranking": 5
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "奇妙的冒险",
+      "author": "李小飞",
+      "ranking": 6
+    },
+    {
+      "img":"https://qiniu.aiyxlib.com/bg.png",
+      "title": "豆豆龙成长记",
+      "author": "卷毛老师",
+      "ranking": 7
    }
  ],
  "readstar":[
@ -62,6 +74,17 @@
      "des": "读者张山上周借阅图书30册",
      "date": "2022-09-06",
      "ranking": 6
+    },
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 7
+    }
+    ,
+    {
+      "des": "读者张山上周借阅图书30册",
+      "date": "2022-09-06",
+      "ranking": 8
    }
  ]
 }
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -9,7 +9,7 @@
      <div class="screen-middle">
        <AccessToLibrary />
        <div class="video-box">
-          <video width="100%" height="100%" controls>
+          <video width="100%" height="100%" controls loop autoplay muted>
            <source src="https://qiniu.aiyxlib.com/1658104739000.mp4" type="video/mp4">
          </video>
        </div>
--- a/src/views/lengingRanking.vue
+++ b/src/views/lengingRanking.vue
@ -2,7 +2,7 @@
  <!-- 借阅排行榜 -->
  <div class="screen-item lending-ranking">
    <div class="common-title">借阅排行榜</div>
-    <div class="big-module module-content">
+    <div ref="lendList" class="big-module module-content">
      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
        <img class="book-img" :src="item.img">
        <div class="book-info">
@ -28,8 +28,11 @@

 <script>
 import data from './data'
+import scrollMixins from '@/common/scrollMixins'
+
 export default {
  name: 'LengingRanking',
+  mixins: [scrollMixins],
  data() {
    return {
      rankingList: []
@ -39,8 +42,24 @@ export default {
    this.rankingList = data.ranking
  },
  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
  },
  methods: {
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.lendList
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
  }
 }
 </script>
--- a/src/views/newBookRecommend.vue
+++ b/src/views/newBookRecommend.vue
@ -2,7 +2,7 @@
  <!-- 新书推荐 -->
  <div class="screen-item lending-ranking">
    <div class="common-title">新书推荐</div>
-    <div class="big-module module-content">
+    <div ref="newbook" class="big-module module-content">
      <div v-for="(item,index) in rankingList" :key="index" class="book-list-item">
        <img class="book-img" :src="item.img">
        <div class="book-info">
@ -28,8 +28,11 @@

 <script>
 import data from './data'
+import scrollMixins from '@/common/scrollMixins'
+
 export default {
  name: 'NewBookRecommend',
+  mixins: [scrollMixins],
  data() {
    return {
      rankingList: []
@ -39,8 +42,24 @@ export default {
    this.rankingList = data.ranking
  },
  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
  },
  methods: {
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.newbook
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
  }
 }
 </script>
--- a/src/views/notice.vue
+++ b/src/views/notice.vue
@ -4,23 +4,45 @@
    <div class="common-title">通知公告</div>
    <div class="small-module module-content">
      <i class="iconfont icon-tongzhi" />
-      <p>经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p>
+      <p ref="noticetxt">经区政府批准，区人力资源和社会保障局人事工作综合事务中心协助组织符合政府安排工作条件退役士兵安排考试。综合成绩由量化评分和笔试成绩合并计算，量化评分占总成绩的60%，笔试成绩占总成绩的40%。服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的服役期间量化评分由通州区退役军人事务局依据退役军人事务部、中央军委政治工作部2018年12月14日下发的</p>
    </div>
  </div>
 </template>

 <script>
+import scrollMixins from '@/common/scrollMixins'
 export default {
  name: 'Notice',
+  mixins: [scrollMixins],
  data() {
    return {
+      // interval: 3000,
+      // scrollTimer: null, // 滚动定时器
+      // pauseTimer: null // 暂停定时器
    }
  },
  created() {
  },
  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
  },
  methods: {
+    // 数据加载完成方法
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.noticetxt
+      this.interval = 3000
+      this.timeout = 3000
+      this.step = 24
+      // 开启滚动
+      this.autoScroll()
+    }
  }
 }
 </script>
--- a/src/views/readStar.vue
+++ b/src/views/readStar.vue
@ -2,7 +2,7 @@
  <!-- 新书推荐 -->
  <div class="screen-item read-star">
    <div class="common-title">阅读之星</div>
-    <div class="medium-module module-content">
+    <div ref="starList" class="medium-module module-content">
      <div v-for="(item,index) in readstarList" :key="index" :class="['readstart-item', {'star1-bg':item.ranking===1}, {'star2-bg':item.ranking===2}, {'star3-bg':item.ranking===3}]">
        <svg v-if="item.ranking === 1" class="icon icon-star-1" aria-hidden="true">
          <use xlink:href="#icon-a-1" />
@ -22,9 +22,11 @@
 </template>

 <script>
+import scrollMixins from '@/common/scrollMixins'
 import data from './data'
 export default {
  name: 'ReadStar',
+  mixins: [scrollMixins],
  data() {
    return {
      readstarList: []
@ -34,8 +36,26 @@ export default {
    this.readstarList = data.readstar
  },
  mounted() {
+    this.dataCompleteFun()
+  },
+  destroyed() {
+    // 清理定时器
+    clearTimeout(this.pauseTimer)
+    this.pauseTimer = null
+    clearInterval(this.scrollTimer)
+    this.scrollTimer = null
  },
  methods: {
+    // 数据加载完成方法
+    dataCompleteFun() {
+      this.scrollDom = this.$refs.starList
+      this.interval = 50
+      this.timeout = 2000
+      this.step = 1
+      // 开启滚动
+      this.autoScroll()
+    }
+
  }
 }
 </script>
--- a/src/views/totalLending.vue
+++ b/src/views/totalLending.vue
@ -63,7 +63,7 @@ export default {
    },
    setNumberTransform() {
      var numberItems = document.getElementsByClassName('item')
-      console.log(numberItems)
+      // console.log(numberItems)
      const numberArr = this.chartNum.filter(item => !isNaN(item))
      for (var index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]