解决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 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
Javascript this 的一些学习总结
Aug 02 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
JS匿名函数实例分析
Nov 26 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
jQuery创建折叠式菜单
Jun 15 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php网站被挂木马后的修复方法总结
2014/11/06 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python strip()函数 介绍
2013/05/24 Python
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python制作爬虫抓取美女图
2016/01/20 Python
python数据挖掘需要学的内容
2019/06/23 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
美容院店长岗位职责
2014/04/08 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党员自评材料范文
2014/12/17 职场文书
安全教育培训心得体会
2016/01/15 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Vue和Flask通信的实现
2021/05/19 Vue.js