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

最新推荐文章于 2024-08-15 13:48:12 发布

CHH5431

最新推荐文章于 2024-08-15 13:48:12 发布

阅读量2.5k

点赞数 3

分类专栏： Vue 文章标签：分页

本文链接：https://blog.csdn.net/qq_41115965/article/details/81570661

版权

Vue 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

本文记录了在Vue项目中处理数据列表分页的方法，每页展示8个分类，超过8个则自动切换到下一页，并实现了页面间的轮播效果。详细代码包括HTML和JS部分。

摘要由CSDN通过智能技术生成

数据列表分页处理

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