Vue implementiert den Fortschrittsbalken beim Laden der Seite

Dieses Mal bringe ich Ihnen den Fortschrittsbalken von Vue zum Implementieren des Seitenladens. Was sind die Hinweise zum Implementieren des Seitenlade-Fortschrittsbalkens? Fall. Werfen wir einen Blick darauf.

Ich habe den Fortschrittsbalken beim Laden der Seite zuerst auf YouTube gesehen, und später ist er auf fast allen großen Websites zu sehen. Er kann verhindern, dass Benutzer beim Laden der Seite auf eine völlig leere Seite starren, was das Benutzererlebnis verbessert Aus Entwicklungssicht ist es jedoch wirklich schwierig, die Authentizität dieser Art von Fortschrittsbalken zu erfassen, da wir den Fortschritt nicht zählen können, bis der Logikcode geladen ist, und der Fortschritt des Logikcodes selbst nicht gezählt werden kann. Darüber hinaus ist es uns unmöglich, die Auslastung aller Ressourcen zu überwachen.

Tatsächlich ist es den Benutzern egal, wie viel Prozent Ihrer Seite geladen ist. Was sie wirklich interessiert, ist, wie lange es dauert, bis sie vollständig geladen ist, und ob die leere Seite nicht vollständig geladen wurde oder nach dem Laden leer ist. Wir müssen also keinen Fortschrittsbalken „simulieren“, sondern einen gefälschten Animationseffekt verwenden, um das Laden zu simulieren, bevor die Back-End-Daten zurückgegeben werden, und den Fortschrittsbalken lesen und nach der Rückgabe der Daten ausblenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

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

Empfohlene Lektüre:

vue ändert den Status des aktuell ausgewählten Elements

Wie vue+checkbox die Datenbindung, Erfassung und Berechnung durchführt

Das obige ist der detaillierte Inhalt vonVue implementiert den Fortschrittsbalken beim Laden der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!