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 鼠标拖动图标技术
Feb 07 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
浅谈Angular单元测试总结
Mar 22 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使用CURL伪造IP和来源实例详解
2015/01/15 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
js数组操作常用方法
2014/05/08 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
金士达面试非笔试
2012/03/14 面试题
教师自荐信
2013/12/10 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
有趣的广告词
2014/03/18 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
创业计划书之网吧
2019/10/10 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
python opencv通过按键采集图片源码
2021/05/20 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL