Javascript

vue内使用Swiper轮播到最后一张停止解决方法

本文主要是介绍vue内使用Swiper轮播到最后一张停止解决方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
template>
  <swiper ref="mySwiper" :options="swiperOptions" class="banner" v-if="banners.length>0">
    <swiper-slide v-for="value in banners" :key="value.bannerId" class="item">
      <a :href="value.url">
        <img :src="value.pic" alt="">
      </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

1.sipwer的bug，如果数据是从网络上获取的，那么自动轮播到最后一张就会停止

2.解决方法在swiper组件上加上v-if="数据.length>0"

这个方法会导致调试器报错，还有个方法就是在swiper配置内加上 centeredSlides: true,

这篇关于vue内使用Swiper轮播到最后一张停止解决方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航