Vue使用swiper动态加载数据,动态轮播数据显示白屏问题处理

5 篇文章 0 订阅
3 篇文章 0 订阅
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值