swiper在vue项目中loop循环轮播失效的解决方法
时间:2018-09-18
今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播;
那么可以这样写代码试试:
this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick(() => { // 下一个UI帧再初始化swiper this.initSwiper(); }); } })
是的,关键就在于上面这个初始化swiper的调用了,一般会用v-for循环渲染,然后马上初始化swiper,但是这样可能导致初始化时v-for还没渲染完毕,所以可能swiper错乱, 那么swiper放在$nextTick下一个UI帧再初始化,保证了v-for已经完成循环。
initSwiper() { if (this.swiper != null) return; this.swiper = new Swiper('.swiper-container', { loop: true, speed: 900, autoplay: { delay: 3000, //3秒切换一次 disableOnInteraction: false }, observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper pagination: { el: '.swiper-pagination', // dynamicBullets: true, } }); }
以上这篇swiper在vue项目中loop循环轮播失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 1632: [Usaco2007 Feb]Lilypad Pond
- 1630/2023: [Usaco2005 Nov]Ant Counting 数蚂蚁
- Java设计模式(七)Decorate装饰器模式
- 1623: [Usaco2008 Open]Cow Cars 奶牛飞车
- 1622: [Usaco2008 Open]Word Power 名字的能量
- 3297: [USACO2011 Open]forgot
- 1740: [Usaco2005 mar]Yogurt factory 奶酪工厂
- 1741: [Usaco2005 nov]Asteroids 穿越小行星群
- 3298: [USACO 2011Open]cow checkers
- 3433: [Usaco2014 Jan]Recording the Moolympics
- 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者
- 3391: [Usaco2004 Dec]Tree Cutting网络破坏
- 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏
- GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker 入门到实战教程(二)安装Docker
- Docker 入门到实战教程(三)镜像和容器
- Docker 入门到实战教程(四)容器链接
- Docker 入门到实战教程(五)构建Docker镜像
- Docker 入门到实战教程(六)Docker数据卷
- Docker 入门到实战教程(七)安装Redis
- Docker 入门到实战教程(八)安装Mysql
- Docker 入门到实战教程(九)安装Nginx
- Docker教程(九)部署Spring Boot项目
- Docker 入门到实战教程(十一)部署Vue+SpringBoot 前后端分离项目
- Docker 入门到实战教程(十二)ELK+Filebeat搭建日志分析系统
- Docker 入门到实战教程(十三)Docker Compose
- 解决IDEA2020.1版本的lombok插件问题
- 工具系列 | 视频监控RTSP转HLS解决方案
- Redis系列 |(一)六种基本数据结构