- 此分页组件已发布至NPM，欢迎下载并提意见
上篇文章主要处理了 startPage，也就是前7个页码从哪里开始的问题。本文将在前面的基础上做一些细节的优化，主要是：
- 处理省略符的问题
- 点击最后两页的问题
- 实现自定义 select
解决这三个问题，我们的分页就算基本完成了。
处理省略符
省略符的问题比较简单，只需在原有的基础上增加一个条件判断。修改 create 方法：
...
// 分页中间的省略符
if(totalPage - startPage >= 9){
pages.push(<li className = { style.ellipsis } key={ -1 }>···</li>)
}
...
这样一来，当页面上的页码数目小于10个时，就不添加省略符。效果如图：
点击最后两页
我们想在点击最后两页时，也进行响应，最好是点击后把其前面的几页也显示出来。
当前的效果是：点击第20页没反应，点击第21页显示了其前面的几页，这是因为21刚好为7的倍数，在点击后重新计算了startPage（请参考前一篇文章）。这是偶然因素，实际情况下不可能这么巧合，因此我们需要针对最后两页再做单独的处理。
在 go 方法中增加判断：
...
// 更新 state
go(pageCurr){
const {
groupCount
} = this.state;
// 获取总页数
const {
totalPage
} = this.props.config
// 处理上一页的情况
...
// 处理下一页的情况
...
// 点击最后两页时重新计算 startPage
if(totalPage - pageCurr < 2){
this.setState({
startPage:totalPage - groupCount,
})
}
this.setState({
pageCurr
});
}
...
修改 create 方法，主要是修正组件 key 值的问题：
...
for(let i = startPage;i < groupCount + startPage;i ++){
if(i <= totalPage - 2){
pages.push(<li className = { this.state.pageCurr === i? style.active:""} key={i} onClick = { this.go.bind(this,i) }>{i}</li>)
}
}
...
至此，页码部分基本处理完毕，下面是完成效果：
趁热打铁
页码部分基本算是写完了，虽然在体验上还有需要优化的地方，但基本的使用应该是可以了。下面我们趁热打铁，完成左边的自定义 select。
修改 render 方法：
...
render(){
const Pages = this.create.bind(this)();
return(
<div className = { style.main }>
<div className = { style.bar }>
<span>每页显示</span>
<div className = { style.select }>
<ul>
<li id="pageCount">10</li>
<li>10</li>
<li>20</li>
<li>30</li>
<li>50</li>
</ul>
</div>
</div>
<ul className = { style.page }>
{ Pages }
</ul>
</div>
);
}
...
增加样式：
...
// 下拉菜单
.bar{
display: flex;
justify-content:space-between;
align-items:flex-start;
color:#666;
span{
font-size: 12px;
}
}
.select{
width:48px;
height:calc(6 * 22px);
background: #fff;
margin-left:10px;
ul{
height:100%;
display: flex;
flex-direction:column;
justify-content:space-between;
list-style: none;
border:1px solid #e6e6e6;
padding:0;
margin:0;
li{
padding:3px 0;
padding-left:5px;
&:hover{
background: #54b0bd;
}
&:first-of-type{
border-bottom:1px solid #e6e6e6;
position: relative;
&::after{
content:"";
display: block;
width:7px;
height:25px;
background: url("./imgs/dropdown.png") no-repeat center center;
position: absolute;
top:0;
right:5px;
}
}
}
}
}
// 收起状态
ul.hide{
height:24px;
overflow: hidden;
li{
&:nth-of-type(n+2){
display: none;
}
}
}
效果如图：
若我们给 ul 应用 .hide 样式，就可以将其收起。
添加点击事件
处理页面点击事件，点击空白处收起 ul，我们可以在 componentDidMount 后添加点击事件：
...
componentDidMount() {
this.setState({
pageCountEle:document.querySelector("#pageCount"),
});
setTimeout(()=>{
document.addEventListener("click",(e)=>{
if(e.target.id !== "pageCount"){
this.state.pageCountEle.parentNode.className = style.hide;
}
},false);
},0)
}
...
使用 setTimeout 的原因是因为 state 并不保证是及时更新的，因此我们需要将一些操作放在异步队列中执行。下面的代码中还会看到这种用法。
题外话：setState 是异步方法，其还可以接受一个函数作为参数，用来在完成 state 设置后回调。
增加 choosePageCount 方法，用来展开 ul：
...
choosePageCount(e){
const parentUI = this.state.pageCountEle.parentNode;
parentUI.className = (parentUI.className === style.hide)?"":style.hide;
}
...
增加 confirmPageCount 方法，在选择分页条数后进行处理。
...
confirmPageCount(pageCount){
const {
pageCountEle,
pageCurr,
} = this.state;
// 设置每页显示条数
this.setState({
pageCount
});
pageCountEle.innerHTML = pageCount;
pageCountEle.parentNode.className = style.hide;
setTimeout(()=>{
this.go(pageCurr, true);
},0);
}
...
注意：选择每页显示条数后将重置当前页码（pageCurr）至第1页，因此我们还需要对 go 方法再做一些修改：
...
// 更新 state
go(pageCurr,reset = false){
...
// 处理上一页的情况
...
// 处理下一页的情况
...
// 点击最后两页时重新计算 startPage
...
// 选择每页条数后重新分页
if(reset === true){
this.setState({
pageCurr:1,
startPage:1,
});
}
}
...
最后，修改 render 方法，增加事件处理：
...
render(){
const Pages = this.create.bind(this)();
return(
<div className = { style.main }>
<div className = { style.bar }>
<span>每页显示</span>
<div className = { style.select }>
<ul className = { style.hide }>
<li id="pageCount" onClick = { this.choosePageCount.bind(this) }>10</li>
<li onClick = { this.confirmPageCount.bind(this,10) }>10</li>
<li onClick = { this.confirmPageCount.bind(this,20) }>20</li>
<li onClick = { this.confirmPageCount.bind(this,30) }>30</li>
<li onClick = { this.confirmPageCount.bind(this,50) }>50</li>
</ul>
</div>
</div>
<ul className = { style.page }>
{ Pages }
</ul>
</div>
);
}
...
至此，整个分页效果就完成了，下面是最终效果：
从效果上来说，我们的分页组件已经写完了，是不是有点小小的成就感呢？那就赶快试一试吧！
再接下来就是处理实际问题了——与后端交互，获取数据。我将在下一篇文章为大家进行介绍。
完。
一步一步教你写 React 分页组件（一）
一步一步教你写 React 分页组件（二）
一步一步教你写 React 分页组件（三）
一步一步教你写 React 分页组件（四）
一步一步教你写 React 分页组件（五）
一步一步教你写 React 分页组件（六）
