vue中使用swiper 已配置loop 不轮播问题

问题描述：
在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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17