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


Posted in Javascript onFebruary 09, 2018

本文介绍了尝试自己动手用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

至此一个分页组件就开发完了,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
用js编写留言板
Mar 17 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
在 React、Vue项目中使用SVG的方法
Feb 09 #Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 #Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 #Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
vue二级路由设置方法
Feb 09 #Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
PHP实现简易图形计算器
2020/08/28 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
库房主管岗位职责
2013/12/31 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
赡养老人协议书范本
2015/08/06 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server