关于javascript:vueawesomeswiper的loop循环不管用了

明天在应用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,
        },
    }
},

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理