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

60次阅读

共计 429 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0