解决Vue使用swiper动态加载数据,动态轮播数据显示
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
今天长沙网络推广就为大家分享一篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题
使用狼蚁网站SEO优化的方法可以解决（保证在数据请求之后再渲染页面）
页面结构
<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;
}
}
})
},
狼蚁网站SEO优化再提供一个例子
页面结构
<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动态加载数据,动态轮播数据显示白屏的问题就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。