一步一步教你写 React 分页组件（三）

2017-05-10 本文已影响463人柏丘君

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

上篇文章完成了页码切换的功能，本文将在此基础上进行更多的处理。

如果当前页码为1（pageCurr），则没有上一页
如果当前页码为总页码（totalPage），则没有下一页

增加一个样式，在没有上一页/下一页时应用：

...
.nomore{
    color:#b5b5b5 !important;
}

create 方法中进行当前页码判断，并应用样式：

...
create(){
    ...
    pages.push(<li onClick = { this.goPrev.bind(this) } className = { this.state.pageCurr === 1? style.nomore:"" } key={0}>上一页</li>)
    ...
    pages.push(<li onClick = { this.goNext.bind(this) } className = { this.state.pageCurr === totalPage? style.nomore:"" } key={totalPage + 1}>下一页</li>)
...
}
...

修改 goPrev 和 goNext 方法，处理页码越界操作：

...
// 页面向前
goPrev(){
    let {
        pageCurr,
    } = this.state;

    if(--pageCurr === 0){
        return;
    }

    this.go(pageCurr)
}
// 页面向后
goNext(){
    let {
        pageCurr,
    } = this.state;

    const {
        totalPage,
    } = this.props.config;

    if(++pageCurr > totalPage){
        return;
    }
    this.go(pageCurr)
}
...

完成效果如图：

页码判断.gif

不显示所有的页码

由于我们的页码是动态生成的，并且前面我们一直将总页数（totalPage）设置为10，如果页码大于10时，我们是否该将这些页码全部展示呢？这样做显然是不可取的，因此这里我们定义一下分页的规则：

如果页码小于等于10，显示所有页码
如果页码大于10，省略一部分页码

文字总是苍白的，让我们用代码揭示这个世界：）
定义省略符的样式：

...
.ellipsis{
    border:none !important;
    margin:0 10px;
    cursor: default !important;
}

重写 create 方法，增加页码判断：

create(){
    const {
        totalPage,
    } = this.props.config;

    const {
        pageCurr,
    } = this.state;

    let pages = [];
    if( totalPage <= 10){
        pages.push(<li onClick = { this.goPrev.bind(this) } className = { this.state.pageCurr === 1? style.nomore:"" } key={0}>上一页</li>)
        for(let i = 1;i <= totalPage; i++){
            // 点击页码时调用 go 方法，根据 state 判断是否应用 active 样式
            pages.push(<li onClick = { this.go.bind(this,i) } className = { pageCurr === i ? style.active : "" } key={i}>{i}</li>)
        }
        pages.push(<li onClick = { this.goNext.bind(this) } className = { this.state.pageCurr === totalPage? style.nomore:"" } key={totalPage + 1}>下一页</li>)
    }else{
        pages.push(<li className = { this.state.pageCurr === 1? style.nomore:"" } key={ 0 } onClick = { this.goPrev.bind(this) }>上一页</li>)
        for(let i = 1;i <= 7;i ++){
            pages.push(<li className = { this.state.pageCurr === i? style.active:""} key={i} onClick = { this.go.bind(this,i) }>{i}</li>)
        }
        // 分页中间的省略号
        pages.push(<li className = { style.ellipsis } key={ -1 }>···</li>)
        // 倒数第一、第二页
        pages.push(<li className = { this.state.pageCurr === totalPage -1 ? style.active:""} key={ totalPage - 1 } onClick = { this.go.bind(this,totalPage - 1) }>{ totalPage -1 }</li>)
        pages.push(<li className = { this.state.pageCurr === totalPage ? style.active:""} key={ totalPage } onClick = { this.go.bind(this,totalPage) }>{ totalPage }</li>)
        // 下一页
        pages.push(<li className = { this.state.pageCurr === totalPage ? style.nomore:"" } key={ totalPage + 1 } onClick = { this.goNext.bind(this) }>下一页</li>)
    }
    return pages;
}

当总页数大于10条时，页码区域的显示方式是：

先显示7条页码
再显示省略符（···）
最后显示倒数两个页码

修改总页数（totalPage）为21，看看效果：

页码规则.gif

至此，页码规则就介绍到这里。我这里定义开头显示7个页码，纯属是自己的爱好，您也可以自行定义，甚至我们可以将其设置为一个变量（groupCount）并作为 config 的一个属性，用来动态控制。
这个分页还是不完善的，当点击到第7页再点击下一页时没有任何变化，我们将在下一篇文章解决这个问题。今天就先到这里，祝大家学习愉快。

完。

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

一步一步教你写 React 分页组件（三）

判断是否还有上一页/下一页

不显示所有的页码

猜你喜欢

热点阅读