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

前端之家收集整理的这篇文章主要介绍了尝试自己动手用react来写一个分页组件(小结)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

分页效果

在线预览

github地址

效果截图(样式可自行修改):

构建项目

分页组件

1.子组件

创建 Pagecomponent.js 文件

核心代码

初始化值

页码 groupCount: 5,//页码分组,显示7个页码,其余用省略号显示 startPage: 1,//分组开始页码 totalPage:1 //总页数 } }

动态生成页码函数

上一页 pages.push(
  • 上一页
  • )
    if (totalPage <= 10) {
      /*总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>小于等于10时,全部<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>出来*/
      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 {
      /*总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>大于10时,部分<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>*/
    
      //第一页
      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;
      }
      //前面省略号(当当前<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>比分组的<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>大时<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>省略号)
      if (currentPage >= groupCount) {
        pages.push(<li className="" key={-1}>···</li>)
      }
      //非第一页和最后一页<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
      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>)
    }
    //<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a>
    pages.push(<li className={currentPage === totalPage ? "nomore" : null}
            onClick={this.nextPageHandeler.bind(this)}
            key={totalPage + 1}><a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a></li>)
    return pages;

    }

    页码点击函数:

    = 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) }

    上一页和夏夜点击事件

    //下一页事件
    nextPageHandeler() {
    let {currentPage,totalPage} = this.state
    // const {totalPage} = this.props.pageConfig;
    if (++currentPage > totalPage) {
    return false
    }
    this.pageClick(currentPage)
    }

    组件渲染到DOM上

    ) }

    2.父组件

    创建 Pagecontainer.js 文件

    父组件完整代码

    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

    至此一个分页组件就开发完了,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/33754.html

    猜你在找的JavaScript相关文章