swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播、自动播放都比较正常。 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽。 解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false。这时候使用autoplay开启自动播放是可以的, 然而 当加上loop让其循环播放时,会发现是有问题的。如果不要循环播放的话,上述方法勉强可行,但是如果想要自动播放与循环轮播同时生效的话,还得另寻他法。 解决方法:在获取完数据后,将swiper放在$nextTick下一个UI帧再初始化。 this.$nextTick(() => { // 下一个UI帧再初始化swiper this.initSwiper(); }); 然后在initSwiper方法中,完成swiper初始化,如: initSwiper () { const _this = this var mySwiper = new Swiper ('.swiper-container1', { loop: true, autoplay:true, observer:true, observeParents