一页swiper显示多条数据_swiper一行显示2个-优快云博客

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/110004982

该博客介绍了一个Vue项目中使用Swiper组件按指定数量分页显示数据的方法。通过`chunk`函数将原始数据分割成新数组，每个数组包含一定数量的条目，然后在Swiper中遍历新数组进行展示，实现数据的滑动浏览效果。同时，配置了Swiper的分页器并自定义了分页点的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：原始数据不变
弄个新数组
每n条放入新数组
swiper遍历新数组

<template>
  <div>
    <div style="width:100px">
      <ul>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
      </ul>
      <ul>
        <swiper :options="swiperOption"
                style="height:100px">
          <swiper-slide v-for='(item,index) in newObjData'
                        :key="index">
            <li v-for='(item,index) in newObjData[index]'
                :key="index">
              <span>{{item.id}}</span>
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
            </li>
          </swiper-slide>
          <div class="swiper-pagination"
               slot="pagination"></div>
        </swiper>
      </ul>
    </div>
  </div>
</template>

data () {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + ' swppation">' + (index + 1) + '</span>';
          }
        }
      },
      newObjData: [],
      listData: [
        {
          id: '001',
          name: '岳飞',
          age: 89
        },
        {
          id: '002',
          name: '柳如是',
          age: 56
        },
        {
          id: '003',
          name: '蒲松龄',
          age: 45
        },
        {
          id: '004',
          name: '黄龄',
          age: 45
        },
        {
          id: '005',
          name: '周杰伦',
          age: 33
        }
      ]
    }
}

 methods: {
 	// chunk (["a", "b", "c", "d"], 2) // [["a", "b"], ["c", "d"]]
    chunk (arr, size) { // 遍历原始数据，每n条（每页显示条数）push进新数组
      var rsArr = [];
      for (var i = 0; i < arr.length; i += size) {
        var tempArr = [];
        for (var j = 0; j < size && i + j < arr.length; j++) {
          tempArr.push(arr[i + j]);
        }
        rsArr.push(tempArr);
      }
      return rsArr;
    }
  }

mounted () {
	this.newObjData = this.chunk(this.listData, 3)
}