自己寫一個 react 分頁組件（PageComponent )

由於項目需要，到網上找了一下，卻發現都是過於復雜，沒有合適的。所以只能自行寫嘗試着寫了一個。

具體要求：

　　一、參數只傳總頁數，當前頁碼，回調方法。

　　二、選擇頁碼后回調選中的頁碼，並高亮顯示。

　　三、如果當前頁碼為第一頁，則沒有【上一頁】，如果當前頁為最后一頁則沒有【下一頁】

　　四、總頁碼小於等於10時，把全部頁碼顯示出來

　　五、如總頁碼數大於10時，顯示省略頁碼

大體效果如圖：

下面放上源碼：

page.scss

/*css -scss/less */
.g-page {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    margin: 10px 0;
    font-size: 0;

    li {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        vertical-align: middle;
        padding: 0 15px;
        height: 28px;
        line-height: 28px;
        margin: 0 -1px 5px 0;
        background-color: #fff;
        color: #333;
        font-size: 12px;
        border: 1px solid #e2e2e2;
        cursor: pointer;
        &:hover{
            color: #009688;
        }
    }
    .activePage{
        background-color: #009688;
        color: #fff;
        &:hover{
            color: #fff;
        }
    }
}

Pagecomponent.js

import React, { Component } from 'react'
import './page.scss';
export default class Pagecomponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            currentPage: 1, //當前頁碼
            groupCount: 5, //頁碼分組，顯示7個頁碼，其余用省略號顯示
            startPage: 1,  //分組開始頁碼
            totalPage: 1 //總頁數
        }
    }
    // 點擊頁碼
    pageClick(currentPage) {
        const { groupCount } = this.state
        const getCurrentPage = this.props.pageCallbackFn;
        //當 當前頁碼 大於 分組的頁碼 時，使 當前頁 前面 顯示 兩個頁碼
        let startPage = currentPage >= groupCount ? currentPage - 2: 1
        this.setState({
            startPage,
            currentPage
        })
        //將當前頁碼返回父組件
        getCurrentPage(currentPage)
    }
    //上一頁事件
    prePageHandeler() {
        let { currentPage } = this.state
        this.pageClick(--currentPage)
    }
    //下一頁事件
    nextPageHandeler() {
        let { currentPage } = this.state
        this.pageClick(++currentPage)
    }
    // 獲取從父組件傳來的總頁數與當前頁數
    componentDidMount(){
        this.setState({
            currentPage:this.props.currentPage,
            totalPage:this.props.totalPage
        })
    }
    render() {
        const {groupCount, startPage,currentPage, totalPage} = this.state;
        let pages = []

        // 如果當前面不是第一頁 則添加上一頁
        if(currentPage!==1){
            pages.push(<li onClick={this.prePageHandeler.bind(this)} key={0}> 上一頁</li>)
        }

         /*總頁碼小於等於10時，全部顯示出來*/
        if (totalPage <= 10) {
            for (let i = 1; i <= totalPage; i++) {
                pages.push(<li key={i} onClick={this.pageClick.bind(this, i)}
                    className={currentPage === i ? "activePage" : null}>{i}</li>)
            }
        } else {/*總頁碼大於10時，部分顯示*/

            //第一頁
            pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
                onClick={this.pageClick.bind(this, 1)}>1</li>)

            //前面省略號(當當前頁碼比分組的頁碼大時顯示省略號)
            if (currentPage >= groupCount) {
                pages.push(<li className="" key={-1}>···</li>)
            }
            //非第一頁和最后一頁顯示
            for (let i = currentPage-2; i < currentPage+3; i++) {
                if (i <= totalPage - 1 && i > 1) {
                    pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
                        onClick={this.pageClick.bind(this, i)}>{i}</li>)
                }
            }
            //后面省略號
            if (totalPage - startPage >= groupCount + 1) {
                pages.push(<li className="" key={-2}>···</li>)
            }
            //最后一頁
            pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
                onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
        }

        //如果當前面不是最后一頁 則添加下一頁
        if(currentPage!==totalPage){
            pages.push(<li onClick={this.nextPageHandeler.bind(this)} key={totalPage + 1}>下一頁</li>)
        }
        return (
            <ul className="g-page">
               { pages}
            </ul>
        )
    }
}

 組件調用 核心代碼

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

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

 到這，分頁組件就差不多寫好了，能用了 。當然還不夠嚴謹，像還沒對傳的參數進行校驗。有興趣的朋友可以自己加上去