数组分割成多个数组后即可在轮播图中分数组渲染数据
目录
前言
在angular项目移动端的制作时,遇到了使用ionic组件库中的slides轮播图,而此时后端返回的数据只是为一个数组,所以需要将数据渲染到轮播图上就必须将一个数组分割为多个数组
使用步骤
1.封装一个函数,使用slice方法
其中slice() 方法可拆分数组,可接受两个参数传的都为索引值,但不取第二个索引值的值
slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。
函数有两个参数,第一个参数为需要分割的数组,第二个参数为分割后的数组长度
代码如下(示例):
let list=[]
getNewArray(array, subGroupLength) {
let index = 0;
let newArray = [];
while (index < array.length) {
newArray.push(array.slice(index, (index += subGroupLength)));
}
return newArray;
}
this.list=getNewArray([1,2,3,4,5],2) //调用函数 传入数组 并要求拆分后的数组长度为2
2.lodash包的chunk方法
发现lodash里面有个方法,可以实现同样的效果将数组(array)拆分成多个 size
长度的区块,并将这些区块组成一个新数组。 如果array
无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。
_.chunk(['1', '2', '3', '4'], 2);
// => [['1', '2'], ['3', '4']]
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]
3.结果展示
代码如下(示例):
[[1,2],[3,4] [5]]
4.渲染数据
将分割后的数组使用移动端的轮播图进行渲染,这里需要使用ionic中的slides组件
<ion-slides pager="true" [options]="slideOpts" class="slides">
<ng-container *ngFor="let item of list" >
<ion-slide class="data">
<ng-container *ngFor="let i of item">
<div class="item" >
</div>
</ng-container>
</ion-slide>
</ng-container>
</ion-slides>