未加星标

尝试自己动手用react来写一个分页组件(小结)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文介绍了尝试自己动手用react来写一个分页组件(小结),分享给大家,具体如下:

分页效果

在线预览

github地址

效果截图(样式可自行修改):

尝试自己动手用react来写一个分页组件(小结)

构建项目

create-react-app react-paging-component

分页组件

1.子组件

创建 Pagecomponent.js 文件

核心代码:

初始化值

constructor(props) {
super(props)
this.state = {
currentPage: 1, //当前页码
groupCount: 5, //页码分组,显示7个页码,其余用省略号显示
startPage: 1, //分组开始页码
totalPage:1 //总页数
}
}

动态生成页码函数

createPage() {
const {currentPage, groupCount, startPage,totalPage} = this.state;
let pages = []
//上一页
pages.push(<li className={currentPage === 1 ? "nomore" : null} onClick={this.prePageHandeler.bind(this)}key={0}>
上一页</li>)
if (totalPage <= 10) {
/*总页码小于等于10时,全部显示出来*/
for (let i = 1; i <= totalPage; i++) {
pages.push(<li key={i} onClick={this.pageClick.bind(this, i)} className={currentPage === i ? "activePage" : null}>{i}</li>)
}
} else {
/*总页码大于10时,部分显示*/
//第一页
pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1} onClick={this.pageClick.bind(this, 1)}>1</li>)
let pageLength = 0;
if (groupCount + startPage > totalPage) {
pageLength = totalPage
} else {
pageLength = groupCount + startPage;
}
//前面省略号(当当前页码比分组的页码大时显示省略号)
if (currentPage >= groupCount) {
pages.push(<li className="" key={-1}></li>)
}
//非第一页和最后一页显示
for (let i = startPage; i < pageLength; i++) {
if (i <= totalPage - 1 && i > 1) {
pages.push(<li className={currentPage === i ? "activePage" : null} key={i} onClick={this.pageClick.bind(this, i)}>{i}</li>)
}
}
//后面省略号
if (totalPage - startPage >= groupCount + 1) {
pages.push(<li className="" key={-2}></li>)
}
//最后一页
pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage} onClick={this.pageClick.bind(this, totalPage)}>{totalPage}</li>)
}
//下一页
pages.push(<li className={currentPage === totalPage ? "nomore" : null}onClick={this.nextPageHandeler.bind(this)}key={totalPage + 1}>下一页</li>)
return pages;
}

页码点击函数:

//页码点击
pageClick(currentPage) {
const {groupCount} = this.state
const getCurrentPage = this.props.pageCallbackFn;
//当 当前页码 大于 分组的页码 时,使 当前页 前面 显示 两个页码
if (currentPage >= groupCount) {
this.setState({
startPage: currentPage - 2,
})
}
if (currentPage < groupCount) {
this.setState({
startPage: 1,
})
}
//第一页时重新设置分组的起始页
if (currentPage === 1) {
this.setState({
startPage: 1,
})
}
this.setState({
currentPage
})
//将当前页码返回父组件
getCurrentPage(currentPage)
}

上一页和夏夜点击事件

//上一页事件
prePageHandeler() {
let {currentPage} = this.state
if (--currentPage === 0) {
return false
}
this.pageClick(currentPage)
}
//下一页事件
nextPageHandeler() {
let {currentPage,totalPage} = this.state
// const {totalPage} = this.props.pageConfig;
if (++currentPage > totalPage) {
return false
}
this.pageClick(currentPage)
}

组件渲染到DOM上

render() {
const pageList = this.createPage();
return (
<ul className="page-container">
{pageList}
</ul>
)
}

2.父组件

创建 Pagecontainer.js 文件

父组件完整代码

import React, {Component} from 'react'
import Pagecomponent from '../components/Pagecomponent'
import data from '../mock/tsconfig.json'
class Pagecontainer extends Component {
constructor() {
super()
this.state = {
dataList:[],
pageConfig: {
totalPage: data.length //总页码
}
}
this.getCurrentPage = this.getCurrentPage.bind(this)
}
getCurrentPage(currentPage) {
this.setState({
dataList:data[currentPage-1].name
})
}
render() {
return (
<div>
<div>
{this.state.dataList}
</div>
<Pagecomponent pageConfig={this.state.pageConfig} pageCallbackFn={this.getCurrentPage}/>
</div>
)
}
}
export default Pagecontainer
至此一个分页组件就开发完了,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:Reactjs实现通用分页组件的实例代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React
tags: gt,lt,currentPage,totalPage,li,页码,pages,startPage,groupCount,className,state,push,key
分页:12
转载请注明
本文标题:尝试自己动手用react来写一个分页组件(小结)
本站链接:http://www.codesec.net/view/572567.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(17)