想必做前端的小伙伴在 H5
端开发都遇到过 「下拉加载更多」的需求,由于时间关系,以及兼容性考虑上,大家一定优先考虑的是开源的组件库,诸如 antd-mobile
等。
本期主要讲述下几个的实现思路,如有勘误,欢迎在「阅读原文」-> 「评论区」批评指正。
touchMove
事件;scrollHeight
scrollTop
clientHeight
scrollHeight - scrollTop - clientHeight <= limitHeight
,其中 limitHeight
为阈值图片来源于:https://javascript.info/size-and-scroll
IntersectionObserver
监听哨兵(这个哨兵可以作为滚动区域内的最后一个兜底元素或者隐藏的元素,或者边距元素);由于 方案一
的性能不太好,所以这里我仅介绍方案二,相对比较完美,另外对于低版本也可以引入 polyfill
做兼容。
代码实现
const watchSentry =async () => {
// 低版本浏览器兼容,引入 polyfill
if(!window.IntersectionObserver) {
await import('intersection-observer');
}
const el = document.getElementById('Sentry')
if (el) {
// 初始化观察者
const intersectionObserver = new IntersectionObserver(function (entries) {
// 如果没有更多元素了,这里就可以释放了
// some code
// intersectionObserver.unobserve();
// 判定元素交叉比例
if (entries[0].intersectionRatio <= 0) return
setLoading(true);
Promise.resolve()
.then(() => {
setTimeout(() => {
setData(pre => ([
...pre,
...getData()
]));
setLoading(false);
}, 800);
});
});
// 监听哨兵元素
intersectionObserver.observe(el);
}
}
其余的代码如有需要可在「阅读原文」-> 「留言区」留言奥~
文中我仅仅罗列了一个核心函数 watchSentry
,里面做了三件事:
优化的空间
当然,还有很多优化的空间:
react-window
或者 react-virtualized
,或者其它虚拟列表实现技术,进行大数据调优;loading
态的动画;IOS
的滚动兼容,可以考虑 iScroll
或者 better-scroll
进行调优;