7

1.需求场景

在做banner轮播的时候,一个页面需要放很多选项,每个选项对应一个icon和一个title,可是这些选项数据(后台传过来)是放在一个一维数组里面的,我们再在用vue-awesome-swiper 做轮播的时候,需要分很多页,一页里放很多项,例如下图所,我们这里只显示一页。图片描述

那我们怎么实现一维数组的数据分为很多页,每页数据再循环实现轮播呢?我们可以把后台传过来的数据转换为二维数组,二次循环实现,见代码

var list = [1,2,3,4,5,6,7,8,9,10];
function pages (list) {
    const  pages = []
    list.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
    });
  return pages
}
var arr = pages(list);
console.log(arr);

结果为:[[1,2,3,4,5,6,7,8],[9,10]]


smallgang
232 声望7 粉丝