So implementieren Sie die Fortschrittsbalkenkomponente für das Laden von Seiten in Vue

Jetzt werde ich Ihnen ein Beispiel für die Fortschrittsbalkenkomponente zum Laden von Vue-Seiten vorstellen, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich sein wird.

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, sodass Benutzer beim Laden der Seite nicht mit einer völlig leeren Seite konfrontiert werden um die Benutzererfahrung zu verbessern

Aber aus Entwicklungssicht ist es wirklich schwierig, die Authentizität dieser Art von Fortschrittsbalken zu erfassen, da wir den Fortschritt nicht zählen können, bevor der Logikcode geladen ist, und den Logikcode selbst Der Fortschritt kann nicht gezählt werden. Darüber hinaus ist es uns unmöglich, den Ladezustand aller Ressourcen zu überwachen.

Tatsächlich ist es den Benutzern egal, wie viel Prozent Ihrer Seite geladen ist, aber was sie wirklich interessiert, ist, wie lange es dauert, bis sie vollständig geladen ist, und ob die leere Seite noch nicht vollständig geladen ist oder nicht ist nach dem Laden leer. 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.

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Aufrufe zwischen Methoden in Vue

Wie Vux die Pull-up-Refresh-Funktion implementiert

So implementieren Sie ein Bildkarussell mit jQuery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Fortschrittsbalkenkomponente für das Laden von Seiten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!