实例
import { useEffect, useRef } from \’react\’;
import { Spin } from \’antd\’;
import type { FsFC } from \’./types\’;
import \’./index.less\’;
type LoadMoreProps = {
root?: Element | null; // 跟哪个元素重叠不传默认则是 整个浏览器窗口,一般是父元素
isLoading: boolean; // 用来判断如果 没有在请求列表才回执行
more: () => void;
};
const LoadMore: FsFC<LoadMoreProps> = ({ root = null, isLoading, more }) => {
const loadMoreRef = useRef(null);
/** 建立加载更多观察者 */
const loadMoreOb = () => {
if (!loadMoreRef.current) {
return;
}
const ob = new IntersectionObserver(
(entries) => {
const [entry] = entries;
// 有重叠，并且没有在请求
if (entry.isIntersecting && !isLoading) {
more();
}
},
{
root,
threshold: 1,
},
);
ob.observe(loadMoreRef.current);
};
useEffect(() => {
loadMoreOb();
}, []);
return (
<div className=\”load-more\” ref={loadMoreRef}>
<Spin />
</div>
);
};
export default LoadMore;
文中注释已对代码进行详解说明，以上就是IntersectionObserver实现加载更多组件demo的详细内容，更多关于IntersectionObserver加载组件的资料请关注悠久资源网其它相关文章！
您可能感兴趣的文章:
- 面试判断元素是否在可视区域中IntersectionObserver详解
- 可视化埋点平台元素曝光采集intersectionObserver思路实践
- 交叉观察器 IntersectionObserver用法详解
- IntersectionObserver判断是否在可视区域详解
