产品分类、分页

components/main/count/Box.vue

@@ -2,7 +2,16 @@
   <div class="count-box">
     <div class="swiper-container" v-swiper:swiper="swiperOption">
       <div class="swiper-wrapper">
-        <div class="swiper-slide" v-for="(c, index) in counts.data" :key="index">
+        <div class="swiper-slide" v-for="(c, index) in list1" :key="index">
+          <count-item class="item" :title="c.item" :value="c.count"></count-item>
+        </div>
+        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
+          <count-item class="item" :title="c.item" :value="c.count"></count-item>
+        </div>
+        <div class="swiper-slide" v-for="(c, index) in list2" :key="index">
+          <count-item class="item" :title="c.item" :value="c.count"></count-item>
+        </div>
+        <div class="swiper-slide" v-for="(c, index) in list3" :key="index">
           <count-item class="item" :title="c.item" :value="c.count"></count-item>
         </div>
       </div>
@@ -31,6 +40,15 @@
     computed: {
       counts () {
         return this.$store.state.product.common.counts
+      },
+      list1 () {
+        return this.counts.data.slice(1, 2)
+      },
+      list2 () {
+        return this.counts.data.slice(2, 3)
+      },
+      list3 () {
+        return this.counts.data.slice(3, 4)
       }
     },
     mounted () {