Vue使用读卡器插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题
使用下面的方法可以解决(保证在数据请求之后再渲染页面)
<强>页面结构
& lt; div类=皊wiper-container”比;
& lt; div类=皊wiper-wrapper”比;
& lt; div class=" swiper-slide tpOne“v=皌opInfo”比;
& lt;——此处为绑定数据的轮播元素——比;
& lt; div类=癰annerBox1”比;
& lt; div类=" l_label "在{{topInfo.label}} & lt;/div>
& lt; div类=" l_title "在{{topInfo.title}} & lt;/div>
& lt; div类=" l_tips "在{{topInfo.tips}} & lt;/div>
& lt; div类=" l_bottom "祝辞& lt; span> & lt; img src=" https://www.yisu.com/zixun/.. " alt="祝辞& lt;/span> {{topInfo.bottom}} & lt;/div>
& lt;/div>
& lt;/div>
& lt; div类=" swiper-slide "祝辞& lt; img src=" alt="/祝辞& lt;/div>
& lt; div类=" swiper-slide "祝辞& lt; img src=" alt="/祝辞& lt;/div>
& lt; div类=" swiper-slide "祝辞& lt; img src=" alt="/祝辞& lt;/div>
& lt;/div>
& lt; div类=" swiper-pagination "祝辞& lt;/div>
& lt;/div>
<强>初始化方法
//安装或者topInfo的值获取到时再调用初始化方法
swiperInit () {
var mySwiper=new偷窃者(”。swiper-container’,{
分页:“.swiper-pagination”,
paginationType:‘子弹’,
播放:2000//循环:没错,
})
},
<强>获取数据
getInfo:函数(){
var _this=;
XXX.ajax ({
url:“……”
成功:(r)=比;{
如果(! ! r.ret) {
_this.topInfo=r.ret;//此时获取到数据再显示偷窃者
_this.getFlag=1;
}
}
})
},
下面再提供一个例子
<强>页面结构
& lt; div类=" swBox " v=皊w_flag&和! ! banners.length”比;
& lt; div类=皊wiper-container”比;
& lt; div类=皊wiper-wrapper”比;
& lt; div类=v代表“swiper-slide”=昂岱暧?指数”:关键=爸甘盄click=皌oNextUrl旗帜,指数”比;
& lt; img src=" https://www.yisu.com/zixun/banner.image " alt="/比;
& lt;/div>
& lt;/div>
& lt; div类=" swiper-pagination "祝辞& lt;/div>
& lt;/div>
& lt;/div>
<强>初始化方法
swiperInit () {
var mySwiper=new偷窃者(”。swiper-container’,{
分页:“.swiper-pagination”,
paginationType:‘子弹’,
播放:2000
观察者:没错,
observeParents:假
})
},
<强>获取数据
getData:函数(){
var _this=;//此处设置sw_flag变量的目的在于控制偷窃者显示关闭开关,当数据重新请求时,先关闭偷窃者,请求完毕数据再重新渲染页面;
_this.sw_flag=0;
XXX.ajax ({
url:“……”
成功:(r)=比;{
如果(! ! r.ret) {
_this.banners=r.ret.banners | | ";
_this.sw_flag=1;//此时获取到数据再初始化偷窃者
_this。美元nextTick(函数(){
如果(! ! _this.banners.length) {
_this.swiperInit ();
}
});
}
}
})
},
<强>注:我用的偷窃者版本是3.4.2
以上这篇解决Vue使用偷窃者动态加载数据,动态轮播数据显示白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
