swiper 插件从后台获取数据没问题，css 代码啥的也没问题， 但是图片不动，应该怎么解决？

原文链接：https://blog.csdn.net/XH_jing/article/details/108208913

swiper 插件从后台获取数据没问题，css 代码啥的也没问题，但是图片不动，应该怎么解决？

本质上就是数据加载顺序，生命周期的问题。

主要原因：

swiper提前初始化了，而这个时候，数据还没有完全出来。

解决方法：（两个方向）

• 从swiper 入手，在swiper中写 observer:true/observeParents:true

let myswiper = new Swiper(".swiper-container" , {
    autoplay: true,
    loop: true,
    // observer 修改swiper子元素时自动初始化swiper
    observer:true,
    // observeParents 包括当前父元素的swiper发生变更时也会初始化swiper
    observeParents:true,
})

 

• 从 Vue 入手，vue中专门提供了提供了一个方法nextTick() 用于解决dom的先后执行问题。

mounted(){
    this.$nextTick(function(){
        // ...操作
        let myswiper = new Swiper(".swiper-container" , {
            autoplay: true,
            loop: true
        })
    })  
}