201203-4-2

---

七. 解决首页better-scroll可滚动区域的问题：
better-scroll在决定有多少区域可以滚动时候，是根据scrollHeight属性决定的。

1. scrollHeight属性是根据better-scroll的content的子组件的高度
2. 但是在我们的首页中，刚开始在计算scrollHeight属性的时候，是没有将图片计算在内的
3. 所以计算出来的结果是错误的。
4. 后来图片加载过来之后有了新的高度，但是scrollHeight属性并没有进行更新，所以滚动出现了问题。
5. 那么如何解决这个问题呢？
   ** 监听每一张图片是否加载完成，只要有一张图片加载完成了，执行一次refresh();
   ** 如何监听图片记载完成了？
   ** 原生js监听图片：img.onload = function(){}
   ** vue中监听：@load=“方法”
   ** 调用scroll的refresh();
   ** 非父子组件的通信。
   如何将GoodsListItem.vue中的事件传入到Home.vue中
   ** 因为涉及到非父子组件的通信，所以我们这里选择了事件总线
   ** bus->总线
   ** Vue.prototype.$bus=newVue();\ast \ast this.$bus.emit(‘事件名称’,参数);
   ** this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …片的加载完成 this.bus.KaTeX parse error: Expected '}', got 'EOF' at end of input: …-'); this.refs.scroll.scroll.refresh();
   })
   },
   mounted: 最早拿到组件（操作DOM）;

一个输入框：输入一个字母，

非父子组件通信;