rc-infinite-pagination 无限分页组件

rc-infinite-pagination is a infinite pagination component for React that doesn't require total page or count. You don't care about how many pages in a given list view, and just go-to-next and so forth till there's no data shown.

rc-infinite-pagination是React的无限分页组件，它不需要分页总数。你不需要关心列表页面中有多少数据，只需要前后翻页，直到没有显示数据为止。

安装 Install

npm install rc-infinite-pagination -S
# or with yarn
yarn add rc-infinite-pagination

示例 Usage

Example: https://codesandbox.io/s/rc-infinite-pagination-y3xt2

基本 Basic

import InfinitePagination from 'rc-infinite-pagination'

const App = () => {
  return (
    <InfinitePagination
      current={current}
      onChange={handleChange}
      pageData={pageData}
    />
  );
};

自定义文本 Customize text

import InfinitePagination from 'rc-infinite-pagination'

const App = () => {
  return (
    <InfinitePagination
      current={current}
      onChange={handleChange}
      pageData={pageData}
      pageSize={pageSize}
      prevText="prev"
      nextText="next"
    />
  );
};

自定义上、下页结构 Customize prev and next

import InfinitePagination from 'rc-infinite-pagination'

const App = () => {
  return (
    <InfinitePagination
      current={current}
      onChange={handleChange}
      pageData={pageData}
      pageSize={pageSize}
      prev={prev}
      next={next}
    />
  );
};

自定义类名 Customize className: "float right"

import InfinitePagination from 'rc-infinite-pagination'

const App = () => {
  return (
    <InfinitePagination
      current={current}
      onChange={handleChange}
      pageData={pageData}
      pageSize={pageSize}
      className="fr"
    />
  );
};

API

参数 Props

| 名称 Name | 类型Type | 描述 Description | 默认值 Default | | ------------- | ----------------- | ------------------------------------------------------------------------ | ---------------------- | | current | Number | 当前页数 The current number of pages | 1 | | pageSize | Number | 每页应展示条数 The number of items should be displayed per page | 10 | | pageData | Array | 每页数据 data items per page | [] | | className | String | 分页容器类名 The class name of the container of the pagination n | - | | onChange | (current) => void | 页码改变的回调 The callback executed when the page number is changed | - | | prevText | ReactNode | 上一页文字 The text of the previous page | <>&lt;</> | | nextText | ReactNode | 下一页文字 The text of the next page | <>&lt;</> | | prev | ReactNode | 自定义渲染上一页按钮 The component to render the previous button | - | | next | ReactNode | 自定义渲染下一页按钮 The component to render the next button | - | | first | ReactNode | 自定义渲染首页按钮 The component to render the first button | - |