微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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,

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐