尝试自己动手用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 相关文章推荐
Js基础学习资料
Nov 23 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
在 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
读jQuery之三(构建选择器)
2011/06/11 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python显示进度条的方法
2014/09/20 Python
Python实现的矩阵类实例
2017/08/22 Python
深入浅出学习python装饰器
2017/09/29 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
PHP笔试题
2012/02/22 面试题
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
顺丰快递Java软件工程师面试题
2015/07/31 面试题
团日活动总结书
2014/05/08 职场文书
军事理论课感想
2015/08/11 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
python基础入门之普通操作与函数(三)
2021/06/13 Python
python 实现图片特效处理
2022/04/03 Python