Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.Pagination分页

采用分页的形式分隔长列表，每次只加载一个页面。

2.何时使用

·当加载/渲染所有数据将花费很多时间时；

·可切换页码浏览数据。

组件代码来自：分页 Pagination - Ant Design

3.本地验证前的准备

参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_西晋的no1的博客-CSDN博客】，将分页 Pagination - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码，启动代码，可在本地查看现象和更改代码。

4.本地验证Pagination的所有配置选项。

复制下图所示代码，了解Pagination的所有配置选项。

Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用

5.感受一下size的作用

在上一步的基础上复制一个<Pagination … />，

同时用<div> </div>将两个<Pagination … />包裹住。

在两个<Pagination … />中分别增加一个size="small"和size="default"

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

const App = () => (
    <div>
        <Pagination
            size="small"
            total={85}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `Total ${total} items`}
        />

        <Pagination
            size="default"
            total={85}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `Total ${total} items`}
        />
    </div>
);
export default App;

效果图如下：

Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用

6.感受一下pageSize和current的作用

在上一步的基础上，复制下述代码到第一个<Pagination … />中

pageSize={50} // 每页条数

current={2} // 当前页数

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

const App = () => (
    <div>
        <Pagination
            size="small"
            total={85}
            pageSize={50}   // 每页条数
            current={2} // 当前页数
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `Total ${total} items`}
        />

        <Pagination
            size="default"
            total={85}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `Total ${total} items`}
        />
    </div>
);
export default App;

效果图如下：

Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用

7.感受一下onChange的作用

在4的基础上增加一个

onChange={(page, pageSize) => {
console.log(page, pageSize)
}}

最终App2.js中的全部代码如下：

import {Pagination} from 'antd';

const App = () => (
    <Pagination
        total={85}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `Total ${total} items`}
        onChange={(page, pageSize) => {
            console.log(page, pageSize)
        }}
    />
);
export default App;

效果图如下：点击页数或选择每页显示多少条，可以在F12控制台里可以看到当前页码和每页显示的条数

Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用