解决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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
微信小程序转发事件实现解析
Oct 22 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
js控制框架刷新
2008/08/01 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中实现三目运算的方法
2015/06/21 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python实现数值积分方式
2019/11/20 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
安全标准化实施方案
2014/02/20 职场文书
退学证明范本3篇
2014/10/29 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android