vue使用swiper动态获取数据轮播异常

swiper官网:https://www.swiper.com.cn/
loop:是否开启无缝循环轮播,
autoplay:是否自动开启轮播
speed:轮播速度
spaceBetween:轮播图片的间距
slidesPerView:显示轮播图片数量
centeredSlides: active slide位置,默认居左
其他配置如分页器,左右按钮,甚至缩略图都有 可以自行配置
死数据一般是没毛病的,如果是动态获取数据,因为swiper初始化太快,可能数据未获取完而swiper已经初始化完毕 造成轮播异常
有的说要配置属性
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swipe
也有的说配置这个:
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
},
但我这里都没效果,最后用了vue中的nextTick解决:
this.$nextTick(()=>{
this.initswiper();//自己定义的方法,里面是swiper的初始化配置
})
其实就是延迟了初始化的时间,使用定时器应该也是可行的。

遇见问题,留作参考。

上一篇:vue3 使用ref获取Dom元素


下一篇:Vue开发--vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)