首页 > Web开发 > 详细

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

时间:2020-09-02 22:33:30      阅读:53      评论:0      收藏:0      [点我收藏+]

原文链接: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 代码啥的也没问题, 但是图片不动,应该怎么解决?

原文:https://www.cnblogs.com/XH-jing/p/13603900.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!