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


Posted in Javascript onSeptember 27, 2018

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

以上这篇解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
深入了解js原型模式
May 30 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
在vue中获取token,并将token写进header的方法
Sep 26 #Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
金融专业个人求职信
2013/09/22 职场文书
视光学专业毕业生推荐信
2013/10/28 职场文书
现场施工员岗位职责
2014/03/10 职场文书
2014年医院工作总结
2014/11/20 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript