xerxes-react-pagination

• 基本介绍
  • 安装说明
  • 案例说明
  • props说明
  • events说明
  • methods说明

基本介绍

这是一个基于 react 的分页组件， 包含 总条数，左右切换，快速跳转， 条数修改等完整的功能

安装说明

运行安装命令：

  npm i -s xerxes-react-pagination or yarn add xerxes-react-pagination

案例说明

介绍了基本的使用方式

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Pagination from 'xerxes-react-pagination'
import Pagination from 'xerxes-react-pagination/lib/index.css'
import './example.css'

class App extends Component {
  state = {
    total: 50
  }
  click = () => {
    this.setState({total: this.state.total+10})
  }
  _pageChange = (num) => {
    console.log(num)
  }
  render () {
    return (
      <div className="wrapper">
        <h2>完整的分页</h2>
        <Pagination total={this.state.total} onChange={this._pageChange} />
        <button onClick={this.click}>点击</button>
        <h2>设置组件布局选项</h2>
        <Pagination total={400} 
        layout="pager, total"
        onChange={this._pageChange} />
        <button onClick={this.click}>点击</button>
      </div>
    )
  }
}

props说明

| 属性 | 类型 | 默认值 | 可选值 | 描述 | | :--- | :----: | :----: | :---: | :--- | | total | Number | ❌ | -- | 初始化时数据的总条数 | | currentPage | Number | 1 | --- | 当前激活的页数 | | pageSize | Number | 10 | --- | 当前页显示的条数 | | pageSizes | Array | [10, 20, 30, 40] | --- | 每页显示个数选择器的选项设置 | | layout | Array | 'pager, jumper, total' | pager, jumper, total | 组件布局， 子组件名用逗号分隔 |

events说明

| 事件名称 | 回调参数 | 事件说明 | | :------ | :------:| :------ | | onSizeChange | 每页条数 size | pageSize 改变时触发 | | onCurrentChange | 当前页 currentPage | currentPage 改变时触发 |

methods说明

| 方法名称 | 方法说明 | 参数说明 | | :------ | :------- | | setCurrentPage | 设置当前页 | 范围内的页数 |