在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效
究其原因,是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法1. 使用vue提供的$nextTick()方法当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。在数据初始化完毕之后,再初始化swiper就不会出现问题了this.$nextTick(function () {...
·
究其原因,是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法
1. 使用vue提供的$nextTick()方法
当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。
在数据初始化完毕之后,再初始化swiper就不会出现问题了
this.$nextTick(function () {
var swiper = new Swiper('.swiper-container', {
此处省略
})
})
2.在swiper初始化的时候
swiper1 = new Swiper('.swiper-container', {
initialSlide :0,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
});
更多推荐
已为社区贡献31条内容
所有评论(0)