解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题

创新互联公司主打移动网站、网站设计制作、成都做网站、网站改版、网络推广、网站维护、申请域名、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。

使用下面的方法可以解决（保证在数据请求之后再渲染页面）

页面结构


 
 
  <-- 此处为绑定数据的轮播元素 -->
  
  {{topInfo.label}}
  {{topInfo.title}}
  {{topInfo.tips}}
  {{topInfo.bottom}}

初始化方法

//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;
  }
  }
 })
 },

下面再提供一个例子

页面结构

初始化方法

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动态加载数据,动态轮播数据显示白屏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。

网站名称：解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
标题网址：http://cqcxhl.cn/article/jcpcge.html

重庆分公司，新征程启航

解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

其他资讯