自定義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>