vue 数据分页

╰+攻爆jí腚メ 2022-02-01 05:49 199阅读 0赞

# 数据列表分页处理 #

在数据分类中，每页仅能显示8种具体的分类。当超出8种是自动出现第二页，同时，所有的页具有轮播效果。如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_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;
          }
        }
      };

原文地址： [https://blog.csdn.net/qq\_41115965/article/details/81570661][https_blog.csdn.net_qq_41115965_article_details_81570661]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20220201/18b337ead867434faa90e534a3bf61ec.png
[https_blog.csdn.net_qq_41115965_article_details_81570661]: https://blog.csdn.net/qq_41115965/article/details/81570661