vue 頁面載入進度條組件執行個體，vue進度條組件執行個體

vue 頁面載入進度條組件執行個體，vue進度條組件執行個體

頁面載入進度條最初我是在youtube上看到的，後面幾乎在各大網站上都能見到它的身影，可以讓使用者在載入頁面的時候不會對著完全空白的頁面發獃，提升使用者體驗

但是從開發角度講，這種進度條在真實性上確實很難把握，因為在邏輯代碼載入完成之前，我們都不能統計到進度，而邏輯代碼自身的進度也無法統計。另外，我們不可能監控到所有資源的載入情況。

事實上，使用者並不是在乎你的頁面究竟載入了百分之幾，而真正關心的是離載入完還有多久，以及這個空白頁面是沒有載入完，還是載入完就是空白的。所以沒我們需要去“類比”一個進度條，在後端資料返回前利用一個假的動畫效果類比載入，在資料返回後讀完進度條並且隱藏。

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

以上這篇vue 頁面載入進度條組件執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。