js：Vue.js自定义指令实现scroll下滑滚动翻页

Vue.js自定义指令实现scroll下滑滚动翻页

核心代码

import Vue from 'vue'

// v-scroll
Vue.directive('scroll', {
  bind(el, binding, vnode) {
    // console.log('bind')

    // 此处为了简单，直接判断触底了
    function handleScroll(e) {
      let isBottom =
        e.target.clientHeight + e.target.scrollTop == e.target.scrollHeight
      
      if (isBottom && !vnode.context.loading) {
        binding.value()
      }
    }

    // 监听滚动
    el.__handleScroll__ = handleScroll
    el.addEventListener('scroll', handleScroll, false)
  },

  unbind(el, binding, vnode) {
    console.log('unbind')
    // 解除事件监听
    el.removeEventListener('scroll', el.__handleScroll__, false)
  },
})

代码可进一步优化

参考 vue对el-autocomplete二次封装增加下拉分页