本文共 650 字,大约阅读时间需要 2 分钟。
在页面开发过程中,slide的数据经常是需要动态获取然后赋值,但这个时候dom已经渲染完成,所以,页面上的slide并没有更新
碰到这个问题的小伙伴,看来还是没把swiper深究。
其实swiper的开发者早就想到这个问题了,有时间可以看下swiper的开发文档:
Observer(监视器):
这个属性里面有两个方法:observer
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper observeParents
将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新 上面是官方文档的解释;相信现在大家应该都有解决方案了
下面回到正题,解决刚开始说的那个问题,在vue中使用swiper,数据渲染成功后,滑动效果不起作用:
首先,把初始化swiper放在数据获取成功之后; 然后打开
observer:true, observeParents:true,实时监听swiper的子元素的变化 var swiper = new Swiper(this.$refs.swiper1, { 转载地址:http://jizsi.baihongyu.com/