Comment implémenter le composant de barre de progression de chargement de page dans vue

Maintenant, je vais partager avec vous un exemple du composant de barre de progression de chargement de la page vue, qui a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

J'ai vu pour la première fois la barre de progression du chargement de la page sur YouTube, et plus tard, elle peut être vue sur presque tous les principaux sites Web, afin que les utilisateurs ne soient pas confrontés à une page complètement vierge lors du chargement de la page. pour améliorer l'expérience utilisateur

Mais d'un point de vue développement, il est vraiment difficile de saisir l'authenticité de ce genre de barre de progression, car on ne peut pas compter la progression avant le chargement du code logique, et le code logique lui-même Les progrès ne peuvent pas être comptés. De plus, il nous est impossible de surveiller le chargement de toutes les ressources.

En fait, les utilisateurs ne se soucient pas du pourcentage de votre page qui est chargé, mais ce qui les intéresse vraiment, c'est le temps qu'il faut avant qu'elle soit complètement chargée, et si la page vierge n'a pas été complètement chargée ou est vide après son chargement. Nous n'avons donc pas besoin de "simuler" une barre de progression, d'utiliser un faux effet d'animation pour simuler le chargement avant le retour des données back-end, de lire la barre de progression et de la masquer après le retour des données.

// 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 + &#39;%&#39;
  // 父组件数据加载完前进度条最多到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 + &#39;%&#39;
   // 加载到百分百完成
   if (val >= 100) {
   // 关闭定时器
   clearInterval(timer)
   // 加载完成关闭进度条
   this.isShow = false
   // 加载完成的回调
   this.$emit(&#39;callback&#39;, &#39;load success&#39;)
   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>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter les appels entre méthodes dans vue

Comment vux implémente la fonction d'actualisation pull-up

Comment implémenter un carrousel d'images avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!