vue-awesome-swiper 设置 loop:true 失效

问题描述

开始用本地数据，轮播正常；后来用接口数据，就不能循环轮播了。

问题原因

页面渲染的时候，数据未加载完成。

解决方案

方法1、 v-if=“list.length”

当确保获取到数据后，再显示 swiper。

<swiper ref="mySwiper" :options="swiperOption" v-if="list.length">
  <swiper-slide v-for="item of list" :key='item.id'>
    <img :src="item.imgUrl" />
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

方法2、computed（该种方式更优雅，将逻辑性的代码写到computed）

和方法1 的原理是一样的，只是避免更多的逻辑直接写在 template 中。

<swiper ref="mySwiper" :options="swiperOption" v-if="sweiperlength">
  <swiper-slide v-for="item of list" :key='item.id'>
    <img :src="item.imgUrl" />
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

computed: {
  sweiperlength () {
    return this.list.length
  }
}

方法3、init 初始化 swiper 组件

先获取到 swiper实例，拿到数据后再初始化 swiper实例。

<swiper ref="mySwiper" :options="swiperOption">
  <swiper-slide v-for="item of list" :key="item.id">
    <img :src="item.imgUrl" />
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

updated () {
  if (this.list.length > 1) {
    this.swiper()
  }
},
computed: {
  swiper () {
    return this.$refs.mySwiper.swiper
  }
}