diff --git a/src/components/InfiniteScroll/index.css b/src/components/InfiniteScroll/index.css index 6f0dbcb..16317b4 100644 --- a/src/components/InfiniteScroll/index.css +++ b/src/components/InfiniteScroll/index.css @@ -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; +} diff --git a/src/components/InfiniteScroll/index.jsx b/src/components/InfiniteScroll/index.jsx index f718c1f..ac53dd3 100644 --- a/src/components/InfiniteScroll/index.jsx +++ b/src/components/InfiniteScroll/index.jsx @@ -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 && } + + {!hasMore && empty && ( + + )} + {/* 滚动加载指示器 */} + {loading && hasMore && ( +
+ + 加载中... +
+ )} ); }; diff --git a/src/pages/CompanyJobsPage/index.jsx b/src/pages/CompanyJobsPage/index.jsx index f1f93aa..9da91e2 100644 --- a/src/pages/CompanyJobsPage/index.jsx +++ b/src/pages/CompanyJobsPage/index.jsx @@ -105,6 +105,7 @@ const CompanyJobsPage = () => { {interviews.map((item) => ( diff --git a/src/pages/ProjectLibraryPage/index.jsx b/src/pages/ProjectLibraryPage/index.jsx index a33c54c..f89c515 100644 --- a/src/pages/ProjectLibraryPage/index.jsx +++ b/src/pages/ProjectLibraryPage/index.jsx @@ -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) => (