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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
canvas绘制折线路径动画实现
May 12 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
PHP连接MongoDB示例代码
2012/09/06 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery中this的使用说明
2010/09/06 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
js命名空间写法示例
2015/12/18 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
3分钟学会一个Python小技巧
2018/11/23 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
个性婚礼策划方案
2014/05/17 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python