vue+swiper不能轮播，不报错，只显示第一张图

Question

只显示第一张图片，不能轮播，没有报错

Answer 1

你可以去看看这个，可能对你有帮助。
observer

启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。

var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
})

Answer 2

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

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

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

（修改swiper自己或子元素时，自动初始化swiper）、 observeParents

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

参考链接：http://www.cnblogs.com/DivHao...