P171-上拉加载更多的问题

方法一：（笨方法）

1.在scroll对象这里将监听注册上拉事件并把该事件发送出去

2.在Home 的scroll组件这里绑定上拉事件

 3. 

此时getHomeGoods()里面要加上 this.$refs.scroll.finishPullUp() 实现上拉加载功能，但是 上拉滚动区的Bug，所以在上拉加载的同时调用refresh()每一次上拉加载都要重新计算

方法二：（事件总线方法）

先来分析bug原因：

 解决首页中可滚动区域的问题

* Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定
  * scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度
  * 但是我们的首页中, 刚开始在计算scrollerHeight属性时, 是没有将图片计算在内的
  * 所以, 计算出来的告诉是错误的(1300+)
  * 后来图片加载进来之后有了新的高度, 但是scrollerHeight属性并没有进行更新.
  * 所以滚动出现了问题
* 如何解决这个问题了?
  * 监听每一张图片是否加载完成, 只要有一张图片加载完成了, 执行一次refresh()
  * 如何监听图片加载完成了?
    * 原生的js监听图片: img.onload = function() {}
    * Vue中监听: @load='方法'
  * 调用scroll的refresh()
* 如何将GoodsListItem.vue中的事件传入到Home.vue中
  * 因为涉及到非父子组件的通信, 所以这里我们选择了**事件总线**
    * bus ->总线
    * Vue.prototype.$bus = new Vue()
    * this.$bus.$emit('事件名称', 参数)
    * this.$bus.$on('事件名称', 回调函数(参数))

1. 用原型把$bus这个事件总线方法放到Vue实例里面-----main.js 2.在图片这里监听一个加载事件--GoodsListItem.vue

把这个监听事件传出去 

3.在create（）生命周期函数里面收到传出的事件--Home.vue 

但是在create（）里面调用$refs和document.querySelector都不行，很大可能为空（这里没问题可能是因为是一个回调函数）

所以最好放在mounted（）里面，并且这里最好这样写this.$refs.scroll &&this.$refs.scroll.refresh()--Home.vue

总结：问题一: refresh找不到的问题
  * 第一: 在Scroll.vue中, 调用this.scroll的方法之前, 判断this.scroll对象是否有值
  * 第二: 在mounted生命周期函数中使用 this.$refs.scroll而不是created中

 但是这种还是不太好，因为过于频繁调用refresf()。

总结：问题二: 对于refresh非常频繁的问题, 进行防抖操作
  * 防抖debounce/节流throttle(课下研究一下)----记住：面试要问
  * 防抖函数起作用的过程:
    * 如果我们直接执行refresh, 那么refresh函数会被执行30次.
    * 可以将refresh函数传入到debounce函数中, 生成一个新的函数.
    * 之后在调用非常频繁的时候, 就使用新生成的函数.
    * 而新生成的函数, 并不会非常频繁的调用, 如果下一次执行来的非常快, 那么会将上一次取消掉

 最好把防抖功能做一个封装  assets/common/utils.js

再在Home.vue中导入

再把这里的this.debounce改成debounce