由于项目需要,到网上找了一下,却发现都是过于复杂,没有合适的。所以只能自行写尝试着写了一个。
具体要求:
一、参数只传总页数,当前页码,回调方法。
二、选择页码后回调选中的页码,并高亮显示。
三、如果当前页码为第一页,则没有【上一页】,如果当前页为最后一页则没有【下一页】
四、总页码小于等于10时,把全部页码显示出来
五、如总页码数大于10时,显示省略页码
大体效果如图:
下面放上源码:
page.scss
1 /*css -scss/less */ 2 .g-page { 3 display: inline-block; 4 *display: inline; 5 *zoom: 1; 6 vertical-align: middle; 7 margin: 10px 0; 8 font-size: 0; 9 10 li { 11 display: inline-block; 12 *display: inline; 13 *zoom: 1; 14 vertical-align: middle; 15 padding: 0 15px; 16 height: 28px; 17 line-height: 28px; 18 margin: 0 -1px 5px 0; 19 background-color: #fff; 20 color: #333; 21 font-size: 12px; 22 border: 1px solid #e2e2e2; 23 cursor: pointer; 24 &:hover{ 25 color: #009688; 26 } 27 } 28 .activePage{ 29 background-color: #009688; 30 color: #fff; 31 &:hover{ 32 color: #fff; 33 } 34 } 35 }
Pagecomponent.js
1 import React, { Component } from 'react' 2 import './page.scss'; 3 export default class Pagecomponent extends Component { 4 constructor(props) { 5 super(props) 6 this.state = { 7 currentPage: 1, //当前页码 8 groupCount: 5, //页码分组,显示7个页码,其余用省略号显示 9 startPage: 1, //分组开始页码 10 totalPage: 1 //总页数 11 } 12 } 13 // 点击页码 14 pageClick(currentPage) { 15 const { groupCount } = this.state 16 const getCurrentPage = this.props.pageCallbackFn; 17 //当 当前页码 大于 分组的页码 时,使 当前页 前面 显示 两个页码 18 let startPage = currentPage >= groupCount ? currentPage - 2: 1 19 this.setState({ 20 startPage, 21 currentPage 22 }) 23 //将当前页码返回父组件 24 getCurrentPage(currentPage) 25 } 26 //上一页事件 27 prePageHandeler() { 28 let { currentPage } = this.state 29 this.pageClick(--currentPage) 30 } 31 //下一页事件 32 nextPageHandeler() { 33 let { currentPage } = this.state 34 this.pageClick(++currentPage) 35 } 36 // 获取从父组件传来的总页数与当前页数 37 componentDidMount(){ 38 this.setState({ 39 currentPage:this.props.currentPage, 40 totalPage:this.props.totalPage 41 }) 42 } 43 render() { 44 const {groupCount, startPage,currentPage, totalPage} = this.state; 45 let pages = [] 46 47 // 如果当前面不是第一页 则添加上一页 48 if(currentPage!==1){ 49 pages.push(<li onClick={this.prePageHandeler.bind(this)} key={0}> 上一页</li>) 50 } 51 52 /*总页码小于等于10时,全部显示出来*/ 53 if (totalPage <= 10) { 54 for (let i = 1; i <= totalPage; i++) { 55 pages.push(<li key={i} onClick={this.pageClick.bind(this, i)} 56 className={currentPage === i ? "activePage" : null}>{i}</li>) 57 } 58 } else {/*总页码大于10时,部分显示*/ 59 60 //第一页 61 pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1} 62 onClick={this.pageClick.bind(this, 1)}>1</li>) 63 64 //前面省略号(当当前页码比分组的页码大时显示省略号) 65 if (currentPage >= groupCount) { 66 pages.push(<li className="" key={-1}>···</li>) 67 } 68 //非第一页和最后一页显示 69 for (let i = currentPage-2; i < currentPage+3; i++) { 70 if (i <= totalPage - 1 && i > 1) { 71 pages.push(<li className={currentPage === i ? "activePage" : null} key={i} 72 onClick={this.pageClick.bind(this, i)}>{i}</li>) 73 } 74 } 75 //后面省略号 76 if (totalPage - startPage >= groupCount + 1) { 77 pages.push(<li className="" key={-2}>···</li>) 78 } 79 //最后一页 80 pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage} 81 onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>) 82 } 83 84 //如果当前面不是最后一页 则添加下一页 85 if(currentPage!==totalPage){ 86 pages.push(<li onClick={this.nextPageHandeler.bind(this)} key={totalPage + 1}>下一页</li>) 87 } 88 return ( 89 <ul className="g-page"> 90 { pages} 91 </ul> 92 ) 93 } 94 }
组件调用 核心代码
getCurrentPage(currentPage) { console.log('currentPage', currentPage) } <Pagecomponent pageCallbackFn={this.getCurrentPage.bind(this)} totalPage={20} currentPage={5}></Pagecomponent>
到这,分页组件就差不多写好了,能用了 。当然还不够严谨,像还没对传的参数进行校验。有兴趣的朋友可以自己加上去