本篇文章给大家带来的内容是关于简单的分页组件(react)实现的一个分页的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
简单的分页组件
...由于工作原因, 写过一段vue, 现在入手jquery.自己是战五渣选手,为了巩固之前学过的react,特意用react来实现,其实想用jquery。 github L6zt
代码效果如图:
思路:
组件基本属性:
cur 当前页码,
all 总页码
space 页面显示数量 +1 才是 总数量
组件整体状态
1、与首页相连, cur < space 基本满足
2、中间状态,cur > space && cur < all - space
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中文网其它相关文章!
已抢61934个
抢已抢110637个
抢已抢133276个
抢已抢32067个
抢已抢19349个
抢