vue自定义指令触底加载
在Vue中,可以通过自定义指令来处理页面的底部加载。
首先,我们需要创建一个全局的自定义指令对象,并将其注册到Vue实例上。下面是示例代码:
// 滚动加载更多
Vue.directive('loadmore', {inserted (el, cb) {if (el.nodeType !== 1 || !cb) returnconst LOADMORE_DOM = el.querySelector('.v-loadmore')if(!LOADMORE_DOM) returnlet 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()}}
})