vue使用swiper动态获取数据轮播异常以及点击跳转

swiper官网:https://www.swiper.com.cn/
loop:是否开启无缝循环轮播,
autoplay:是否自动开启轮播
speed:轮播速度
spaceBetween:轮播图片的间距
slidesPerView:显示轮播图片数量
centeredSlides: active slide位置,默认居左
其他配置如分页器,左右按钮,甚至缩略图都有 可以自行配置
死数据一般是没毛病的,如果是动态获取数据,因为swiper初始化太快,可能数据未获取完而swiper已经初始化完毕 造成轮播异常
vue使用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的初始化配置
})
其实就是延迟了初始化的时间,使用定时器应该也是可行的。
vue使用swiper快速多次点击事件跳转页面 swiper点击事件 click点击事件(快速多次点击无效) double tab双击事件,tab点击事件这个自己去看吧单次还是多次都有效
快速多次点击的话使用click没有效果,要使用tab方法

on:{ tap: function(){ let i=mySwiper.realIndex; //无缝轮播因为有img是复制出来的不能直接获取到请求的数据中带的路径参数,需要获取点击的realindex值拿到点击的图片在图片数组中的索引,然后根据索引重新获取当前点击图片所带的路径 that.get(i); //去获取当前点击图片在请求到的数据中所带的跳转路径。 }, }

【vue使用swiper动态获取数据轮播异常以及点击跳转】遇见问题,留作参考。

    推荐阅读