vue自定义指令触底加载

119 阅读1分钟
// 滚动加载更多
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()
    }
  }
})