feat: 🎸 更新了一部分接口请求信息
This commit is contained in:
@@ -3,18 +3,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-more-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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