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

更新时间：2018年09月15日 09:46:55 作者：小问_

今天小编就为大家分享一篇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循环轮播失效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cli脚手架创建项目遇到的坑及解决
这篇文章主要介绍了vue-cli脚手架创建项目遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
这篇文章主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
2019-08-08
Vue+Element switch组件的使用示例代码详解
这篇文章主要介绍了Vue+Element switch组件的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
vue3修改link标签默认icon无效问题详解
这篇文章主要介绍了vue3修改link标签默认icon无效问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
element Dropdown组件意想不到的坑
本文主要介绍了element Dropdown组件意想不到的坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
Vue使用三种方法刷新页面
这篇文章说明了如何使用Vue去刷新当前页面的多种方法实例,有完成的代码提供参考,希望对你有所帮助
2021-06-06
Vue 的双向绑定原理与用法揭秘
这篇文章主要介绍了Vue 的双向绑定原理与用法,结合实例形式总结分析了Vue 的双向绑定基本原理、功能、用法及注意事项,需要的朋友可以参考下
2020-05-05
Vue中的混入的使用(vue mixins)
这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
VUE事件处理之@click用法示例代码
在Vue进行前端开发中事件处理是必不可少的功能,下面这篇文章主要给大家介绍了关于VUE事件处理之@click用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Vue3配置路由ERROR in [eslint]报错问题及解决
这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10