- 此分页组件已发布至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 分页组件(六)
网友评论