- 此分页组件已发布至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 分页组件（六）
