Semi Design 分页器组件 Pagination 完全指南

Semi Design 分页器组件 Pagination 完全指南

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

什么是分页器组件

分页器(Pagination)是Web应用中常见的导航组件，它允许用户在大量数据中进行分页浏览。Semi Design提供的Pagination组件是一个功能完善、样式美观的分页解决方案，能够满足各种分页场景的需求。

基础用法

基本分页

最简单的分页器只需要指定总数据量total即可：

import { Pagination } from '@douyinfe/semi-ui';

<Pagination total={50} />

组件会自动计算总页数，默认每页显示10条数据。你也可以通过pageSize属性自定义每页显示数量：

<Pagination total={80} pageSize={20} />

禁用状态

在某些情况下，你可能需要禁用分页器的交互功能：

<Pagination total={30} disabled />

禁用状态下，所有按钮和交互元素都会变为不可点击状态，并显示禁用样式。

高级功能

显示总页数

通过showTotal属性可以显示总页数信息：

<Pagination total={200} showTotal />

页码控制

默认页码

使用defaultCurrentPage设置初始页码：

<Pagination total={80} defaultCurrentPage={3} />

受控模式

在需要精确控制页码时，可以使用受控模式：

const [page, setPage] = useState(1);

<Pagination 
  total={200} 
  currentPage={page}
  onPageChange={currentPage => setPage(currentPage)}
/>

每页容量切换

允许用户自定义每页显示数量：

<Pagination 
  total={300} 
  showSizeChanger
  pageSizeOpts={[10, 20, 50, 100]}
/>

pageSizeOpts属性可以自定义可选值，默认是[10, 20, 40, 100]。

快速跳转

对于大量数据的分页，快速跳转功能非常实用：

<Pagination total={500} showQuickJumper />

用户可以直接输入页码跳转，输入超出范围时会自动跳转到最后一页。

样式与尺寸

迷你版本

对于空间有限的场景，可以使用小型分页器：

<Pagination total={90} size="small" />

悬停显示页码选择

在小型分页器中，可以启用悬停显示页码选择功能：

<Pagination 
  total={90} 
  size="small" 
  hoverShowPageSelect
/>

最佳实践

1. 大数据量处理：当数据量非常大时(超过100万条)，建议使用服务端分页而非前端分页。

2. 性能优化：在受控模式下，确保onPageChange处理函数不会造成不必要的重渲染。

3. 移动端适配：在移动设备上，考虑使用更简洁的分页样式或无限滚动替代传统分页。

4. 无障碍访问：确保为分页器添加适当的ARIA属性，如aria-label和aria-current。

常见问题

为什么页数下拉选择器最多只支持1,000,000条数据？

这是出于浏览器性能和内存限制的考虑。JavaScript对数组长度有限制，同时创建超大数组会带来性能开销。对于超过此限制的数据，建议实现服务端分页方案。

总结

Semi Design的Pagination组件提供了丰富的功能和灵活的配置选项，能够满足各种分页需求。从基本的分页显示到高级的快速跳转、每页容量切换等功能，开发者可以根据实际场景选择合适的配置。通过本文的介绍，你应该已经掌握了如何使用这个强大的分页组件。

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design