首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中使用swiper-slide时,循环轮播失效?

vue中使用swiper-slide时,循环轮播失效?

作者头像
Dawnzhang
发布2019-01-28 10:12:29
1.9K0
发布2019-01-28 10:12:29
举报

前言

  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>

<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>

重启项目,loop完美解决

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-01-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    •   代码如下:  
      • data数据:
        • 仔细查看swiper文档。
          • 解决方法;
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档