数据列表分页处理
在数据分类中，每页仅能显示8种具体的分类。当超出8种是自动出现第二页，同时，所有的页具有轮播效果。如图：
具体代码如下：
html文件
<div class="icons"> <swiper> <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.imgUrl"> </div> <p class="icon-desc">{{item.title}}</p> </div> </swiper-slide> </swiper> </div>js文件
import Swiper from "../../../../node_modules/vue-awesome-swiper/src/swiper"; export default { components: {Swiper}, name: "HomeIcons", data() { return { iconList: [ { id: "0001", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点1" }, { id: "0002", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点2" }, { id: "0003", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点3" }, { id: "0004", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点4" }, { id: "0005", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点5" }, { id: "0006", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点6" }, { id: "0007", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点7" }, { id: "0008", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点8" }, { id: "0009", imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "热门景点9" }], swiperOption: { pagination: ".swiper-pagination", autoplay: false } }; }, computed: { pages(){ const pages = []; // pages是为二维数组 this.iconList.forEach((item, index) => { const page = Math.floor(index / 8); // page本质是0.1.2.3分别表示第1,2,3,4页 if (!pages[page]) { pages[page] = []; } pages[page].push(item); }); return pages; } } };
