修改element ui el-carousel跑马灯实现一次轮播两张图片

跑马灯

实现效果

4444.png

    
        

        
        

            
{{ item.name }}
            
{{ item.declaration }}
        
        
    

• 后台返回的数据格式

data:[
    {
      declaration: "3333333555"
      id: "47cc781a-11b2-481c-a353-e3795f42d1cf"
      name: "灵梦"
    },
     {
      declaration: "3333333555"
      id: "47cc7381a-11b2-481c-a353-e3795f42d1cf"
      name: "灵梦1"
    },
     {
      declaration: "3333333555"
      id: "47cc3781a-11b2-481c-a353-e3795f42d1cf"
      name: "灵梦2"
    },
]

后台返回的这个格式数据肯定是不能直接放页面的，前端这边得处理一下，我这里处理的方法可能有些问题，但是能够实现。

// 将数组处理成嵌套数组的形式
group(array, subGroupLength) {
  let index = 0;
  let newArray = [];
  while (index < array.length) {
    newArray.push(array.slice(index, (index += subGroupLength)));
  }
  return newArray;
}
// 处理返回数据的格式，如果长度是偶数的话就/2,奇数的话就取余+1
  this.returnData = this.$utils.group(
    this.returnData,
    data.length % 2 == 0 ? data.length / 2 : (data.length % 2) + 1
  );