专栏首页Dawnzhang的开发者手册vue中使用swiper-slide时,循环轮播失效?

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>

<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完美解决

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue项目中遇到的那些事。

      有好几天没更新文章了。这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成。

    Dawnzhang
  • spring cloud(学习笔记)微服务启动错误(1)

    Error starting ApplicationContext. To display the auto-configuration report re-r...

    Dawnzhang
  • ie浏览器部分图片不显示

    前几天做项目时,发现一个奇怪的现象,从后台获取的图片,在IE浏览器端,有一部分不会显示,仔细研究发现是图片本来是.jpg格式,后台传过来的图片后缀已经被改成了...

    Dawnzhang
  • 使用 swiper 轮播插件遇到的问题及解决方法

    我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法

    德顺
  • swiper.animate实现轮播展示动画效果

    任我行RQ
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 06.搜索功能

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-...

    光束云
  • JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)

    【注意】:prop和attr的区别,如果操作的是元素的固有属性(非自定义的),建议使用prop;若是自定义属性,建议用attr。

    Winter_world
  • 手势魅力-设置一个触摸菜单

    本篇为一移动端博文,个人觉得这篇外文还可以,就翻译了一下,最终实现的一个效果是:用手势创建一个本地菜单(点击一菜单按钮,实现设置一个触摸侧滑,滑动滑出效果,如下...

    itclanCoder
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 09.分页功能

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-...

    光束云
  • JAVA开发工作流程

    决定在后面的过程中采取哪些步骤,思考整个开发任务如何实现,分步骤建立“路标”,这样可以帮助自己开发时一步一个脚印的逐步完成,有效的防止自己在开发过程中迷失方向。

    HUC思梦

扫码关注云+社区

领取腾讯云代金券