vue+Element 跑马灯loop的循环方向问题解决

1.element和swiper的跑马灯对比起来，如果是用vue的话，使用element的跑马灯是非常方便的，但是功能并没有swiper多，如果你想使用跑马灯的loop功能，个人建议千万不要用swiper，如果你只是loop图片，那其实还好，如果loop的数据结构稍微复杂点，能坑死你（针对vue项目，因为在swiper的跑马灯中是不能使用子组件的，而且dom元素上的所有点击事件全部失效，只能通过他自带 的click回调函数操作，非常麻烦，而且数据结构太复杂的话，你还要考虑数据是否具有响应式）

2.需求：需要实现商品列表的跑马灯效果，且方向始终向右，这里简单点，就想成几张图片的跑马灯效果

2.element的跑马灯使用很方便，官方也有文档，但是有些细节并没有讲到，接下来我针对该跑马灯的loop模式进行几点说明：

2.1 ：在loop模式下，如果你的跑马灯只有2个Carousel-Item（即切换的div），那么它在运行时，是默认先向右滑动到第二个item，当到第二个即最后一个后，会进行反方向即向左滑动到第一个item，这样就与我们的需求相悖

2.2：如果有大于2个的Carousel-Item，那么它在运行时，是始终向右移动的，正好符合我们的需求
3.解决：由于只有两个Carousel-Item的时候滑动方向不是始终一个方向，但是超过2个的时候就是一个方向了，所以我们可以对data（用于loop循环的数据）进行改造，假设当前data =[“1”,“2”],，那么我们需要将该data改造成[“2”,“1”,“2”,“1”],即在首尾分别添加尾 首的数据，实现时，我们可以先设置初始化时的默认幻灯片索引为1，那么它就能按顺序，1212的滑动了，且方向也是相同的了。或者是，直接往后面追加两个变成[“1”,“2”,“1”,“2”]

  // 获取轮播图 数组后面直接追加两个
     getlsLunbolist() {
      apiUrl.lsLunbolist().then((res) => {
        if(res.rows.length > 0){
          res.rows.forEach(item => {
            this.swipers.push({
              image:item.photo,
              title:item.title
            })
          });
		
		  // 追加的数据 start
          this.swipers.push(this.swipers[0]);
          if(res.rows.length > 1){
            this.swipers.push(this.swipers[1]);
          }
          // 追加的数据 end
        }
       
        
      })
    },