diff --git a/src/components/PaginatedRow.tsx b/src/components/PaginatedRow.tsx index 133854b..0ccd590 100644 --- a/src/components/PaginatedRow.tsx +++ b/src/components/PaginatedRow.tsx @@ -32,15 +32,14 @@ export default function PaginatedRow({ } }, [children, startIndex, itemsPerPage]); - // 向前翻页 + // 向前翻页 - 只有不在第一页时才能向前 const handlePrevPage = () => { - setStartIndex((prev) => { - const newIndex = prev - itemsPerPage; - return newIndex < 0 ? Math.max(0, children.length - itemsPerPage) : newIndex; - }); + if (startIndex > 0) { + setStartIndex((prev) => Math.max(0, prev - itemsPerPage)); + } }; - // 向后翻页 - 支持无限浏览 + // 向后翻页 - 支持无限浏览,到达末尾时循环到开头 const handleNextPage = () => { setStartIndex((prev) => { const newIndex = prev + itemsPerPage; @@ -49,11 +48,9 @@ export default function PaginatedRow({ }); }; - // 计算当前页码用于指示器 - const currentPageIndex = Math.floor(startIndex / itemsPerPage); - const totalPages = Math.ceil(children.length / itemsPerPage); - - // 如果没有足够的内容需要分页,就不显示按钮 + // 检查是否可以向前翻页 + const canGoPrev = startIndex > 0; + // 检查是否需要显示翻页按钮 const needsPagination = children.length > itemsPerPage; return ( @@ -70,22 +67,24 @@ export default function PaginatedRow({ {/* 改进的导航按钮 - 仅在容器悬停时显示 */} {needsPagination && ( <> - {/* 左箭头按钮 */} - + {/* 左箭头按钮 - 只有不在第一页时才显示 */} + {canGoPrev && ( + + )} - {/* 右箭头按钮 */} + {/* 右箭头按钮 - 始终显示 */}