大榜单分页调整

src/views/ebiz/congratulation/CongratulationList.vue

@@ -1,10 +1,13 @@
 <template>
-  <div>
+  <div class="wrapper">
-    <van-list v-model="loading" :finished="finished" @load="getPostList" :immediate-check="false" finished-text="没有更多了..." class="post-container">
+    <van-grid :column-num="3" :gutter="10">
-      <div class="post" v-for="(item, index) in posterList" :key="index" @click="previewImg(index)">
+      <van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(index)">
         <img :src="item.realUrl" />
-      </div>
+      </van-grid-item>
-    </van-list>
+    </van-grid>
+    <div class="pageWrapper">
+      <van-pagination class="bottom-btn" v-model="pageNum" :page-count="totalPage" @change="pageChange" />
+    </div>
   </div>
 </template>
 
@@ -23,17 +26,14 @@ export default {
   },
   data() {
     return {
-      active: '0',
       posterType: 'hb',
       srcUrl: '@/images/u10199.png',
       pageNum: 1,
       pageSize: 9,
       posterList: [], // 贺报列表
       imgUrls: [],
-      show: false,
       index: 0,
-      loading: true,
+      totalPage: 0
-      finished: false
     }
   },
   created() {
@@ -54,12 +54,8 @@ export default {
       }
       let res = await getPosterList(param)
       if (res.result == 0) {
-        if (res.pageInfo.pages === this.pageNum) {
+        this.totalPage = res.pageInfo.pages
-          this.finished = true
+        this.posterList = res.pageInfo.list
-        }
-        this.loading = false
-        this.pageNum++
-        this.posterList.push(...res.pageInfo.list)
         for (let item of this.posterList) {
           let url = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
           item.realUrl = url
@@ -74,12 +70,21 @@ export default {
         images: this.imgUrls,
         startPosition: index
       })
+    },
+    pageChange(pageNum) {
+      this.pageNum = pageNum
+      this.getPostList()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+  padding-top: 12px;
+  padding-bottom: 50px;
+}
+
 .post-container {
   display: flex;
   flex-wrap: wrap;
@@ -102,11 +107,13 @@ img {
   width: 100%;
 }
 
-.grid-box {
+/deep/ .van-pagination__item {
-  margin-bottom: 10px;
+  color: #ff4040;
 }
 
-.poster-list-container {
+/deep/.van-pagination__item:active,
-  display: flex;
+/deep/.van-pagination__item--active {
+  background-color: #ff4040;
+  color: #fff;
 }
 </style>