vue自定义指令触底加载

vue自定义指令触底加载
在Vue中，可以通过自定义指令来处理页面的底部加载。

首先，我们需要创建一个全局的自定义指令对象，并将其注册到Vue实例上。下面是示例代码：

// 滚动加载更多
Vue.directive('loadmore', {
  inserted (el, cb) {
    if (el.nodeType !== 1 || !cb) return
    const LOADMORE_DOM = el.querySelector('.v-loadmore')
    if(!LOADMORE_DOM) return
    let scrollListener = () => {
      //临界值的判断滑动到底部就触发
      const condition = (LOADMORE_DOM.scrollHeight - LOADMORE_DOM.scrollTop) <= (LOADMORE_DOM.clientHeight + 1)  
      if (condition) {
        cb.value()
      }
    }
    el.unbindEventListener = () => {
      LOADMORE_DOM.removeEventListener('scroll', scrollListener)
    }
    LOADMORE_DOM.addEventListener('scroll', scrollListener)
  },
  unbind (el) {
    if (el.unbindEventListener) {
      el.unbindEventListener()
    }
  }
})