vue中使用swiper-slide時，循環輪播失效？

前言

　　vue 項目中使用時，組件swiper-slide 如果用v-for循環的話，loop：true 就不能無縫輪播，每次輪播到最后一張就停止了？？？

正文

　　代碼如下：　　

 <swiper :options="swiperOption2">
    <swiper-slide v-for="(item, index) of showProduct" :key="index">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="product-div">
            <div class="product-p" v-html='item.introduction'></div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div id="product-img" v-if="item.androidcode !== null && item.androidcode !== ''">
            <div class="grid-img">
              <img class="android-img " :src="httpImgSrc+'/[e-mail]?id=' + item.androidcode">
            </div>
          </div>
        </el-col>
      </el-row>
    </swiper-slide>
    <div v-show="isShow" class="swiper-button-prev" id="swiper-button-prev" slot="button-prev" style="mergin-top:-50px"></div>
    <div v-show="isShow" class="swiper-button-next" id="swiper-button-next" slot="button-next"></div>
    <div class="swiper-pagination-1" slot="pagination" id="swiper-pagination1"></div>
  </swiper>

data數據：

swiperOption2: {
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: true,
        slidesPerGroup: 1,
        loop: true,
        pagination: {
          el: '.swiper-pagination-1',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }

這么寫看似是沒毛病的。可是loop：true這個條件就失效了。這是為啥呢？

仔細查看swiper文檔。

　　loop

　　設置為true 則開啟loop模式。loop模式：會在原本slide前后復制若干個slide(默認一個)並在合適的時候切換，讓Swiper看起來是循環的。 
loop模式在與free模式同用時會產生抖動，因為free模式下沒有復制slide的時間點。

注意紅字，在原本基礎上復制若干個slide，可是在vue的v-for中時，異步加載的數據都還沒有返回時，就先加載了Swiper組件並復制了sliper

解決方法;

　　利用v-if的屬性，v-if=showProduct.length，確保異步加載的數據已經返回后，再加載swiper組件

代碼如下：

　　

<swiper :options="swiperOption2"  v-if="showProduct.length">
    <swiper-slide v-for="(item, index) of showProduct" :key="index">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="product-div">
            <div class="product-p" v-html='item.introduction'></div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div id="product-img" v-if="item.androidcode !== null && item.androidcode !== ''">
            <div class="grid-img">
              <img class="android-img " :src="httpImgSrc+'/[e-mail]?id=' + item.androidcode">
            </div>
          </div>
        </el-col>
      </el-row>
    </swiper-slide>
    <div v-show="isShow" class="swiper-button-prev" id="swiper-button-prev" slot="button-prev" style="mergin-top:-50px"></div>
    <div v-show="isShow" class="swiper-button-next" id="swiper-button-next" slot="button-next"></div>
    <div class="swiper-pagination-1" slot="pagination" id="swiper-pagination1"></div>
  </swiper>

或

　

<div  v-if="showProduct.length">

<swiper :options="swiperOption2" >
    <swiper-slide v-for="(item, index) of showProduct" :key="index">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="product-div">
            <div class="product-p" v-html='item.introduction'></div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div id="product-img" v-if="item.androidcode !== null && item.androidcode !== ''">
            <div class="grid-img">
              <img class="android-img " :src="httpImgSrc+'/[e-mail]?id=' + item.androidcode">
            </div>
          </div>
        </el-col>
      </el-row>
    </swiper-slide>
    <div v-show="isShow" class="swiper-button-prev" id="swiper-button-prev" slot="button-prev" style="mergin-top:-50px"></div>
    <div v-show="isShow" class="swiper-button-next" id="swiper-button-next" slot="button-next"></div>
    <div class="swiper-pagination-1" slot="pagination" id="swiper-pagination1"></div>
  </swiper>

</div>

重啟項目，loop完美解決