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的滑动了,且方向也是相同的了

你可能感兴趣的:(vue,element,carousel)