尝试自己动手用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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 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
php中apc缓存使用示例
2013/12/25 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
详解python编译器和解释器的区别
2019/06/24 Python
Python 画出来六维图
2019/07/26 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Python tcp传输代码实例解析
2020/03/18 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
大四自我鉴定范文
2013/10/06 职场文书
艺术教育实施方案
2014/05/03 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
幼师个人总结范文
2015/02/28 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书