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对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
潜说js对象和数组
May 25 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP完整的日历类(CLASS)
2006/11/27 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
Axios学习笔记之使用方法教程
2017/07/21 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
物业招聘计划书
2014/01/10 职场文书
大学活动邀请函
2014/01/28 职场文书
经典公益广告词
2014/03/13 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
2014年征兵标语
2014/06/20 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
小学生暑假安全公约
2015/07/14 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Python图片检索之以图搜图
2021/05/31 Python
SQL注入详解及防范方法
2021/12/06 MySQL
美元符号 $
2022/02/17 杂记