问题描述:
在vue中 使用v-for 动态加载swiper子项时 如果你配置了loop: true 但是发现swiper不会循环轮播原因分析:
可能是swiper在初始化的时候会扫描swiper-wrapper内部swiper-slide的个数,从而完成初始化。
但是由于动态加载是在初始化完成进行的操作,所以无法确定swiper-wrapper内部swiper-slide的个数,不会轮播解决方案:
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
如果你是用以下方法使用swiper
// ---数据加载完后
this.$nextTick(()=>{
var swiper = new Swiper(this.$refs.mySwiper, {
loop: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
})
})
如果使用vue-awesome-swiper时
设置:options="swiperOption"
const swiperOption = ref({
loop: true,
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
})