这部分东西比较多。主要分以下几部分
1、swiper包裹,和正常的写法一样。
2、当数据大于8条的时候,需要通过计算属性将数据分割成n个数组。
js代码如下:
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 } }
然后呢:
改变上面的v-for:
<swiper> <swiper-slide v-for="(page, index) in 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.imgURL" alt=""> </div> <p class="icon-desc">{{item.desc}}</p> </div> </swiper-slide> </swiper>
这时候就基本完成了,最后如果文字超出,加省略号。为了公用,新建mixin。
ellipsis() overflow hidden white-space nowrap text-overflow ellipsis
使用:
到此基本结束,,js部分不是很明白。下次补上。