前言

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

vue中使用swiper-slide时,循环轮播失效?的更多相关文章

  1. swiper在vue项目中的循环轮播bug以及点击事件

    一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...

  2. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

  3. Vue编写轮播组件引入better-scroll插件无法正常循环轮播

    临近过年还是发个博客表示一下自己的存在感,这段时间公司突然说想搞小程序,想到这无比巨大的坑就只能掩面而泣,于是乎这段时间在学习小程序开发.关于标题所说的是有老铁问的,我也跟着网上的代码码了一遍然后发现 ...

  4. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  5. 在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端

    首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...

  6. 解析SwiftUI布局细节(二)循环轮播+复杂布局

    前言 上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在SiwftUI文档 ...

  7. 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  8. 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载

    前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...

  9. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. pytorch实现性别检测

    卷积神经网络的训练是耗时的,很多场合不可能每次都从随机初始化参数开始训练网络.   1.训练 pytorch中自带几种常用的深度学习网络预训练模型,如VGG.ResNet等.往往为了加快学习的进度,在 ...

  2. 监控zookeeper

    [4ajr@db1 scripts]$ cat zookeeper_mode.sh #!/bin/bash mode=`echo srvr|nc 127.0.0.1 2181|awk '/Mode/{ ...

  3. KVM的安装使用

    1.包的安装 2.虚拟机的创建安装 3.安装基本参数的说明 4.常用操作 一.包的安装 1.#yum install -y kvm qemu-kvm libvirt virt-install brid ...

  4. React 合并行 RowSpan

    十年河东,十年河西,莫欺少年穷 学无止境,精益求精 今儿分享一篇关于React Table 组件合并单元行的方法! 实例效果如下: 原则就是遇到相同的供方名称,就要做行合并! 思路如下:后端计算合并的 ...

  5. pyspider常见错误

    安装完爬虫框架pyspider之后,使用pyspider all 命令,可能会出现以下错误: - Deprecated option 'domaincontroller': use 'http_aut ...

  6. web 日历 任务 插件

    [2] 日历任务插件(jquery版)新增日历任务和点击监听 - qq_26462567的博客 - CSDN博客https://blog.csdn.net/qq_26462567/article/de ...

  7. Airflow Python工作流引擎的重要概念介绍

    Airflow Python工作流引擎的重要概念介绍 - watermelonbig的专栏 - CSDN博客https://blog.csdn.net/watermelonbig/article/de ...

  8. SqlServer如何判断字段中是否含有汉字?

    --/* --unicode编码范围: --汉字:[0x4e00,0x9fa5](或十进制[19968,40869]) --数字:[0x30,0x39](或十进制[48, 57]) --小写字母:[0 ...

  9. 通过CONN_MAX_AGE优化Django的数据库连接

    上周对我们用Django+Django-rest-framework提供的一套接口进行了压力测试.压测的过程中,收到DBA通知——数据库连接数过多,希望我们优化下程序.具体症状就是,如果设置mysql ...

  10. Python——Flask框架——电子邮件

    一.框架(Flask-Mail) 安装 : pip install flask-mail 二.SMTP服务器的配置 配置 默认值 说明 MAIL_SERVER locallhost 电子邮件服务器的主 ...