解决Vue项目首页Better-Scroll滚动区域的小问题

已知：better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定的。
问题描述：

• scrollHeight属性是根据放better-scroll的content中的子组件的高度计算的。
• 但是在better-scroll会计算页面的高度，这时候如果页面中的图片还没加载完成则会出现计算的高度与实际不相符
• 后来图片加载进来后有了新的高度，但是scrollHeight并没有进行更新。
• 所以滚动出现问题

解决思路：

• 用@load监听图片的加载，加载一张图片则调用refresh() 方法刷新一下better-scroll使之重新计算需要滚动的页面高度，监听图片两种方法：1.原生的js监听图片：img.onload = function() {}; 2.Vue中监听img元素：@load = ‘方法’

• -但是呢，如何让首页知道这个监听图片加载的行为呢？非父子组件发送自定义对象也不太方便，这时候用到一个事件总线的东西，vue可以作为事件总线，事件总线可以监听事件的变化，

  第一步：在main.js中的Vue的原型上定义:Vue.propotype.$bus = new Vue()

  第二步：发送事件总线：this.$bus.$emit(‘事件’，参数)

  第三步：接收事件总线： this.$bus.$on(‘事件’，回调函数(参数))

但是，加载一张图片就刷新一次，这样频繁地刷新也不好，会造成性能浪费，这时候需要给refresh方法加一个防抖动的方法。

【问题解决…】