前言
![cd4be076a0a19dc89aa35be14ebea02a.png](https://i-blog.csdnimg.cn/blog_migrate/aa12bcf8d0adcf6a2a5ce93de89bc65b.jpeg)
无限上拉加载更多,在很多场景都有使用,无论是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...