vue轮播分页实现

export default {
    name: "HomeIcons",
    data(){
      return{
        iconList: [{
          id:'0001',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
          desc:'景点门票'
        },{
          id:'0002',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
          desc:'西溪洪园'
        },{
          id:'0003',
          imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
          desc:'杭州必游'
        },
          {
            id:'0004',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
            desc:'世界遗产'
          },{
            id:'0005',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
            desc:'一日游'
          },{
            id:'0006',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
            desc:'千岛湖'
          },{
            id:'0007',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png',
            desc:'印象西湖'
          },{
            id:'0008',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png',
            desc:'西湖'
          },{
            id:'0009',
            imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
            desc:'宋城'
          }]
      }
    },
    computed:{//自带缓存机制
      pages(){
        const pages =[];
        this.iconList.forEach((item,index) =>{
          const page =Math.floor(index / 8)
          if(!pages[page]){
            pages[page]=[]
          }
          pages[page].push(item)

        })
        return pages

      }
    }
  }