码迷,mamicode.com
首页 > 其他好文 > 详细

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

时间:2019-03-09 23:14:33      阅读:501      评论:0      收藏:0      [点我收藏+]

标签:upd   als   问题   contain   date   ali   str   修改   滑动   

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
是因为swiper提前初始化了,那时候数据还没有完全出来。这里有两种解决办法
1. 使用vue提供的$nextTick()方法
当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。
在数据初始化完毕之后,再初始化swiper就不会出现问题了
this.$nextTick(function () {
              var swiper = new Swiper(‘.swiper-container‘, {
        此处省略
         })
            })
2.在swiper初始化的时候
swiper1 = new Swiper(‘.swiper-container‘, {
    initialSlide :0,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true//修改swiper的父元素时,自动初始化swiper
});

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

标签:upd   als   问题   contain   date   ali   str   修改   滑动   

原文地址:https://www.cnblogs.com/mahmud/p/10503590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!