From 66e5c24fa9eae757c33a0b61cc816095a9133662 Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Fri, 16 Sep 2022 18:21:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss   |  4 ++-
 src/common/scrollMixins.js     | 61 ++++++++++++++++++++++++++++++++++
 src/views/accessToLibrary.vue  | 12 +++++++
 src/views/data.json            | 23 +++++++++++++
 src/views/index.vue            |  2 +-
 src/views/lengingRanking.vue   | 21 +++++++++++-
 src/views/newBookRecommend.vue | 21 +++++++++++-
 src/views/notice.vue           | 24 ++++++++++++-
 src/views/readStar.vue         | 22 +++++++++++-
 src/views/totalLending.vue     |  2 +-
 10 files changed, 185 insertions(+), 7 deletions(-)
 create mode 100644 src/common/scrollMixins.js

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index de2f5c6..25ccc6a 100644
--- 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;
       }
     }
   }
diff --git a/src/common/scrollMixins.js b/src/common/scrollMixins.js
new file mode 100644
index 0000000..21500bc
--- /dev/null
+++ 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
+      }
+    }
+  }
+}
diff --git a/src/views/accessToLibrary.vue b/src/views/accessToLibrary.vue
index 96ef201..4e8c8f4 100644
--- 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: {
   }
diff --git a/src/views/data.json b/src/views/data.json
index 33aeff5..54398c8 100644
--- 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
     }
   ]
 }
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 3348132..3ec0147 100644
--- 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>
diff --git a/src/views/lengingRanking.vue b/src/views/lengingRanking.vue
index 72ec875..fe5f7c7 100644
--- 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>
diff --git a/src/views/newBookRecommend.vue b/src/views/newBookRecommend.vue
index 4021d7e..bdfbaf2 100644
--- 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>
diff --git a/src/views/notice.vue b/src/views/notice.vue
index 1901d96..81e6e66 100644
--- 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>
diff --git a/src/views/readStar.vue b/src/views/readStar.vue
index c5e898e..9fdb00a 100644
--- 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>
diff --git a/src/views/totalLending.vue b/src/views/totalLending.vue
index b66ccde..75911e6 100644
--- 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]