在Vue中使用了Swiper ,从后台获取动态数据后,swiper滑动失效
原因是因为Swiper提前初始化了,然而数据还没有加载完成。解决方法如下:
1、在Swiper初始化时
swiper0 = new Swiper('.w0', { initialSlide :0, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper slidesPerView: 5, spaceBetween: 10, loop: false, initialSlide:2, centeredSlides: true, pagination: { el: '.swiper-pagination', clickable: true, }, });
2、使用Vue提供的$nextTick()方法
this.$nextTick(function(){ var swiper0 = new Swiper('.w0', {}) })