Pagination 翻页器

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

在有大量内容展现需要进行分页加载处理的时候。

API

翻页器

代码示例

受控分页

受控分页，是指分页组件的状态由父组件维护，组件自身只负责渲染其父组件传递的值，父组件通过 current 属性传递当前的值。

查看源码在线预览

import { Pagination } from "@icedesign/base";
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 2
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(current) {
    this.setState({
      current
    });
  }
  render() {
    return (
      <Pagination current={this.state.current} onChange={this.handleChange} />
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

分页按钮链接

可以通过指定 link 属性来设置页码按钮的跳转链接，方便SEO，link属性的值为一个包含{page}的模板字符串，Pagination组件会将该占位符替换为具体的页码数字。

查看源码在线预览

import { Pagination } from "@icedesign/base";
const format = window.location.href + "#/{page}";
ReactDOM.render(<Pagination defaultCurrent={2} link={format} />, mountNode);

每页显示

可以通过设置 onPageSizeChange 属性来指定每页显示的数量变化时的回调函数。可以通过设置 pageSizePosition 属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。可以通过设置 pageSizeList 属性来指定 每页显示数量 可选的值。可以通过设置 pageSizeSelector 属性来指定是否显示 每页数量选择 的部件以及部件形状。可以通过设置 pageSize 属性来指定每页显示的数量。

查看源码在线预览

import { Pagination } from "@icedesign/base";
const handlePageSizeChange = size => console.log(size);
ReactDOM.render(
  <div>
    <h3>无每页数量选择器</h3>
    <Pagination pageSizeSelector={false} />
    <h3>filter类型每页数量选择器</h3>
    <Pagination
      pageSizeSelector="filter"
      onPageSizeChange={handlePageSizeChange}
    />
    <h3>dropdown类型每页数量选择器，并且至于整个组件的尾部</h3>
    <Pagination
      pageSizeSelector="dropdown"
      pageSizePosition="end"
      onPageSizeChange={handlePageSizeChange}
    />
  </div>,
  mountNode
);

配合react-router使用

单页应用场景下，Pagination组件可以使用外部跳转的方法来实现单页内部跳转。

查看源码在线预览

import { Pagination } from "@icedesign/base";
import { hashHistory } from "react-router";
function handleChange(page) {
  hashHistory.push(page.toString());
}
ReactDOM.render(
  <Pagination defaultCurrent={2} onChange={handleChange} />,
  mountNode
);

前进后退按钮只显示箭头

可以通过指定 shape 属性来设置前进后退按钮箭头的显示方式。

查看源码在线预览

import { Pagination } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>normal</h3>
    <Pagination defaultCurrent={2} />
    <h3>arrow-only</h3>
    <Pagination defaultCurrent={2} shape="arrow-only" />
    <h3>arrow-prev-only</h3>
    <Pagination defaultCurrent={2} shape="arrow-prev-only" />
    <h3>no-border</h3>
    <Pagination defaultCurrent={2} shape="no-border" type="simple" />
  </div>,
  mountNode
);

.next-pagination + .next-pagination {
    margin-top: 20px;
}

显示总数

分页组件自身并未提供显示总数的功能，但是你可以像这个例子所展示的那样轻松实现该功能。

查看源码在线预览

import { Pagination } from "@icedesign/base";
const total = 50;
ReactDOM.render(
  <div>
    <span>{`共 ${total} 项`}</span>
    <Pagination className="custom-pagination" total={total} />
  </div>,
  mountNode
);

.custom-pagination {
    display: inline-block;
    margin-left: 10px;
}

分页尺寸

可以通过指定 size 属性来设置分页的尺寸。

查看源码在线预览

import { Pagination } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>small</h3>
    <Pagination defaultCurrent={2} size="small" />
    <h3>medium</h3>
    <Pagination defaultCurrent={2} size="medium" />
    <h3>large</h3>
    <Pagination defaultCurrent={2} size="large" />
  </div>,
  mountNode
);

分页类型

可以通过指定 type 属性来设置分页的类型。

查看源码在线预览

import { Pagination } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>normal</h3>
    <Pagination defaultCurrent={2} />
    <h3>simple</h3>
    <Pagination defaultCurrent={2} type="simple" />
    <h3>mini</h3>
    <Pagination defaultCurrent={2} type="mini" />
  </div>,
  mountNode
);

非受控分页

非受控分页，是指分页组件的状态由自己维护，组件值的改变可以通过 onChange 事件通知父组件，默认值由 defaultCurrent 初始化。

查看源码在线预览

import { Pagination } from "@icedesign/base";
const change = function(value) {
  console.log(value);
};
ReactDOM.render(<Pagination defaultCurrent={2} onChange={change} />, mountNode);

相关区块

暂无相关区块