1.0.7 • Published 7 years ago

react-bilibilistyle-pagination v1.0.7

Weekly downloads
80
License
-
Repository
-
Last release
7 years ago

Introduction

Build Status

经常混迹B站,大二上期末的时候做web2.0课程设计大作业时,需要用到分页组件。当时模仿B站的分页写了一个Angular的版本,最近在学习React, 故将其写成一个react组件。

Usage

Install

npm i -S react-bilibilistyle-pagination

Load

import Pagination from 'react-bilibilistyle-pagination'
import 'react-bilibilistyle-pagination/dist/main.css';

Props

参数说明类型必要性默认值
defaultCurrent默认页数number必要1
defaultPageSize默认每页可以显示条数number不必要10
total数据总数number必要100
pageSize每页条数number不必要10
pageSizes指定每页可以显示多少条array(都是数字)不必要10, 20, 30, 40
showQuickJumper是否可以快速跳到某页bool不必要true
showSizeChanger是否可以指定每页显示多少条bool不必要true
pageChange页码改变的回调,参数为新的页数func不必要-
pageSizeChange每页页数改变时的回调,接收当前页数和新的每条页数作为参数func不必要-

Example

import React, { Component } from 'react';
import Pagination from 'react-bilibilistyle-pagination';
import 'react-bilibilistyle-pagination/dist/main.css';

class App extends Component {
    constructor () {
        super();
        this.state = {
            defaultCurrent: 2
        }
    }

    pageChange  = (current, newPageSize) => {
	  ...
    }

    pageSizeChange = (current, newPageSize) => {
      ...
    }

    render () {
        const props = {
            ...this.state,
            pageChange: this.pageChange,
            pageSizeChange: this.pageSizeChange
        }


        return (
            <div>
                <Pagination {...props} />
            </div>
        );
    }
}



export default App;

效果截图

最简单

最简单

只可以goto到某页

次

只可以修改每页条数

次

完整

最完整