自定义滚动指令加载下一页数据

因为项目在页面请求数据时，是先加载15条，然后往下滚动再加载15条的

<div class="db-main-box" v-scrollfix="getScrollMore"> //自定义一个滚动指令
  <div class="db-subnav" @click="setFilter">
   <i class="cs-zuixin"></i>
   <span>最新文章</span>
  </div>
</div>

加载小于三页时，触发自动加载事件

getScrollMore (fetch, top) {
   if (fetch && this.params.pageNum < 3) this.getMore()
}
getMore () {
   this.params.pageNum++
   this.fetchData()
}

自定义scrollfix事件：
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性
1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度

2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度
3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）
4）scrollHeight与offsetHeight的区别？
   offsetHeight即是自身的高度，scrollHeight是自身的高度+隐藏元素的高度（即是内层元素的offsetHeight）
5）offsetTop：为容器相对于document的top的绝对偏移—→等于top+margin-top
同理offsetLeft：容器相对于document的left的绝对偏移—→等于left+margin-left
6）clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width
7）scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight，是正常的滚动距离，否则就是滚动过头了。

Vue.directive('scrollfix', {
  inserted (el, cb) {
    // 不是元素节点 || 未设置回调函数
    if (el.nodeType !== 1 || !cb) return
    let direct = 'down'
    let rollHeight = 0 
    let scrollDisable = false
    let getScrollEventTarget = (target) => {
      while (target.nodeType === 1 && target.tagName !== 'BODY' && el.tagName !== 'HTML') {
        var overflowY = getComputedStyle(target).overflowY //获取元素节点的overflow-Y属性
        if (overflowY === 'scroll' || overflowY === 'auto') {
          return target
        }
        target = target.parentNode  //元素节点的父节点
      }
      return window
    }
    let targetNode = getScrollEventTarget(el)
    let scrollListener = () => {
      direct = targetNode.scrollTop > rollHeight ? 'down' : 'up' //网页被卷去的高度如果大于0，就是向下，否则就是向上
      rollHeight = targetNode.scrollTop //将网页被卷去的高度赋值给rollHeight
      if (targetNode.clientHeight + targetNode.scrollTop >= targetNode.scrollHeight - 500) {
       //元素可视区域高度加上被卷去的高度如果大于等于自身的高度+隐藏元素的高度-500，scrollDisable就为true，这里需要注意的是，如果页面太长，会导致加载时出现一段时间的空白
        if (!scrollDisable) {
          cb.value(!scrollDisable, rollHeight, direct)
        }
        scrollDisable = true
      } else {
        scrollDisable = false
        cb.value(scrollDisable, rollHeight, direct)
      }
    }
    el.unbindEventListener = () => {
      targetNode.removeEventListener('scroll', scrollListener) //解绑事件解决内存泄漏问题
    }
    targetNode.addEventListener('scroll', scrollListener)
  },
  unbind (el) {
    if (el.unbindEventListener) el.unbindEventListener()
  }
})

如果忘记注释unbind方法，就会导致出现内存泄漏，给元素绑定的scroll方法，会一直存在内存里，比如我进了页面滚动到第3页，出去，再点一个页面，当滚动到第4页时，将会请求2次，一次是上个页面的第4页，一次是本次页面的第4页，当你退出，再进一个页面，当滚动到第5页时，将会请求3次（上上页，上页和本页），这就是典型的事件未解绑导致的内存泄漏。
所以需要给元素解绑，好在vue指令提供了unbind钩子函数，但是这里依然有个技术巧点就是：
1、我们scroll的元素可能是绑定的元素的父级等等，需要一层一层往上找
2、就是解绑的时候我们也需要找到那个父级元素等等，然后还需要remove对应的方法，那么肯定不可能在unbind里再写一次，所以就可以在insert钩子函数里，给el绑定一个解绑事件el.unbindEventListener，在unbind钩子函数里直接调用即可。