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"
    />
  );
};

首页按钮 First Page (1.0.9+)

import InfinitePagination from 'rc-infinite-pagination'

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

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	-