本篇文章帶給大家的內容是關於簡單的分頁元件(react)實現的一個分頁的效果(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
簡單的分頁組件
...由於工作原因, 寫過一段vue, 現在入手jquery.自己是戰五渣選手,為了鞏固之前學過的react,特意用react來實現,其實想用jquery。 github L6zt
程式碼效果如圖:
想法:
元件基本屬性:
cur 目前頁碼,
all 總頁碼
space 頁面顯示數量1 才是總數
元件整體狀態
2、中間狀態,cur > space && cur
3、與結尾相連,cur > all - space
react 基本操作子元件Pagination 透過props 更新狀態, 和state無關。
show code
// 判断 是不是数字 const isNumber = (num) => { return typeof num === 'number'; } class Pagination extends React.Component { constructor (props) { super(props); } // 点击回调事件 handleClick (item) { // 父组件回调事件 this.props.cb(item); } render () { let {cur, space, all} = this.props; let pgObj = []; // 给不同的元素 赋值class const checkClass = (role, active) => { const defaultClass = 'pg-span'; if (active) { return `${defaultClass} active` } switch (role) { case 0: { return `${defaultClass}` } case 1: { return `${defaultClass}` } default: { } } } // 初始检查 if (all < space) { all = space } if (cur <= 0) { cur = 0 } if (cur >= all) { cur = all } // 阶段判断 if (cur < space) { if (space === all) { for (let i = 1; i <= space; i++) { pgObj.push({ page: i, role: 0, key: i }) } } else { for (let i = 1; i <= space; i ++) { pgObj.push({ page: i, role: 0, key: i }) } pgObj.push({ page: '...', role: 1, key: 'next' }) pgObj.push({ page: all, role: 0, key: all }) } } else if (cur >= space && cur <= all - space + 1) { let odd = parseInt(space / 2); pgObj.push({ page: 1, role: 0, key: 1 }); pgObj.push({ page: '...', role: 1, key: 'pre' }); for (let i = cur - odd; i <= cur + odd ; i ++) { pgObj.push({ page: i, role: 1, key: i }) } pgObj.push({ page: '...', role: 1, key: 'next' }); pgObj.push({ page: all, role: 1, key: all }) } else { pgObj.push({ page: 1, role: 0, key: 1 }); pgObj.push({ page: '...', role: 1, key: 'pre' }); for (let i = all - space + 1; i <= all; i ++) { pgObj.push({ page: i, role: 0, key: i }) }; } return ( <section> { pgObj.map(item => (<span key={item.key} className={checkClass(item.role, item.page === cur)} onClick={() => {this.handleClick(item)}} > {item.page} </span>)) } </section> ) } } class Root extends React.Component { constructor (props) { super(props); this.state = { cur: 1 }; this.handlePagination = this.handlePagination.bind(this); } handlePagination (item) { const {page} = item; if (isNumber(page)) { this.setState({ cur: page }) } } render() { let {cur} = this.state; console.log(cur); return ( <p> <Pagination cur={cur} all={100} space={8} cb={this.handlePagination} /> </p> ) } }; ReactDOM.render( <Root></Root>, document.getElementById('root') );相關推薦:
分享一個自己寫的簡單的javascript分頁元件_javascript技巧#
以上是簡單的分頁元件(react)實現的一個分頁的效果(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!