使用Swiper展示数据时,往往需要进行分页, 每页根据需求放一定数量的item。
如我们想分多页展示学校师资,每页展示n个教师。
我们获取到的教师列表数据是一维的。如果转成二维数组,就很容易通过两层嵌套循环实现展示(如v-for)。
其中第一层循环负责生成多个页面 (swiper的每一页也就是一个swiper-slide) 。
第二层循环责负责生成页面中的多个教师(可能有1~n个)。
核心就是一维数组转二维数组,代码实现如下:
第一个参数是一维的数组,第二个参数是每页要展示的item个数
function arrTo2d(arr, size) { let arr2d=[]; for(let i=0;i<arr.length;i=i+size){ arr2d.push(arr.slice(i,i+size)); } return arr2d; } console.log(arrTo2d([1,2,3,4,5,6,7,8,9], 4))
输出结果: [ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9 ] ]