使用react实现分页组件

本篇文章主要介绍了尝试自己动手用react来写一个分页组件(小结)，现在分享给大家，也给大家做个参考。

本文介绍了尝试自己动手用react来写一个分页组件(小结)，分享给大家，具体如下：

分页效果

在线预览

github地址

效果截图（样式可自行修改）：

构建项目

create-react-app react-paging-component

分页组件

1.子组件

创建 Pagecomponent.js 文件

核心代码：

初始化值

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

动态生成页码函数

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

下载

createPage() {
    const {currentPage, groupCount, startPage,totalPage} = this.state;
    let pages = []
    //上一页
    pages.push(

      上一页
)

    if (totalPage <= 10) {
      /*总页码小于等于10时，全部显示出来*/
      for (let i = 1; i <= totalPage; i++) {
        pages.push(
{i}
)
      }
    } else {
      /*总页码大于10时，部分显示*/

      //第一页
      pages.push(
1
)

      let pageLength = 0;
      if (groupCount + startPage > totalPage) {
        pageLength = totalPage
      } else {
        pageLength = groupCount + startPage;
      }
      //前面省略号(当当前页码比分组的页码大时显示省略号)
      if (currentPage >= groupCount) {
        pages.push(
···
)
      }
      //非第一页和最后一页显示
      for (let i = startPage; i < pageLength; i++) {
        if (i <= totalPage - 1 && i > 1) {
          pages.push(
{i}
)
        }
      }
      //后面省略号
      if (totalPage - startPage >= groupCount + 1) {
        pages.push(
···
)
      }
      //最后一页
      pages.push(
{totalPage}
)
    }
    //下一页
    pages.push(
下一页
)
    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 (
      

        {pageList}
      
    )
  }

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 (
      

        

          {this.state.dataList}
        
        
      


    )
  }
}
export default Pagecontainer

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue2.0系列中如何使用过滤器？

在vue项目中通过tween方法如何实现返回顶部

使用vue如何判断input输入内容全是空格？