自定義vue-awesome-swiper頁數

使用vue-awesome-swiper過程中，我們該如何自定義輪播圖的頁數，將剩余的內容分布到下一張輪播圖呢？如下圖，

第一張：

 

第二張：

這個時候，我們可以使用vue的computed屬性來自定義輪播圖的頁數，

Vue.js在模板表達式中限制了，綁定表達式最多只能有一條表達式，但某些數據需要一條以上的表達式運算實現，此時就可以將此數據放在計算屬性（computed）當中。

如何用computed來自定義呢？請看下圖

控制台顯示結果如下：

然后我們只要在頁面中將獲取的數據渲染出來即可，附上源碼：

<template>
  <div id="HomeIcons">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(page,index) in pages" :key="index">
        <div class="icons" v-for="item in page" :key="item.id">
          <div class="icons-img">
            <img class="icons-conimg" :src="item.url" alt="">
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'HomeIcons',
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination'
        },
        iconList: [
          {
            id: "001",
            url: "zcmos_01.png",
            conent: "zcmos_01.png"
          },
          {
            id: "002",
            url: "zcmos_02.png",
            conent: "zcmos_02.png"
          },
          {
            id: "003",
            url: "zcmos_03.png",
            conent: "zcmos_03.png"
          },
          {
            id: "004",
            url: "zcmos_04.png",
            conent: ""
          },
          {
            id: "005",
            url: "zcmos_05.png",
            conent: "zcmos_05.png"
          }
        ]
      }
    },
    computed: {
      pages () {
        const pages = []
        this.iconList.forEach((item, index) => {
          const page = Math.floor(index / 4)
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages
      }
    }
  }
</script>