swiper在vue项目中loop循环轮播失效的解决方法
发布时间：2020-12-16 23:34:27 所属栏目：百科 来源：网络整理
导读：长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播； 那么可以这样写代码试试： { if(resp resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick((
|
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播； 那么可以这样写代码试试： {
if(resp && resp.data.resultCode == "0"){
this.swiperImgs = resp.data.data;
this.$nextTick(() => { // 下一个UI帧再初始化swiper
this.initSwiper();
});
}
})
是的，关键就在于上面这个初始化swiper的调用了，一般会用v-for循环渲染，然后马上初始化swiper，但是这样可能导致初始化时v-for还没渲染完毕，所以可能swiper错乱， 那么swiper放在$nextTick下一个UI帧再初始化，保证了v-for已经完成循环。 pagination: {
el: '.swiper-pagination',// dynamicBullets: true,} }); } 以上这篇swiper在vue项目中loop循环轮播失效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |