feat: 🎸 优化了滚动加载

This commit is contained in:
2025-08-21 00:10:13 +08:00
parent a493f2773c
commit 62bcb403f9
4 changed files with 33 additions and 3 deletions

View File

@@ -3,10 +3,25 @@
width: 100%;
}
.no-more-data {
.empty-data {
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
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;
}

View File

@@ -1,5 +1,6 @@
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 = ({
loadMore,
@@ -7,6 +8,7 @@ const InfiniteScroll = ({
children,
threshold = 50,
className = "",
empty = false,
}) => {
const containerRef = useRef(null);
const [loading, setLoading] = useState(false);
@@ -46,7 +48,17 @@ const InfiniteScroll = ({
className={`infinite-scroll-container ${className}`}
>
{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>
);
};

View File

@@ -105,6 +105,7 @@ const CompanyJobsPage = () => {
<InfiniteScroll
loadMore={fetchInterviewsData}
hasMore={interviewsHasMore}
empty={interviews.length === 0}
className="company-jobs-page-interview-list"
>
{interviews.map((item) => (

View File

@@ -42,6 +42,7 @@ const ProjectLibrary = () => {
page: pageNum ?? page,
pageSize: PAGE_SIZE,
});
console.log(res);
if (res.success) {
setProjectList((prevList) => {
const newList = [...prevList, ...res.data];
@@ -72,6 +73,7 @@ const ProjectLibrary = () => {
loadMore={fetchProjects}
hasMore={hasMore}
threshold={100}
empty={projectList.length === 0}
className="user-portfolio-list"
>
{projectList.map((item) => (