共计 754 个字符,预计需要花费 2 分钟才能阅读完成。
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;
本文参加了 SegmentFault 思否写作挑战「摸索编码世界之旅 – 记我的第一份编程工作」,欢送正在浏览的你也退出。
正文完
发表至: typescript
2023-07-11