vue 页面加载进度条组件实例
栏目: 编程语言 · JavaScript · 发布时间: 6年前
内容简介:下面小编就为大家分享一篇vue 页面加载进度条组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
页面加载进度条最初我是在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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- [UI组件] 来做一个可配置的滑块进度条吧
- Android - 条纹进度条实现,调整view宽度仿进度条
- 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题
- iOS- 音频进度条
- imchenwen进度:优化
- golang 进度条功能实现
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。