vue项目笔记（12）-数据列表分页处理

喜欢ヅ旅行 2021-09-16 02:26 262阅读 0赞

**数据列表分页处理**

在数据分类中，每页仅能显示8种具体的分类。当超出8种是自动出现第二页，同时，所有的页具有轮播效果。如图：

![70][]

具体代码如下：

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;
          }
        }
      };

[70]: /images/20210802/c916b6499ff749e984505dfff502445c.png