- 此分頁組件已發(fā)布至NPM，歡迎下載并提意見
上篇文章已經(jīng)初步實現(xiàn)了分頁省略的功能，本文將繼續(xù)增加功能穗熬。
設置 groupCount
為了方便管理，我們增加一個名為 groupCount 的 state丁溅，用來表示省略符前面的數(shù)據(jù)條數(shù)唤蔗，默認為7條。
...
constructor(props){
super(props)
// 設置當前頁碼窟赏，默認為第一頁
this.state = {
pageCurr:1,
groupCount:7,
}
}
...
設置 startPage
分頁的規(guī)則是：
- 先顯示 1-7妓柜，再顯示省略符，最后顯示倒數(shù)的兩個頁碼
- 先顯示 8-14涯穷，再顯示省略符棍掐，最后顯示倒數(shù)的兩個頁碼
- 以此類推
要完成這樣的功能，我們需要一個變量來表示最開頭的頁碼（startPage）拷况，然后分頁規(guī)則就是：
- 顯示從 startPage 開始的7個頁碼
- 顯示省略符
- 顯示倒數(shù)兩個頁碼
設置一個為 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 個頁碼 ...
動態(tài)改變 startPage
接下來鹰服，我們就可以根據(jù)當前頁碼（pageCurr）來動態(tài)改變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 的值來動態(tài)更新 startPage仍源，這種算法請大家細細體會心褐。
下面是效果圖：
至此舔涎，頁碼部分已經(jīng)初具雛形了，當然還有許多需要優(yōu)化的地方逗爹。比如點擊到最后一頁時亡嫌，省略符仍然顯示，點擊最后兩頁時效果怪怪的等掘而。這部分的內(nèi)容將在后續(xù)的文章繼續(xù)優(yōu)化挟冠，本文就先寫到這里。
完袍睡。
一步一步教你寫 React 分頁組件（一）
一步一步教你寫 React 分頁組件（二）
一步一步教你寫 React 分頁組件（三）
一步一步教你寫 React 分頁組件（四）
一步一步教你寫 React 分頁組件（五）
一步一步教你寫 React 分頁組件（六）
