自己写一个 react 分页组件（PageComponent )

由于项目需要，到网上找了一下，却发现都是过于复杂，没有合适的。所以只能自行写尝试着写了一个。

具体要求：

　　一、参数只传总页数，当前页码，回调方法。

　　二、选择页码后回调选中的页码，并高亮显示。

　　三、如果当前页码为第一页，则没有【上一页】，如果当前页为最后一页则没有【下一页】

　　四、总页码小于等于10时，把全部页码显示出来

　　五、如总页码数大于10时，显示省略页码

大体效果如图：

下面放上源码：

page.scss

 1 /*css -scss/less */
 2 .g-page {
 3     display: inline-block;
 4     *display: inline;
 5     *zoom: 1;
 6     vertical-align: middle;
 7     margin: 10px 0;
 8     font-size: 0;
 9 
10     li {
11         display: inline-block;
12         *display: inline;
13         *zoom: 1;
14         vertical-align: middle;
15         padding: 0 15px;
16         height: 28px;
17         line-height: 28px;
18         margin: 0 -1px 5px 0;
19         background-color: #fff;
20         color: #333;
21         font-size: 12px;
22         border: 1px solid #e2e2e2;
23         cursor: pointer;
24         &:hover{
25             color: #009688;
26         }
27     }
28     .activePage{
29         background-color: #009688;
30         color: #fff;
31         &:hover{
32             color: #fff;
33         }
34     }
35 }

Pagecomponent.js

 1 import React, { Component } from 'react'
 2 import './page.scss';
 3 export default class Pagecomponent extends Component {
 4     constructor(props) {
 5         super(props)
 6         this.state = {
 7             currentPage: 1, //当前页码
 8             groupCount: 5, //页码分组，显示7个页码，其余用省略号显示
 9             startPage: 1,  //分组开始页码
10             totalPage: 1 //总页数
11         }
12     }
13     // 点击页码
14     pageClick(currentPage) {
15         const { groupCount } = this.state
16         const getCurrentPage = this.props.pageCallbackFn;
17         //当 当前页码 大于 分组的页码 时，使 当前页 前面 显示 两个页码
18         let startPage = currentPage >= groupCount ? currentPage - 2: 1
19         this.setState({
20             startPage,
21             currentPage
22         })
23         //将当前页码返回父组件
24         getCurrentPage(currentPage)
25     }
26     //上一页事件
27     prePageHandeler() {
28         let { currentPage } = this.state
29         this.pageClick(--currentPage)
30     }
31     //下一页事件
32     nextPageHandeler() {
33         let { currentPage } = this.state
34         this.pageClick(++currentPage)
35     }
36     // 获取从父组件传来的总页数与当前页数
37     componentDidMount(){
38         this.setState({
39             currentPage:this.props.currentPage,
40             totalPage:this.props.totalPage
41         })
42     }
43     render() {
44         const {groupCount, startPage,currentPage, totalPage} = this.state;
45         let pages = []
46 
47         // 如果当前面不是第一页 则添加上一页
48         if(currentPage!==1){
49             pages.push(<li onClick={this.prePageHandeler.bind(this)} key={0}> 上一页</li>)
50         }
51 
52          /*总页码小于等于10时，全部显示出来*/
53         if (totalPage <= 10) {
54             for (let i = 1; i <= totalPage; i++) {
55                 pages.push(<li key={i} onClick={this.pageClick.bind(this, i)}
56                     className={currentPage === i ? "activePage" : null}>{i}</li>)
57             }
58         } else {/*总页码大于10时，部分显示*/
59 
60             //第一页
61             pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
62                 onClick={this.pageClick.bind(this, 1)}>1</li>)
63 
64             //前面省略号(当当前页码比分组的页码大时显示省略号)
65             if (currentPage >= groupCount) {
66                 pages.push(<li className="" key={-1}>···</li>)
67             }
68             //非第一页和最后一页显示
69             for (let i = currentPage-2; i < currentPage+3; i++) {
70                 if (i <= totalPage - 1 && i > 1) {
71                     pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
72                         onClick={this.pageClick.bind(this, i)}>{i}</li>)
73                 }
74             }
75             //后面省略号
76             if (totalPage - startPage >= groupCount + 1) {
77                 pages.push(<li className="" key={-2}>···</li>)
78             }
79             //最后一页
80             pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
81                 onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
82         }
83 
84         //如果当前面不是最后一页 则添加下一页
85         if(currentPage!==totalPage){
86             pages.push(<li onClick={this.nextPageHandeler.bind(this)} key={totalPage + 1}>下一页</li>)
87         }
88         return (
89             <ul className="g-page">
90                { pages}
91             </ul>
92         )
93     }
94 }

组件调用核心代码

getCurrentPage(currentPage) {
        console.log('currentPage', currentPage)
    }

<Pagecomponent pageCallbackFn={this.getCurrentPage.bind(this)} totalPage={20} currentPage={5}></Pagecomponent>

到这，分页组件就差不多写好了，能用了。当然还不够严谨，像还没对传的参数进行校验。有兴趣的朋友可以自己加上去

自己写一个 react 分页组件（PageComponent )

猜你喜欢