Vue使用swiper插件時特別是輪播元素含有動態(tài)數(shù)據(jù)時可能會出現(xiàn)數(shù)據(jù)為空或者白屏的問題
創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、網(wǎng)站設計制作、成都做網(wǎng)站、網(wǎng)站改版、網(wǎng)絡推廣、網(wǎng)站維護、申請域名、等互聯(lián)網(wǎng)信息服務,為各行業(yè)提供服務。在技術實力的保障下,我們?yōu)榭蛻舫兄Z穩(wěn)定,放心的服務,根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設計。最后,要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設計,我們還會規(guī)劃穩(wěn)定安全的技術方案做保障。
使用下面的方法可以解決(保證在數(shù)據(jù)請求之后再渲染頁面)
頁面結構
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此處為綁定數(shù)據(jù)的輪播元素 --> <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的值獲取到時再調(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; } } }) },
下面再提供一個例子
頁面結構
<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 }) },
獲取數(shù)據(jù)
getData:function(){ var _this=this; //此處設置sw_flag變量的目的在于控制swiper顯示關閉開關,當數(shù)據(jù)重新請求時,先關閉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)。
當前名稱:解決Vue使用swiper動態(tài)加載數(shù)據(jù),動態(tài)輪播數(shù)據(jù)顯示白屏的問題
標題網(wǎng)址:http://muchs.cn/article14/jcpcge.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設、做網(wǎng)站、移動網(wǎng)站建設、網(wǎng)站設計、企業(yè)網(wǎng)站制作、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)