58 lines
1.5 KiB
React
58 lines
1.5 KiB
React
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import { Empty } from "@arco-design/web-react";
|
||
|
|
import { useSelector } from "react-redux";
|
||
|
|
import { useDispatch } from "react-redux";
|
||
|
|
import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";
|
||
|
|
|
||
|
|
const InfiniteScroll = ({
|
||
|
|
loadMore,
|
||
|
|
hasMore,
|
||
|
|
children,
|
||
|
|
threshold = 50,
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const containerRef = useRef(null);
|
||
|
|
const loading = useSelector((state) => state.loading.value);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleScroll = () => {
|
||
|
|
if (!containerRef.current || loading || !hasMore) return;
|
||
|
|
|
||
|
|
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
|
||
|
|
|
||
|
|
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
||
|
|
dispatch(setLoadingTrue());
|
||
|
|
loadMore().finally(() => {
|
||
|
|
dispatch(setLoadingFalse());
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const container = containerRef.current;
|
||
|
|
if (container) {
|
||
|
|
container.addEventListener("scroll", handleScroll);
|
||
|
|
// 初始加载时检查是否需要加载更多
|
||
|
|
handleScroll();
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (container) {
|
||
|
|
container.removeEventListener("scroll", handleScroll);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, [loadMore, hasMore, threshold, loading]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={containerRef}
|
||
|
|
className={`infinite-scroll-container ${className}`}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
{!hasMore && !loading && <Empty description="没有更多了" />}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InfiniteScroll;
|