Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法

因为swiper提前初始化了,那个时候还没有数据,当数据调出来时已经没用了,所以有以下几个解决方法:

1、在数据调用结束后再进行swiper初始化

api.advertisingDate({}, function (res) {
    that.advertising = res
        that.$nextTick(function () {
            that.swiperInit()
        })
 })

这里还要用到$nextTick,它会在数据变化以后,DOM更新以后进行回调函数,不然的话轮播还是会出现错乱的情况

2、new Swiper('.swiper-container', {
    initialSlide :0,
       pagination: '.swiper-pagination',
       loop: true,
       speed: 400,
       autoplay: 2000,
       autoplayDisableOnInteraction: false,
       observer:true,//修改swiper自己或子元素时,自动初始化swiper
       observeParents:true//修改swiper的父元素时,自动初始化swiper
     })

如果不是轮播的情况下呢,直接在初始化时加上   observer、 observeParents这两个参数就行了,会在数据变化时,再帮你初始化一次

如果以上还没帮助你解决问题,那还可以接着看下我的另一篇博文:http://blog.csdn.net/weixin_38304202/article/details/78282826      

Vue+swiper异步加载轮播图,并且懒加载

也许能帮你解决问题,还是不能的话,就不好意思了~~

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值