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

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

核心代码

import Vue from 'vue'// v-scrollVue.directive('scroll', {bind(el, binding, vnode) {// console.log('bind')// 此处为了简单，直接判断触底了function handleScroll(e) {let isBottom =e.target.clientHeight + e.target.scrollTop == e.target.scrollHeightif (isBottom && !vnode.context.loading) {binding.value()}}// 监听滚动el.__handleScroll__ = handleScrollel.addEventListener('scroll', handleScroll, false)},unbind(el, binding, vnode) {console.log('unbind')// 解除事件监听el.removeEventListener('scroll', el.__handleScroll__, false)},})

代码可进一步优化

参考

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