Vue implements the progress bar of page loading

This time I will bring you the progress bar of vue to implement page loading. What are the notes of vue to implement page loading progress bar? The following is a practical case. Let’s take a look. .

I first saw the page loading progress bar on YouTube, and later it can be seen on almost all major websites. It can prevent users from staring at a completely blank page when loading the page, improving the user experience.

But from a development perspective, it is really difficult to grasp the authenticity of this kind of progress bar, because we cannot count the progress until the logic code is loaded, and the progress of the logic code itself cannot be counted. In addition, it is impossible for us to monitor the loading of all resources.

In fact, users don't care what percentage of your page is loaded, but what they really care about is how long it is until it is fully loaded, and whether the blank page has not been fully loaded or is blank after loading. So we don't need to "simulate" a progress bar, use a fake animation effect to simulate loading before the back-end data is returned, and read the progress bar and hide it after the data is returned.

// progress-bar.vue
<template>
 <transition name="fade">
 <p class="progress-bar" v-if="isShow">
 </p>
 </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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue changes the status of the currently selected item

##How vue checkbox operates data binding, acquisition and calculation

The above is the detailed content of Vue implements the progress bar of page loading. For more information, please follow other related articles on the PHP Chinese website!