解决首页中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()
    }
  }