解决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="..." "></span>{{topInfo.bottom}}</div>
 </div>
 </div>
 <div class="swiper-slide"><img src="" " /></div>
 <div class="swiper-slide"><img src="" " /></div>
 <div class="swiper-slide"><img src="" " /></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" " />
 </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();
 }
 });
 }
 }
 })
},