Vue implémente la barre de progression du chargement des pages

Cette fois, je vais vous apporter la barre de progression de Vue pour implémenter le chargement des pages. Quelles sont les notes pour implémenter Vue pour implémenter la barre de progression du chargement des pages. cas. Jetons un coup d'oeil.

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. Elle peut empêcher les utilisateurs de regarder une page complètement vide lors du chargement de la page, améliorant ainsi l'expérience utilisateur. Mais du point de vue du développement, il est vraiment difficile de saisir l'authenticité de ce type de barre de progression, car nous ne pouvons pas compter la progression jusqu'à ce que le code logique soit chargé, et la progression du code logique lui-même ne peut pas être comptée. 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 pour qu'elle soit complètement chargée et si la page vierge n'a pas été complètement chargée ou est vierge après le 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

// 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>

Lecture recommandée :

vue modifie le statut de l'élément actuellement sélectionné

Comment vue+checkbox opère la liaison, l'acquisition et le calcul des données

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!