swiper动态加载数据问题,轮播失效问题(配置失效问题)
Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空轮播失效等问题原因:即在axios请求数据过程中 初始化运行时要绑定的部分元素节点还没有创建成功导致swiper插件中部分指定并没有绑定到指定元素节点上导致swiper轮播出现异常swiper中的observer方法,在启动状态下,当我们修改swiper的子元素时,会自动初始化解决办法1:var swiper = new S
·
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
更多推荐
已为社区贡献10条内容
所有评论(0)