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

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

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

原文地址：https://blog.csdn.net/weixin_42681295/article/details/143858732

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！