swiper在vue项目中loop循环轮播失效的解决方法


Posted in Javascript onSeptember 15, 2018

长话短说,在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循环轮播失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 #Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 #Javascript
微信小程序动态增加按钮组件
Sep 14 #Javascript
You might like
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php array_search() 函数使用
2010/04/13 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
javascript 写类方式之九
2009/07/05 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js获取域名的方法
2015/01/27 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python统计文本文件内单词数量的方法
2015/05/30 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python九九乘法表的实例
2017/09/26 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python输入错误后删除的方法
2019/10/12 Python
opencv python如何实现图像二值化
2020/02/03 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
商铺门面租房协议书
2014/10/21 职场文书
投资合作意向书范本
2015/05/08 职场文书
创业计划书之物流运送
2019/09/17 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL