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

2022-08-14 11:18:25

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

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

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

主要原因：

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

解决方法：（两个方向）

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

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

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

1 mounted(){
2     this.$nextTick(function(){
3         // ...操作
4         let myswiper = new Swiper(".swiper-container" , {
5             autoplay: true,
6             loop: true
7         })
8     })  
9 }

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