• 此分页组件已发布至NPM，欢迎下载并提意见

上篇文章已经初步实现了分页省略的功能，本文将继续增加功能。

设置 groupCount

为了方便管理，我们增加一个名为 groupCount 的 state，用来表示省略符前面的数据条数，默认为7条。

...
constructor(props){
    super(props)
    // 设置当前页码，默认为第一页
    this.state = {
        pageCurr:1,
        groupCount:7,
    }
}
...

设置 startPage

分页的规则是：

• 先显示 1-7，再显示省略符，最后显示倒数的两个页码
• 先显示 8-14，再显示省略符，最后显示倒数的两个页码
• 以此类推

要完成这样的功能，我们需要一个变量来表示最开头的页码（startPage），然后分页规则就是：

• 显示从 startPage 开始的7个页码
• 显示省略符
• 显示倒数两个页码

设置一个为 startPage 的 state：

...
constructor(props){
    super(props)
    // 设置当前页码，默认为第一页
    this.state = {
        pageCurr:1,
        groupCount:7,
        startPage:1,
    }
}
...

修改 create 方法，当页码大于10时，从 startPage 生成页码：

....
for(let i = startPage;i <= groupCount;i ++){
    pages.push(<li className = { this.state.pageCurr === i? style.active:""} key={i} onClick = { this.go.bind(this,i) }>{i}</li>)
}
....

如果 startPage 为1，就先生成 1-7 个页码，如果 startPage 为 8，就先生成 8-14 个页码 ...

动态改变 startPage

接下来，我们就可以根据当前页码（pageCurr）来动态改变starPage了，当startPage改变后，分页组件将重新渲染。
修改组件的 go 方法：

...
go(pageCurr){
    const {
        groupCount
    } = this.state;
    
    // 处理下一页的情况
    if(pageCurr % groupCount === 1){
        this.setState({
            startPage:pageCurr
        })
    }

    // 处理上一页的情况
    if(pageCurr % groupCount === 0){
        this.setState({
            startPage:pageCurr - groupCount + 1
        })
    }


    this.setState({
        pageCurr
    });

}
...

修改 create 方法：

...
create(){
...
    if( totalPage <= 10){
...
    }else{
...
        for(let i = startPage;i < groupCount + startPage;i ++){
            pages.push(<li className = { this.state.pageCurr === i? style.active:""} key={i} onClick = { this.go.bind(this,i) }>{i}</li>)
        }
...
}
...

上面我们通过 pageCurr % groupCount 的值来动态更新 startPage，这种算法请大家细细体会。
下面是效果图：

效果图.gif

至此，页码部分已经初具雏形了，当然还有许多需要优化的地方。比如点击到最后一页时，省略符仍然显示，点击最后两页时效果怪怪的等。这部分的内容将在后续的文章继续优化，本文就先写到这里。

完。

一步一步教你写 React 分页组件（一）
一步一步教你写 React 分页组件（二）
一步一步教你写 React 分页组件（三）
一步一步教你写 React 分页组件（四）
一步一步教你写 React 分页组件（五）
一步一步教你写 React 分页组件（六）