Pagination 分页器

定义／Definition

采用分页的形式分隔长列表

规则 / Rule

每次只加载一个页面

代码演示

按钮形态

基本的分页器。 

  1. import { Pagination, WhiteSpace, Icon, WingBlank } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="loading-example">
  7.         <div className="pagination-container" >
  8.           <WhiteSpace size={20} />
  9.           <WingBlank>
  10.             <p className="title">按钮内带文本</p>
  11.             <Pagination
  12.               total={5}
  13.               current={1}
  14.               prevText="上一步"
  15.               nextText="下一步"
  16.             />
  17.           </WingBlank>
  18.           <WhiteSpace size={20} />
  19.           <WingBlank>
  20.             <p className="title">带文本和icon</p>
  21.             <Pagination
  22.               total={5}
  23.               showNumber={false}
  24.               current={1}
  25.               simple
  26.               prevText={<div><Icon type="left" />上一步</div>}
  27.               nextText={<div>下一步<Icon type="right" /></div>}
  28.             />
  29.           </WingBlank>
  30.           <WhiteSpace size={20} />
  31.           <WingBlank>
  32.             <p className="title">仅icon</p>
  33.             <Pagination
  34.               total={5}
  35.               simple
  36.               current={1}
  37.               prevText={<Icon type="left" />}
  38.               nextText={<Icon type="right" />}
  39.             />
  40.           </WingBlank>
  41.           <WhiteSpace size={20} />
  42.           <WingBlank>
  43.             <p className="title">隐藏数字</p>
  44.             <Pagination
  45.               total={5}
  46.               simple={false}
  47.               current={1}
  48.               prevText="上一步"
  49.               nextText="下一步"
  50.             />
  51.           </WingBlank>
  52.           <WhiteSpace size={20} />
  53.           <WingBlank>
  54.             <p className="title">小号</p>
  55.             <Pagination
  56.               total={5}
  57.               size="small"
  58.               activeIndex={1}
  59.             />
  60.           </WingBlank>
  61.           <WhiteSpace size={20} />
  62.           <WingBlank>
  63.             <Pagination
  64.               total={5}
  65.               size="small"
  66.               simple
  67.               activeIndex={1}
  68.             />
  69.           </WingBlank>
  70.         </div>
  71.       </div>
  72.     );
  73.   },
  74. });
  76. ReactDOM.render(<App />, mountNode);
  1. .demo-preview-item .loading-example * {
  2.   box-sizing: border-box;
  3. }
  4. .loading-example .title {
  5.   margin-bottom: 20px;
  6. }

数字形态

基本的分页器。 

  1. import { Pagination, WhiteSpace, WingBlank } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div>
  7.         <div className="pagination-container" >
  8.           <WhiteSpace size={20} />
  9.           <WingBlank>
  10.             <p className="title">只显示数字</p>
  11.             <Pagination
  12.               mode="number"
  13.               total={5}
  14.               activeIndex={2}
  15.             />
  16.           </WingBlank>
  17.           <WhiteSpace size={20} />
  18.           <WingBlank>
  19.             <Pagination
  20.               mode="number"
  21.               size="small"
  22.               total={5}
  23.               activeIndex={-1}
  24.             />
  25.           </WingBlank>
  26.         </div>
  27.       </div>
  28.     );
  29.   },
  30. });
  32. ReactDOM.render(<App />, mountNode);
  1. .loading-example .title {
  2.   margin-right: 20px;
  3. }

点状型

基本的分页器。 

  1. import { Pagination, WhiteSpace, WingBlank } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div>
  7.         <div className="pagination-container" >
  8.           <WhiteSpace size={20} />
  9.           <WingBlank>
  10.             <p className="title">点状</p>
  11.             <Pagination
  12.               mode="pointer"
  13.               size="large"
  14.               total={5}
  15.               activeIndex={1}
  16.             />
  17.           </WingBlank>
  18.           <WhiteSpace size={20} />
  19.           <WingBlank>
  20.             <Pagination
  21.               mode="pointer"
  22.               size="small"
  23.               total={5}
  24.               activeIndex={2}
  25.             />
  26.           </WingBlank>
  27.         </div>
  28.       </div>
  29.     );
  30.   },
  31. });
  33. ReactDOM.render(<App />, mountNode);
  1. .loading-example .title {
  2.   margin-right: 20px;
  3. }

Pagination分页器 - 图1

API

Pagination

参数说明类型可选值默认值
mode形态stringbutton or number or pointbutton
current当前索引number无
total数据总数number0
simple是否显示数值booleantrue or falsetrue
size形态大小booleansmall or large''
disabled禁用状态booleantrue or falsefalse
prevTextprev文字string or React.ElementPrev
nextTextnext文字string or React.ElementNext
onChangechange事件触发的回调函数，参数是event对象function无