解决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 相关文章推荐
JavaScript的RequireJS库入门指南
Jul 01 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
javascript每日必学之多态
Feb 23 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
浅谈开发eslint规则
Oct 01 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
Vue实现菜单切换功能
Nov 08 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
js charAt的使用示例
2014/02/18 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python多线程同步之文件读写控制
2021/02/25 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
使用python去除图片白色像素的实例
2019/12/12 Python
计算机操作自荐信
2013/12/07 职场文书
运动会广播稿400字
2014/01/25 职场文书
小学教师办公室制度
2014/02/03 职场文书
中学生获奖感言
2014/02/04 职场文书
2015年端午节活动总结
2015/02/11 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery