feat: 🎸 更新了一部分接口请求信息
This commit is contained in:
@@ -1,8 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Empty } from "@arco-design/web-react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setLoadingFalse } from "@/store/slices/loadingSlice";
|
||||
|
||||
const InfiniteScroll = ({
|
||||
loadMore,
|
||||
@@ -11,21 +8,18 @@ const InfiniteScroll = ({
|
||||
threshold = 50,
|
||||
className = "",
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const containerRef = useRef(null);
|
||||
const globalLoading = useSelector((state) => state.loading.value);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
if (!containerRef.current || globalLoading || !hasMore) return;
|
||||
if (!containerRef.current || !hasMore) return;
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
|
||||
|
||||
if (scrollTop + clientHeight >= scrollHeight - threshold) {
|
||||
loadMore().finally(() => {
|
||||
dispatch(setLoadingFalse());
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
@@ -44,7 +38,7 @@ const InfiniteScroll = ({
|
||||
container.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
};
|
||||
}, [loadMore, hasMore, threshold, globalLoading]);
|
||||
}, [loadMore, hasMore, threshold]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -52,7 +46,7 @@ const InfiniteScroll = ({
|
||||
className={`infinite-scroll-container ${className}`}
|
||||
>
|
||||
{children}
|
||||
{!hasMore && !globalLoading && <Empty description="没有更多了" />}
|
||||
{!hasMore && !loading && <Empty description="没有更多了" />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user