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

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不能轮播,不报错,只显示第一张图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容