美文网首页Vue大前端
Vue+Swiper动态获取数据,不报错,不能轮播,只显示第一张

Vue+Swiper动态获取数据,不报错,不能轮播,只显示第一张

作者: 左木北鱼 | 来源:发表于2018-12-11 15:00 被阅读0次

Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
因为swiper提前初始化了,那个时候还没有数据,当数据调出来时已经没用了,所以有以下几个解决方法:
1、在数据调用结束后再进行swiper初始化

api.ajax({...}, function(...) {
    ... // 赋值代码
    that.$nextTick(function () {
        that.swiperInit()
    })
})
这里还要用到$nextTick,它会在数据变化以后,DOM更新以后进行回调函数

2、如果不是轮播的情况下呢,直接在初始化时加上observer

(修改swiper自己或子元素时,自动初始化swiper)、 observeParents

(修改swiper的父元素时,自动初始化swiper)这两个参数就行了,会在数据变化时,再帮你初始化一次


image.png

3、加载组件时加v-if判断:【推荐】

image.png

原文地址: vue+swiper不能轮播,不报错,只显示第一张图

相关文章

网友评论

    本文标题:Vue+Swiper动态获取数据,不报错,不能轮播,只显示第一张

    本文链接:https://www.haomeiwen.com/subject/yhtehqtx.html