swiper 插件从后台获取数据没问题,css 代码啥的也没问题, 但是图片不动,应该怎么解决?
原文链接: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 }
作者:学辉
-------------------------------------------
个性签名: 没有好看的皮囊,但有有趣的灵魂,技术没有止境!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!
万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!