Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
因为swiper提前初始化了,那个时候还没有数据,当数据调出来时已经没用了,所以有以下几个解决方法:1、在数据调用结束后再进行swiper初始化api.advertisingDate({}, function (res) { that.advertising = res that.$nextTick(function () { that
因为swiper提前初始化了,那个时候还没有数据,当数据调出来时已经没用了,所以有以下几个解决方法:
1、在数据调用结束后再进行swiper初始化
api.advertisingDate({}, function (res) {
that.advertising = res
that.$nextTick(function () {
that.swiperInit()
})
})
这里还要用到$nextTick,它会在数据变化以后,DOM更新以后进行回调函数,不然的话轮播还是会出现错乱的情况
2、new Swiper('.swiper-container', {
initialSlide :0,
pagination: '.swiper-pagination',
loop: true,
speed: 400,
autoplay: 2000,
autoplayDisableOnInteraction: false,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
})
如果不是轮播的情况下呢,直接在初始化时加上 observer、 observeParents这两个参数就行了,会在数据变化时,再帮你初始化一次
如果以上还没帮助你解决问题,那还可以接着看下我的另一篇博文:http://blog.csdn.net/weixin_38304202/article/details/78282826
Vue+swiper异步加载轮播图,并且懒加载
也许能帮你解决问题,还是不能的话,就不好意思了~~
更多推荐
所有评论(0)