上拉加载更多后台数据_VUE指令：无限上拉加载更多插件

前言

无限上拉加载更多，在很多场景都有使用，无论是PC还是移动端，尤其是移动端，都应用非常广泛，比如掘金、头条等。 都知道，无论是下拉，亦或是上拉，都是基于滚动条的位置而言的，如果滚动条触底，表示需要加载更多了，而触顶，再次下拉，表示刷新。看个简单的代码示例：

let list = []let pageSize = 10let pageNo = 1// 刷新function refresh(){ list = [] pageNo = 1; loadMore()}// 加载更多function loadMore(){ for(let i = (pageNo - 1) * 10 + 1; i <= pageNo * pageSize; i++) { list.push(i) } pageNo++ console.log(list)}loadMore()// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]loadMore()// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]...refresh()// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

这里简单模拟了一个分页，pageNo当前页码，pageSize每页大小。下面我们来具体实现vue如何通过指令来完成无限上拉加载更多功能的。

InfiniteScroll.js

v-infinite-scroll指令，主要来监听添加指令元素的滚动事件，根据条件，来执行加载更多事件

export default { bind(el, binding) { let target = el; if (el.getAttribute('data-scrollTarget')) { target = el.querySelector(el.getAttribute('data-scrollTarget')); } target.addEventListener('scroll', e => { const busy = el.getAttribute('data-infiniteScrollDisabled') ? false : true; const distance = el.getAttribute('data-infiniteScrollDistance') ? Number.parseInt(el.getAttribute('data-infiniteScrollDistance'), 10) : 100; if (!busy && e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight) < distance) { el.setAttribute('data-infiniteScrollDisabled', true); binding.value(e); } }); },};

InfiniteScrollDisabled.js

v-infinite-scroll-disabled指令，用来控制是否可以加载更多，比如正在加载，此时就不需要重复执行了

export default { bind(el, binding) { el.setAttribute('data-infiniteScrollDisabled', binding.value); }, update(el, binding) { el.setAttribute('data-infiniteScrollDisabled', binding.value); },};

InfiniteScrollDistance.js

v-infinite-scroll-distance指令，用来控制满足触底距离，不一定非得完全触底才加载更多，比如距离底部还有10px，就可以加载更多了

export default { bind(el, binding) { el.setAttribute('data-infiniteScrollDistance', binding.value); }, update(el, binding) { el.setAttribute('data-infiniteScrollDistance', binding.value); },};

挂载指令index.js

import InfiniteScroll from './InfiniteScroll';import InfiniteScrollDisabled from './InfiniteScrollDisabled';import InfiniteScrollDistance from './InfiniteScrollDistance';export default { install(Vue, options) { const directives = { InfiniteScroll, InfiniteScrollDisabled, InfiniteScrollDistance }; Object.keys(directives).forEach(key => { directives[key].$options = options; Vue.directive(key, directives[key]); }); },};

指令使用

切记：添加指令的元素一定要有滚动条，没有滚动条，一切都是扯淡

这样就简单的实现了，vue无限下拉加载更多插件。当然，你还可以对齐进行美化，加载更多时，可以添加loading样式。比如：

loading...