大屏列表封面

src/views/lengingRanking/index.vue

@@ -3,6 +3,7 @@
   <div class="screen-item lending-ranking">
     <div class="common-title">借阅排行榜</div>
     <vue-seamless-scroll
+      ref="listData"
       :data="rankingList"
       :class-option="defaultOption"
       class="big-module module-content"
@@ -13,7 +14,7 @@
         class="book-list-item"
       >
         <div class="book-img">
-          <img :src="coverUrl" :onerror="defaultImg">
+          <img :src="item.cover" :onerror="defaultImg">
         </div>
         <div class="book-info">
           <h4 class="title-item">{{ item.bookName }}</h4>
@@ -44,42 +45,45 @@ export default {
   data() {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
-      rankingList: [],
-      coverUrl: null
+      rankingList: []
     }
   },
   computed: {
     defaultOption() {
       return {
+        step: 1.1, // 滚动的速度
         hoverStop: false, // 是否开启鼠标悬停stop
-        singleHeight: 102 // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: 102, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        openWatch: true,
+        waitTime: 2000 // 单步运动停止的时间(默认值1000ms)
       }
     }
   },
   created() {
+    this.getBorrowRank()
   },
   mounted() {
-    this.getBorrowRank()
   },
   methods: {
     getBorrowRank() {
       FetchBorrowRank().then((res) => {
         if (res.errCode === 0) {
           this.rankingList = res.data
-          res.data.forEach(item => {
-            this.getCoverByISBN(item.isbn.replace(/\-/g, ''))
+          this.rankingList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
           })
         } else {
           this.$message.error('接口错误')
         }
       })
     },
-    getCoverByISBN(isbn) {
+    getCoverByISBN(isbn, item) {
       const params = {
         isbn: isbn
       }
       FetchCoverByISBN(params).then((res) => {
-        this.coverUrl = window.URL.createObjectURL(res)
+        item.cover = window.URL.createObjectURL(res)
+        this.$refs.listData.reset()
       })
     }
   }

src/views/newBookRecommend/index.vue

@@ -47,7 +47,6 @@ export default {
     return {
       defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
       rankingList: [],
-      coverUrl: null,
       swiperOptionThumbs: {
         direction: 'vertical',
         autoplay: true,
@@ -74,20 +73,20 @@ export default {
       FetchNewBookRecommend().then(res => {
         if (res.errCode === 0) {
           this.rankingList = res.data
-          res.data.forEach(item => {
-            this.getCoverByISBN(item.isbn.replace(/\-/g, ''))
+          this.rankingList.forEach(item => {
+            this.getCoverByISBN(item.isbn.replace(/\-/g, ''), item)
           })
         } else {
           this.$message.error('接口错误')
         }
       })
     },
-    getCoverByISBN(isbn) {
+    getCoverByISBN(isbn, item) {
       const params = {
         isbn: isbn
       }
       FetchCoverByISBN(params).then((res) => {
-        this.coverUrl = window.URL.createObjectURL(res)
+        item.cover = window.URL.createObjectURL(res)
       })
     }
   }