vue 无限滚动加载指令

POOPE

Vue.directive('scroll', {
  // 当被绑定的元素插入到 DOM 中时……
  bind: function(el, binding, vnode) {
    el.style.overflow = 'auto'
    let distance = 10;
    let _this = this;
    let busy = el.getAttribute("busy");
    let goOn = false;
    if (busy) {
      vnode.context.$watch(busy, function(value) {
        goOn = value;
      });
    }
    el.addEventListener("scroll", function() {
      var scrollTop = el.scrollTop;
      var viewHeight = el.offsetHeight;
      var innerHeight = 0
      el.children.forEach((item) => {
        innerHeight += item.offsetHeight
      })
      if (innerHeight - (scrollTop + viewHeight) <= distance) {
        if (goOn) {
          binding.value.call(_this)
          goOn = false
        }
      }
    }, false)
  }
})