您的位置:首页 > Web前端 > Vue.js

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

2019-03-23 16:14 2935 查看

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);//去获取当前点击图片在请求到的数据中所带的跳转路径。
},
}

遇见问题,留作参考。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐