QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

vue教程

Vue和swiper冲突问题

 admin  2023-02-28 10:19:15
以下是网上看到的常见的答案:
VUE引入式开发环境中,使用swiper会出现swiper无法初始化的情况。那是因为加载swiper的时候dom还没有渲染完成,造成swiper初始化失败。
解决方案:把swiper放到VUE钩子函数里面进行初始化。
  1. ar myApp = new Vue({ 
  2.     el: '#myDiv'
  3.     data: { 
  4.     }, 
  5.     mounted(){ 
  6.         var mySwiper = new Swiper ('.swiper-container', { 
  7.             //swiper 
  8.         }) 
  9.     } 
  10. }) 
注意js文件的引入顺序,vue.js一定要放到swiper.js前面。

还有一个说法是:
  1. ar myApp = new Vue({ 
  2.     el: '#app'
  3.     data: { 
  4.          
  5.     }, 
  6.     updated: function() { 
  7.       var swiper = new Swiper('.swiper-container', { 
  8.             pagination: { 
  9.                 el: '.swiper-pagination'
  10.             }, 
  11.       }); 
  12.    }, 
  13. }) 
这里是updated,就是这个方法踩了坑,vue.js对updated的规定是:只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期,只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法

如果data里边的值没有变化,是不会触发updated的 所以上面的js并不会执行,在这个坑里踩了好久,想执行必须动态的改一下data里边的数据,比如:

  1. mounted(){ 
  2.             this.banner = [];//你的banner数据 
  3.         }, 
这样才会执行updated,也就是才回去渲染swiper幻灯片






¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《Vue和swiper冲突问题》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/frame/vue/931.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序