【转载】Swiper 动态渲染数据，Loop 属性不生效

转载大佬的文章

---

解决了，找了许久的问题。

原理跟大佬一样，通过v-if指令，来延迟 swiper 的注入到DOM树中。
错开 swiper 的注入时间。

// HTML 模板
<swiper v-if="swt" :options="swiperOption" ref="mySwiper">
  <swiper-slide v-for="item in imgLinks" :key="item.id">
    <img
      :src="item.hyperlink"
      alt=""
      style="width: 100%; height: 100%; object-fit: cover"
    />
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  <div class="swiper-button-prev" slot="button-prev"></div>
  <div class="swiper-button-next" slot="button-next"></div>
</swiper>

// Vue 代码
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
    setTimeout(() => {
      this.swt = true
    }, 200)
  },

这样 Swiper 的 loop 属性，突然就生效了。可以循环了