页面加载进度条最初我是在 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 页面加载进度条组件实例就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
来源: http://www.jb51.net/article/134405.htm