Pagination 分页器

规则

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

代码演示

按钮形态

import { Pagination, WhiteSpace, Icon, WingBlank } from 'antd-mobile';
const App = React.createClass({
  render() {
    return (
      <div className="loading-example">
        <div className="pagination-container" >
          <WhiteSpace size="lg" />
          <WingBlank>
            <p className="title">按钮内带文本</p>
            <Pagination
              total={5}
              current={1}
              prevText="上一步"
              nextText="下一步"
            />
          </WingBlank>
          <WhiteSpace size="lg" />
          <WingBlank>
            <p className="title">带文本和icon</p>
            <Pagination
              total={5}
              current={1}
              prevText={<div><Icon type="left" />上一步</div>}
              nextText={<div>下一步<Icon type="right" /></div>}
            />
          </WingBlank>
          <WhiteSpace size="lg" />
          <WingBlank>
            <p className="title">隐藏数字</p>
            <Pagination
              total={5}
              simple
              current={1}
              prevText="上一步"
              nextText="下一步"
            />
          </WingBlank>
          <WhiteSpace size="lg" />
          <WingBlank>
            <p className="title">只显示数字</p>
            <Pagination
              mode="number"
              total={5}
              current={3}
            />
          </WingBlank>
          <WhiteSpace size="lg" />
        </div>
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

.demo-preview-item .loading-example * {
  box-sizing: border-box;
}
.loading-example .title {
  margin-bottom: 20px;
}

点状型

import { Pagination, WhiteSpace, WingBlank } from 'antd-mobile';
const App = React.createClass({
  render() {
    return (
      <div>
        <div className="pagination-container" >
          <WhiteSpace size="lg" />
          <WingBlank>
            <p className="title">点状</p>
            <div style={{ marginBottom: '32px' }}>
              <Pagination
                mode="pointer"
                total={5}
                current={2}
              />
            </div>
          </WingBlank>
          <WhiteSpace size="lg" />
        </div>
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

.loading-example .title {
  margin-right: 20px;
}

API

Pagination