feat: 🎸 优化了滚动加载
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -105,6 +105,7 @@ const CompanyJobsPage = () => {
|
||||
<InfiniteScroll
|
||||
loadMore={fetchInterviewsData}
|
||||
hasMore={interviewsHasMore}
|
||||
empty={interviews.length === 0}
|
||||
className="company-jobs-page-interview-list"
|
||||
>
|
||||
{interviews.map((item) => (
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
Reference in New Issue
Block a user