Skip to content

Commit 8f23545

Browse files
committed
feat: 优化PaginatedRow组件的翻页逻辑,确保向前翻页不超出范围并支持无限循环翻页
1 parent 62f70a9 commit 8f23545

File tree

1 file changed

+28
-20
lines changed

1 file changed

+28
-20
lines changed

src/components/PaginatedRow.tsx

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,15 @@ export default function PaginatedRow({
3232
}
3333
}, [children, startIndex, itemsPerPage]);
3434

35-
// 向前翻页 - 只有不在第一页时才能向前
35+
// 向前翻页 - 禁止超出第一页
3636
const handlePrevPage = () => {
37-
if (startIndex > 0) {
38-
setStartIndex((prev) => Math.max(0, prev - itemsPerPage));
39-
}
37+
setStartIndex((prev) => {
38+
const newIndex = prev - itemsPerPage;
39+
return newIndex < 0 ? 0 : newIndex; // 不允许小于0
40+
});
4041
};
4142

42-
// 向后翻页 - 支持无限浏览,到达末尾时循环到开头
43+
// 向后翻页 - 真正的无限浏览
4344
const handleNextPage = () => {
4445
setStartIndex((prev) => {
4546
const newIndex = prev + itemsPerPage;
@@ -50,7 +51,10 @@ export default function PaginatedRow({
5051

5152
// 检查是否可以向前翻页
5253
const canGoPrev = startIndex > 0;
53-
// 检查是否需要显示翻页按钮
54+
// 总是可以向后翻页(无限循环)
55+
const canGoNext = children.length > itemsPerPage;
56+
57+
// 如果没有足够的内容需要分页,就不显示按钮
5458
const needsPagination = children.length > itemsPerPage;
5559

5660
return (
@@ -84,23 +88,27 @@ export default function PaginatedRow({
8488
</button>
8589
)}
8690

87-
{/* 右箭头按钮 - 始终显示 */}
88-
<button
89-
onClick={handleNextPage}
90-
className={`absolute -right-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
91-
isHovered ? 'opacity-100' : 'opacity-0'
92-
}`}
93-
style={{
94-
// 确保按钮在两行中间
95-
top: 'calc(50% - 20px)',
96-
}}
97-
aria-label='下一页'
98-
>
99-
<ChevronRight className='w-5 h-5 text-white' />
100-
</button>
91+
{/* 右箭头按钮 - 总是显示,支持无限循环 */}
92+
{canGoNext && (
93+
<button
94+
onClick={handleNextPage}
95+
className={`absolute -right-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
96+
isHovered ? 'opacity-100' : 'opacity-0'
97+
}`}
98+
style={{
99+
// 确保按钮在两行中间
100+
top: 'calc(50% - 20px)',
101+
}}
102+
aria-label='下一页'
103+
>
104+
<ChevronRight className='w-5 h-5 text-white' />
105+
</button>
106+
)}
101107
</>
102108
)}
103109
</div>
110+
111+
{/* 移除页码指示器 - 不再需要 */}
104112
</div>
105113
);
106114
}

0 commit comments

Comments
 (0)