开门红方案分页

src/views/ebiz/goodStart/GoodStartScheme.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="good-start-scheme bg-white">
     <van-grid :column-num="3">
-      <van-grid-item v-for="(pic, i) in pics" :key="i">
+      <van-grid-item v-for="(pic, i) in pagedPic" :key="i">
         <van-image height="200" :src="$assetsUrl + pic.picUrl" @click="prevImg(pic)" />
       </van-grid-item>
     </van-grid>
+    <div id="pagination">
+      <van-pagination v-model="currentPage" :total-items="pics.length" :items-per-page="9" force-ellipses @change="onPageChange" />
+    </div>
     <van-image-preview id="preview" v-model="isPrevShow" :images="images" />
     <van-button class="share-btn" v-show="isPrevShow" type="danger" block @click="shareImg">分享</van-button>
   </div>
 </template>
 
 <script>
-import { Grid, GridItem, Image as VanImage, ImagePreview } from 'vant'
+import { Grid, GridItem, Image as VanImage, ImagePreview, Pagination } from 'vant'
 import { getSchemePics } from '@/api/ebiz/goodStart'
 import Vue from 'vue'
 
@@ -21,19 +24,31 @@ export default {
   components: {
     [Grid.name]: Grid,
     [GridItem.name]: GridItem,
-    [VanImage.name]: VanImage
+    [VanImage.name]: VanImage,
+    [Pagination.name]: Pagination
   },
   data() {
     return {
       isPrevShow: false,
+      currentPage: 1,
       pics: [],
       images: []
     }
   },
+  computed: {
+    pagedPic() {
+      const startIndex = (this.currentPage - 1) * 9
+      const picArr = this.pics.slice(startIndex, startIndex + 8)
+      return picArr
+    }
+  },
   created() {
     this.getSchemePics()
   },
   methods: {
+    onPageChange(page) {
+      this.currentPage = page
+    },
     async getSchemePics() {
       const param = { operateType: 'goodStart_scheme' }
       const result = await getSchemePics(param)
@@ -95,4 +110,20 @@ export default {
 /deep/ .van-image-preview__image {
   bottom: auto;
 }
+
+/deep/ .van-pagination__item {
+  color: #ff0033;
+}
+
+/deep/ .van-pagination__item--active {
+  background-color: #ff0033;
+  color: #fff;
+}
+
+#pagination {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 </style>