解决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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JS实现简易留言板特效
Dec 23 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP生成器简单实例
2015/05/13 PHP
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
jsTree使用记录实例
2016/12/01 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python合并同类型excel表格的方法
2018/04/01 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python中提高pip install速度
2020/02/14 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
python操作redis数据库的三种方法
2020/09/10 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
学生喝酒检讨书
2014/02/06 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
安全生产月标语
2014/10/07 职场文书
政风行风整改方案
2014/10/25 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年公司工作总结
2014/11/22 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
小学中队活动总结
2015/05/11 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang