vue 自定义指令
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind:只调用一次,指令与元素解绑时调用。 import Vue from 'vue' export default Vue.directive('table-scroll', { bind(el, binding) { let SCROLL_DOM = null // 获取滚动页面DOM const timer = setInterval(() => { SCROLL_DOM = el.querySelector(binding.value.select) if (SCROLL_DOM) { clearInterval(timer) let scrollPosition = 0 SCROLL_DOM.addEventListener('scroll', (e) => { // 当前的滚动位置 减去 上一次的滚动位置 // 如果为false则代表向上滚动,true代表向下滚动 const _this = e.target const flagToDirection = _this.scrollTop - scrollPosition > 0 // 记录当前的滚动位置 scrollPosition = _this.scrollTop // 记录滚动位置距离底部的位置 const scrollBottom = _this.scrollHeight - _this.scrollTop <= _this.clientHeight // 如果已达到指定位置则触发 if (scrollBottom) { // 将滚动行为告诉组件 setTimeout(() => { binding.value.callback(flagToDirection) }, 100) } }) } }, 500) } })