解决首页中Better-Scroll可滚动区域的问题(事件总线+防抖操作)

问题的产生

Better-Scroll在决定有多少区域可以滚动时，是根据scrollHeight属性决定的。
scrollHeight属性是根据放在Better-Scroll的content中的子组件的高度
但是我们的首页中，刚开始在计算scrollHeight属性时，是没有将图片计算在内的。所以，计算出来的结果是错误的。
后来图片加载出来之后有了新的高度，但是scrollHeight属性并没有进行更新。所以滚动出现了问题。

如何解决这个问题？

监听每一张图片是否加载完成，只要有一张图片加载完成了，执行一次refresh()

如何监听图片加载完成？

• 原生的js监听图片：img.onload = function() {}
• Vue中监听：@load = ‘方法’

之后，调用scroll的refresh()
如何将GoodsListItem.vue中的事件传入到Home.vue中？

方法一：可以通过GoodsList一层层通信到home，但是有点繁琐。
方法二：使用Vuex,当图片加载完毕，就改变Vuex中的某一个属性，再让首页引用这Vuex的属性，并且实时监听Vuex中属性的改变。

方法三：因为涉及到非父子组件的通信，我们这里选择使用事件总线

代码展示

//首先解决没有$bus问题，在main.js中利用原型添加
Vue.prototype.$bus = new