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

数据列表分页处理

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