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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
用Python解决计数原理问题的方法
2016/08/04 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
详解python读取和输出到txt
2019/03/29 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
班长岗位职责
2013/11/10 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Python 内置函数速查表一览
2021/06/02 Python