解決首頁中Better-scroll可滾動區域的問題

在首頁時候，使用BetterScroll插件的時候，滾動的時候經常會卡頓。Better-scroll在決定有多少區域可以滾動時，是根據ScrollerHeight屬性決定的。ScrollerHeight屬性時根據Better-Scroll的content中的子組件的高度。但是，剛開始在計算scrollerHeight屬性時，是沒有將圖片計算在內的。所以計算出來的高度是錯誤的，后來圖片加載進來的時候，即使出現了新的高度，但是ScrollerHeight屬性並沒有進行更新，才會滾動出現問題。

解決這個問題的話，我們只需要監聽每一張圖片是否加載完成，只要有一張圖片加載完成了，就執行一次refresh（）。來稍微解釋下refresh函數，其作用為，重新計算 better-scroll，當 DOM 結構發生變化的時候務必要調用確保滾動的效果正常。監聽圖片的加載完成的話，只需要在goodsitem中的img中，使用@load進行監聽。而goodsitem與home並不屬於父子組件關系。而如果在這里使用，vuex，又感覺過於雜糅，因此在這里使用了事件總線。

首先，先記錄下Vue事件總線的使用方法，現在main.js中創建$bus，這樣即可全局使用，那么我們在main.js中首先加入，如下一行代碼：

Vue.prototype.$bus= new Vue()

之后，在需要傳出的goodsitem中，對其img進行監聽，且使用事件總線傳出:

<template>
<div class="goodsitem">
  <img :src="goodsitem.show.img" @load="imageload">
</div>
</template>

<script>
export default {
name: "goodsitem",
methods:{
  imageload(){
    this.$bus.$emit("itemimageload")
  }
}
}
</script>

之后，在home.vue中添加如下代碼：

mounted() {
    //3.監聽item中圖片加載完成
    this.$bus.$on("itemimageload",()=>{
      console.log("-----");
this.$refs.scroll.refresh()
    })
  }

再在scroll.vue中的methods里面如下處理即可：

methods:{
    refresh(){
      // console.log("----1----");
      this.scroll.refresh()
    }
  }