双层 for 实例

image.png

<template>
    <div class="icons">
       <swiper :options="swiperOption">
            <swiper-slide   v-for="(page,index) of pages" :key="index">
                <div class="icon"
                 v-for="item of page"
                :key="item.id" >
                    <div class="icon-img">
                        <img class="icon-img-content" :src="item.img" alt="item.dest" style="opacity: 1;">
                    </div>
                    <p class="icon-desc">{{item.dest}}</p>
                </div>  
             </swiper-slide>
            </swiper>
    </div>
</template>

<script>
export default {
  name:'homeicons',
  data(){
    return{
         swiperOption:{
              autoplay: false
           },
            iconlist:[
                {
                    id:'0001',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                    dest:"景点门票"
                },{
                    id:'0002',
                    img:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
                    dest:"深圳必游"
                }
                ,{
                    id:'0003',
                    img:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                    dest:"一日游"
                }
                ,{
                    id:'0004',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" ,
                    dest:"动植物园"
                }
                ,{
                    id:'0005',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/27/dac2bcf9added702.png",
                    dest:"海滨海岛"
                }
                ,{
                    id:'0006',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png",
                    dest:"玩转长隆"
                }   ,{
                    id:'0007',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png" ,
                    dest:"动植物园"
                }
                ,{
                    id:'0008',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/27/dac2bcf9added702.png",
                    dest:"海滨海岛"
                }
                ,{
                    id:'0009',
                    img:"http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png",
                    dest:"海洋馆"
                }
                
            ]
   }  
  },
  computed:{
      pages(){
          const pages=[]
          this.iconlist.forEach((item,index) => {
            const page=Math.floor(index/8)
              if(!pages[page]){
                  pages[page]=[]
                  console.log(111)
              }
              pages[page].push(item)
                console.log("计算属性"+page+"==>"+pages[page])
          });
              return pages
      }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    @import '~styles/min.styl'
    .icons>>>  .swiper-container
        height 0
        padding-bottom 50%
</style>