移动端页面的列表分组渲染

关于移动端页面的列表的分组渲染

后台一般给过来的数据是一个一维数组，来给到我们前端进行数据渲染

就想这样的
一组这样的数据过来，如果我们直接进行渲染，就是这样的：

但是我们需要的效果是：

所以我们在拿到数据的时候，就需要做相应的处理。

虽然在这样的效果，我们用css也可以完成，就是每一个列表占宽度的50%，当我觉得还是没有用js控制的方便。二话不说，我们贴上js的处理方法。

/**
 * @description: 
 * @param {arr} 传入数组 [1,2,3,4,5,6]
 * @param {num} 传入分组列数 num 2 默认为1
 * @return {arr} 返回切割的二维数组
 */
export function arrTrans(arr, num = 1) {
    const newArr = [];
    const arrs = [...arr]
    while (arrs.length > 0) {
        newArr.push(arrs.splice(0, num));
    }
    return newArr;
}