feat: 🎸 优化了滚动加载
This commit is contained in:
@@ -3,10 +3,25 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-more-data {
|
.empty-data {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
/* 新增加载中样式 */
|
||||||
|
.loading-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-text {
|
||||||
|
margin-left: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { Empty } from "@arco-design/web-react";
|
import { Empty, Spin } from "@arco-design/web-react";
|
||||||
|
import "./index.css";
|
||||||
|
|
||||||
const InfiniteScroll = ({
|
const InfiniteScroll = ({
|
||||||
loadMore,
|
loadMore,
|
||||||
@@ -7,6 +8,7 @@ const InfiniteScroll = ({
|
|||||||
children,
|
children,
|
||||||
threshold = 50,
|
threshold = 50,
|
||||||
className = "",
|
className = "",
|
||||||
|
empty = false,
|
||||||
}) => {
|
}) => {
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -46,7 +48,17 @@ const InfiniteScroll = ({
|
|||||||
className={`infinite-scroll-container ${className}`}
|
className={`infinite-scroll-container ${className}`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
{!hasMore && !loading && <Empty description="没有更多了" />}
|
|
||||||
|
{!hasMore && empty && (
|
||||||
|
<Empty description="暂无数据" className="empty-data" />
|
||||||
|
)}
|
||||||
|
{/* 滚动加载指示器 */}
|
||||||
|
{loading && hasMore && (
|
||||||
|
<div className="loading-container">
|
||||||
|
<Spin size="small" />
|
||||||
|
<span className="loading-text">加载中...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -105,6 +105,7 @@ const CompanyJobsPage = () => {
|
|||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
loadMore={fetchInterviewsData}
|
loadMore={fetchInterviewsData}
|
||||||
hasMore={interviewsHasMore}
|
hasMore={interviewsHasMore}
|
||||||
|
empty={interviews.length === 0}
|
||||||
className="company-jobs-page-interview-list"
|
className="company-jobs-page-interview-list"
|
||||||
>
|
>
|
||||||
{interviews.map((item) => (
|
{interviews.map((item) => (
|
||||||
|
|||||||
@@ -42,6 +42,7 @@ const ProjectLibrary = () => {
|
|||||||
page: pageNum ?? page,
|
page: pageNum ?? page,
|
||||||
pageSize: PAGE_SIZE,
|
pageSize: PAGE_SIZE,
|
||||||
});
|
});
|
||||||
|
console.log(res);
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
setProjectList((prevList) => {
|
setProjectList((prevList) => {
|
||||||
const newList = [...prevList, ...res.data];
|
const newList = [...prevList, ...res.data];
|
||||||
@@ -72,6 +73,7 @@ const ProjectLibrary = () => {
|
|||||||
loadMore={fetchProjects}
|
loadMore={fetchProjects}
|
||||||
hasMore={hasMore}
|
hasMore={hasMore}
|
||||||
threshold={100}
|
threshold={100}
|
||||||
|
empty={projectList.length === 0}
|
||||||
className="user-portfolio-list"
|
className="user-portfolio-list"
|
||||||
>
|
>
|
||||||
{projectList.map((item) => (
|
{projectList.map((item) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user