好资源导航 » 文章资讯 » 解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

2023-09-07 22:27:04 68

Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题

使用下面的方法可以解决（保证在数据请求之后再渲染页面）

页面结构




<--此处为绑定数据的轮播元素-->

{{topInfo.label}}

初始化方法

//mounted或者topInfo的值获取到时再调用初始化方法
swiperInit(){
varmySwiper=newSwiper('.swiper-container',{
pagination:'.swiper-pagination',
paginationType:'bullets',
autoplay:2000,
//loop:true,
})
},

获取数据

getInfo:function(){
var_this=this;
XXX.ajax({
url:'http://www.haoziyuan.cc...',
success:(r)=>{
if(!!r.ret){
_this.topInfo=r.ret;
//此时获取到数据再显示Swiper
_this.getFlag=1;
}
}
})
},

下面再提供一个例子

页面结构

初始化方法

swiperInit(){
varmySwiper=newSwiper('.swiper-container',{
pagination:'.swiper-pagination',
paginationType:'bullets',
autoplay:2000,
observer:true,
observeParents:false
})
},

获取数据

getData:function(){
var_this=this;
//此处设置sw_flag变量的目的在于控制swiper显示关闭开关，当数据重新请求时，先关闭swiper，请求完毕数据再重新渲染页面；
_this.sw_flag=0;
XXX.ajax({
url:'http://www.haoziyuan.cc...',
success:(r)=>{
if(!!r.ret){
_this.banners=r.ret.banners||"";
_this.sw_flag=1;
//此时获取到数据再初始化swiper
_this.$nextTick(function(){
if(!!_this.banners.length){
_this.swiperInit();
}
});
}
}
})
},

注：我用的swiper版本是3.4.2

以上这篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

热门推荐

随机推荐