vue中使用swiper-slide时，循环轮播失效？

时间：2023-03-08 15:08:43
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+'/showImg@file.do?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+'/showImg@file.do?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+'/showImg@file.do?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完美解决

相关文章