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) }, })
代码可进一步优化
参考