技術標籤：vue

轉載大佬的文章

解決了，找了許久的問題。

原理跟大佬一樣，通過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 屬性，突然就生效了。可以迴圈了