解决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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
简单实现JS计算器功能
Dec 21 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
深入理解移动前端开发之viewport
2018/10/19 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
python切换hosts文件代码示例
2013/12/31 Python
简洁的十分钟Python入门教程
2015/04/03 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
《满井游记》教学反思
2014/02/26 职场文书
Django程序的优化技巧
2021/04/29 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python