vue 页面加载进度条组件
2017-07-25 15:24
148 查看
页面加载进度条最初我是在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实现页面加载进度条
- vue-cli监听组件加载完成
- pace.js页面加载进度条插件
- vuejs 无node单页应用方案二(babel-standalone or traceur,vue-router实现、组件按需懒加载)
- 页面加载进度条pace.js
- 页面加载进度条
- JavaScript页面加载进度条
- vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
- vue组件(全局,局部,动态加载组件)
- vue 动态加载tab选项卡组件
- js页面加载进度条
- [转]页面加载时,显示页面加载的进度
- 页面加载进度条
- VUE页面加载闪现代码
- vue如何在页面加载时不让显示花括号{{}}
- 简单的页面加载进度条
- vue实现图片加载完成前的loading组件方法
- require异步加载vue组件可能导致的问题
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载