尝试自己动手用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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
js性能优化技巧
2015/11/29 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
详解Python的单元测试
2015/04/28 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
浅析Python函数式编程
2018/10/06 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python中while和for的区别总结
2019/06/28 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
依法行政工作汇报材料
2014/10/28 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书