vue 自定义指令 触底加载

vue 自定义指令 触底加载

Vue.directive('infinite-scroll', {
  bind: function (el, binding) {
    const callback = binding.value;
    el.addEventListener('scroll', e => binding.def.scroll(e, callback));
  },
  scroll: function (e, callback) {
    const targetDom = e.target;
    const innerDom = targetDom.children[0];
    if ((targetDom.scrollTop + targetDom.clientHeight >= innerDom.clientHeight)) {
      callback && callback();
    }
  },
  unbind: function (el, binding) {
    const callback = binding.value;
    el.removeEventListener('scroll', e => binding.def.scroll(e, callback));
  }
})