Pagination 分页器

分隔长列表,每次只加载一个页面。

规则

  • 当加载/渲染所有数据将花费很多时间或者流量时使用

代码演示

基本

基本的分页器。

  1. import { Pagination, Icon } from 'antd-mobile';
  2. const locale = {
  3. prevText: 'Prev',
  4. nextText: 'Next',
  5. };
  6. const App = () => (
  7. <div className="pagination-container" >
  8. <p className="sub-title">Button with text</p>
  9. <Pagination total={5} current={1} locale={locale} />
  10. <p className="sub-title">Button with text and icon</p>
  11. <Pagination total={5}
  12. className="custom-pagination-with-icon"
  13. current={1}
  14. locale={{
  15. prevText: (<span className="arrow-align"><Icon type="left" />上一步</span>),
  16. nextText: (<span className="arrow-align">下一步<Icon type="right" /></span>),
  17. }}
  18. />
  19. <p className="sub-title">Hide number</p>
  20. <Pagination simple total={5} current={1} locale={locale} />
  21. <p className="sub-title">Show number only</p>
  22. <Pagination mode="number" total={5} current={3} />
  23. <p className="sub-title">Point style</p>
  24. <Pagination mode="pointer" total={5} current={2} style={{ marginBottom: '16px' }} />
  25. </div>
  26. );
  27. ReactDOM.render(<App />, mountNode);
  1. .pagination-container {
  2. margin: 0 15px;
  3. }
  4. .custom-pagination-with-icon .am-pagination-wrap-btn-prev .am-button-inline{
  5. padding-left: 0;
  6. padding-right: 10px;
  7. }
  8. .custom-pagination-with-icon .am-pagination-wrap-btn-next .am-button-inline{
  9. padding-left: 10px;
  10. padding-right: 0;
  11. }
  12. .arrow-align {
  13. display: flex;
  14. align-items: center;
  15. }
  16. .sub-title {
  17. color: #888;
  18. font-size: 14px;
  19. padding: 30px 0 18px 0;
  20. }

Pagination分页器 - 图1

API

属性说明类型默认值
mode形态,可选button,number,pointerstringbutton
current当前页号number1
total数据总数number0
simple是否隐藏数值booleanfalse
disabled禁用状态booleanfalse
locale国际化, 可以覆盖全局LocaleProvider的配置Object:{prevText, nextText}
onChangechange 事件触发的回调函数(e: Object): void