Vue使用swiper插件時特別是輪播元素含有動態(tài)數(shù)據(jù)時可能會出現(xiàn)數(shù)據(jù)為空或者白屏的問題
創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、網(wǎng)站設(shè)計制作、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、申請域名、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
使用下面的方法可以解決（保證在數(shù)據(jù)請求之后再渲染頁面）
頁面結(jié)構(gòu)
<-- 此處為綁定數(shù)據(jù)的輪播元素 -->{{topInfo.label}}{{topInfo.title}}{{topInfo.tips}}{{topInfo.bottom}}
初始化方法
重慶分公司
重慶分公司
//mounted 或者topInfo的值獲取到時再調(diào)用初始化方法
swiperInit() {
var mySwiper = new Swiper('.swiper-container', {
pagination : '.swiper-pagination',
paginationType : 'bullets',
autoplay : 2000,
// loop : true,
})
},獲取數(shù)據(jù)
getInfo:function(){
var _this=this;
XXX.ajax({
url: '...',
success: (r)=> {
if(!!r.ret){
_this.topInfo=r.ret;
//此時獲取到數(shù)據(jù)再顯示Swiper
_this.getFlag=1;
}
}
})
},下面再提供一個例子
頁面結(jié)構(gòu)
初始化方法
swiperInit() {
var mySwiper = new Swiper('.swiper-container', {
pagination : '.swiper-pagination',
paginationType : 'bullets',
autoplay : 2000,
observer:true,
observeParents:false
})
},獲取數(shù)據(jù)
getData:function(){
var _this=this;
//此處設(shè)置sw_flag變量的目的在于控制swiper顯示關(guān)閉開關(guān)，當(dāng)數(shù)據(jù)重新請求時，先關(guān)閉swiper，請求完畢數(shù)據(jù)再重新渲染頁面；
_this.sw_flag=0;
XXX.ajax({
url: '...',
success: (r)=> {
if(!!r.ret){
_this.banners=r.ret.banners||"";
_this.sw_flag=1;
//此時獲取到數(shù)據(jù)再初始化swiper
_this.$nextTick(function(){
if(!!_this.banners.length){
_this.swiperInit();
}
});
}
}
})
},注：我用的swiper版本是 3.4.2
以上這篇解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。
