解决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 相关文章推荐
select标记美化--JS式插件、后期加载
Apr 01 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
React Native项目框架搭建的一些心得体会
May 28 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
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
js函数般调用正则
2008/04/08 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Python sorted排序方法如何实现
2020/03/31 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
css3高级选择器使用方法
2013/12/02 HTML / CSS
化工机械应届生求职信
2013/11/04 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
解除财产保全担保书
2014/05/20 职场文书
优秀求职信
2014/05/29 职场文书
保卫工作个人总结
2015/03/03 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
python基础之错误和异常处理
2021/10/24 Python