苏州网络推广网站建设引擎网站

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'}],* ]* * **/

看懂以上代码，应该大概知道数据的切割，我就接着继续实现页面：

这里面是循环两边，最外层是走马灯的循环，里面是一组数据的循环，看懂对数据的切割，就基本上看懂对走马灯里面一页展示多个数据的实现逻辑；