vue项目笔记(12)-数据列表分页处理

xiaoxiao2021-03-01  6

数据列表分页处理

在数据分类中,每页仅能显示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; } } };

 

转载请注明原文地址: https://www.6miu.com/read-3100328.html

最新回复(0)