Vue使用swiper插件時特別是輪播元素含有動態數據時可能會出現數據為空或者白屏的問題

使用下面的方法可以解決（保證在數據請求之后再渲染頁面）

頁面結構

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo">  <-- 此處為綁定數據的輪播元素 -->  <div class="bannerBox1">  <div class="l_label" >{{topInfo.label}}</div>  <div class="l_title" >{{topInfo.title}}</div>  <div class="l_tips" >{{topInfo.tips}}</div>  <div class="l_bottom"><span><img src="..." alt=""></span>{{topInfo.bottom}}</div>  </div> </div> <div class="swiper-slide"><img src="" alt="" /></div> <div class="swiper-slide"><img src="" alt="" /></div> <div class="swiper-slide"><img src="" alt="" /></div> </div> <div class="swiper-pagination"></div></div>

初始化方法

//mounted 或者topInfo的值獲取到時再調用初始化方法swiperInit() { var mySwiper = new Swiper('.swiper-container', {  pagination : '.swiper-pagination',  paginationType : 'bullets',  autoplay : 2000,  // loop : true, })},

獲取數據

getInfo:function(){ var _this=this; XXX.ajax({  url: '...',  success: (r)=> {  if(!!r.ret){   _this.topInfo=r.ret;   //此時獲取到數據再顯示Swiper   _this.getFlag=1;  }  } }) },

下面再提供一個例子

頁面結構

<div class="swBox" v-if="sw_flag&&!!banners.length"> <div class="swiper-container"> <div class="swiper-wrapper">  <div class="swiper-slide" v-for="(banner,index) in banners" :key="index" @click="toNextUrl(banner,index)">  <img :src="banner.image" alt="" />  </div> </div> <div class="swiper-pagination"></div> </div></div>

初始化方法

swiperInit() { var mySwiper = new Swiper('.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: '...', 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動態加載數據,動態輪播數據顯示白屏的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。