实现效果:
要实现上述,2张图片为一个走马灯的内容,而后端传回的数据是一个数组。我采用的是将数据重组为2维数组的方法。
因为没有强制要求展示顺序,我采用将首尾组合的方式组成一个数组元素;
首先判断原始数据长度的奇偶性,如果是偶数的话,循环原始数据长度/2,每次循环创造一个新数组,并将首尾元素push进去。元素下标分别是i,原始数据长度-i-1;再将新数组push进走马灯要用到的数组。
如果是奇数的话,循环原始数据长度/2并向上取整,当i不等于循环原始数据长度/2并向上取整-1的时候,每次循环创造一个新数组,并将首尾元素push进去。元素下标分别是i,原始数据长度-i-1;再将新数组push进走马灯要用到的数组;否则创造一个新数组并push进下标为i的元素,再push进走马灯用的数组就行。
if(this.List.length%2==0){
for(let i=0;i<this.List.length/2;i++){
let List2=[]
List2.push(this.List[i])
List2.push(this.List[this.List.length-i-1])
this.fzList.push(List2)
}
}else{
for(let i=0;i<Math.ceil(this.List.length/2);i++){
if(i != Math.ceil(this.List.length/2)-1){
let List2=[]
List2.push(this.List[i])
List2.push(this.List[this.List.length-i-1])
this.fzList.push(List2)
}else{
let List2=[]
List2.push(this.List[i])
this.fzList.push(List2)
}
}
}