明天在应用 vue-awesome-swiper
是遇到一个问题,就是 loop
属性填为 true
时依然是无奈循环,于是就上网查了一下,而后在这里记录一下。
问题点
在 Vue
中如果数据是动静传入 swiper
时,会呈现即便在 swiperOption
数据中增加 loop
的属性为 true
时,也无奈使轮播图循环播放。
解决方案
那么此时只须要在 swiper
中增加一个 v-if
判断一下传入数据的长度或者其余 追随数据响应式变动的值 即可使 loop
失效了。
<swiper :options="swiperOption" ref="mySwiper" v-if="propSwiperData.length">
<swiper-slide v-for="(item, i) in propSwiperData" :key="i">
<img :src="item.image" />
</swiper-slide>
</swiper>
data() {
return {
swiperOption: {loop: true,},
}
},