vue 页面加载进度条组件实例


Posted in Javascript onFebruary 05, 2018

页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验

但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计。另外,我们不可能监控到所有资源的加载情况。

事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的。所以没我们需要去“模拟”一个进度条,在后端数据返回前利用一个假的动画效果模拟加载,在数据返回后读完进度条并且隐藏。

// progress-bar.vue
<template>
 <transition name="fade">
 <div class="progress-bar" v-if="isShow">
 </div>
 </transition>
</template>

<script type="text/babel">
 export default {
 data() {
  return {
  isShow: true, // 是否显示进度条
  val: 0, // 进度
  }
 },
 props: {
  /**
  * 每10毫秒自增幅度
  */
  step: {
  type: Number,
  default: 5,
  },
  /**
  * 初始值
  */
  initVal: {
  type: Number,
  default: 0,
  },
  /**
  * 到一定进度停止
  */
  stopVal: {
  type: Number,
  default: 80,
  },
  /**
  * 进度条继续到成功
  */
  isOk: {
  type: Boolean,
  default: false,
  },
 },
 mounted() {
  // 初始化后加载进度,加载到百分之多少由stopVal决定
  this.val = this.initVal
  let step = this.step
  let timer = setInterval(() => {
  this.val = this.val + step
  this.$el.style.width = this.val + '%'
  // 父组件数据加载完前进度条最多到stopVal的这个百分值
  if (this.val >= this.stopVal) {
   clearInterval(timer)
   return
  }
  }, 10)
 },
 watch: {
  /**
  * 监听组件props变化决定是否继续加载,一般在父组件数据加载完后改变此标志位
  */
  isOk() {
  let val = this.val
  let step = this.step
  let timer = setInterval(() => {
   val = val + step
   this.$el.style.width = val + '%'
   // 加载到百分百完成
   if (val >= 100) {
   // 关闭定时器
   clearInterval(timer)
   // 加载完成关闭进度条
   this.isShow = false
   // 加载完成的回调
   this.$emit('callback', 'load success')
   return
   }
  }, 10)
  },
 },
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
 position fixed
 top 0
 height 6px
 width 0
 background-color #999
 }
 .fade {
 &-enter-active, &-leave-active {
  transition: all .3s
 }
 &-enter, &-leave-active {
  opacity: 0
 }
 }
</style>

以上这篇vue 页面加载进度条组件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 #Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 #Javascript
javascript实现最长公共子序列实例代码
Feb 05 #Javascript
You might like
检查php文件中是否含有bom的函数
2012/05/31 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
基于python编写的微博应用
2014/10/17 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python数据挖掘需要学的内容
2019/06/23 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
彻底解决Python包下载慢问题
2020/11/15 Python
通信工程毕业生自荐信
2013/11/01 职场文书
好听的队名和口号
2014/06/09 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers
为Centos安装指定版本的Docker
2022/04/01 Servers
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python