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 = 0if (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'}],* ]* * **/
看懂以上代码,应该大概知道数据的切割,我就接着继续实现页面:
这里面是循环两边,最外层是走马灯的循环,里面是一组数据的循环,看懂对数据的切割,就基本上看懂对走马灯里面一页展示多个数据的实现逻辑;