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+'/[email protected]?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+'/[email protected]?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+'/[email protected]?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完美解决