Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空轮播失效等问题

原因:
即在axios请求数据过程中 初始化运行时要绑定的部分元素节点还没有创建成功
导致swiper插件中部分指定并没有绑定到指定元素节点上
导致swiper轮播出现异常
swiper中的observer方法,在启动状态下,当我们修改swiper的子元素时,会自动初始化

解决办法1:

var swiper = new Swiper('.swiper-container', { 
    observer:true,//修改swiper自己或子元素时,自动初始化swiper 
    observeParents:true//修改swiper的父元素时,自动初始化swiper 
});

解决办法2:
利用 setTimeout(()=>{ },0)的异步请求属性 即等待axios的get指令请求和渲染完 再执行。

解决办法3:
或者可以在获取数据后在初始化swiper

Logo

前往低代码交流专区

更多推荐