element ui 走马灯一页展示多个数据实现
element ui 走马灯一页展示多个数据实现
- element ui 走马灯一页展示多个数据实现
element ui 走马灯一页展示多个数据实现
主要是对走马灯的数据的操作，先看js处理
let list = [
{ i: 1, name: '1' },
{ i: 2, name: '2' },
{ i: 3, name: '3' },
{ i: 4, name: '4' },
]
let newList = []
let current = 0
if (list && list.length > 0) {
for (let i = 0; i <= list.length - 1; i++) {
// 注意这里的2 ，可以是其他数值，看走马灯里面需要展示几个
if (i % 2 !== 0 || i === 0) {
if (!newList[current]) {
newList.push([list[i]])
} else {
newList[current].push(list[i])
}
} else {
current++
newList.push([list[i]])
}
}
}
console.log(newList, 'newList')
/**
* 结果为
* [
* [{i:1,name:'1'}, {i:2,name:'2'}],
* [{i:3,name:'3'}, {i:4,name:'4'}],
* ]
*
* **/
看懂以上代码，应该大概知道数据的切割，我就接着继续实现页面：
这里面是循环两边，最外层是走马灯的循环，里面是一组数据的循环，看懂对数据的切割，就基本上看懂对走马灯里面一页展示多个数据的实现逻辑；