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

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

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

分页效果

在线预览

github地址

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

构建项目

分页组件

1.子组件

创建 Pagecomponent.js 文件

核心代码

初始化值

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

动态生成页码函数

上一页 pages.push(
  • 上一页
  • )
    1. if (totalPage <= 10) {
    2. /*总<a href="/tag/yema/" target="_blank" class="keywords">页码</a>小于等于10时,全部<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>出来*/
    3. for (let i = 1; i <= totalPage; i++) {
    4. pages.push(<li key={i} onClick={this.pageClick.bind(this,i)}
    5. className={currentPage === i ? "activePage" : null}>{i}</li>)
    6. }
    7. } else {
    8. /*总<a href="/tag/yema/" target="_blank" class="keywords">页码</a>大于10时,部分<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>*/
    9. //第一页
    10. pages.push(<li className={currentPage === 1 ? "activePage" : null} key={1}
    11. onClick={this.pageClick.bind(this,1)}>1</li>)
    12. let pageLength = 0;
    13. if (groupCount + startPage > totalPage) {
    14. pageLength = totalPage
    15. } else {
    16. pageLength = groupCount + startPage;
    17. }
    18. //前面省略号(当当前<a href="/tag/yema/" target="_blank" class="keywords">页码</a>比分组的<a href="/tag/yema/" target="_blank" class="keywords">页码</a>大时<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>省略号)
    19. if (currentPage >= groupCount) {
    20. pages.push(<li className="" key={-1}>···</li>)
    21. }
    22. //非第一页和最后一页<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>
    23. for (let i = startPage; i < pageLength; i++) {
    24. if (i <= totalPage - 1 && i > 1) {
    25. pages.push(<li className={currentPage === i ? "activePage" : null} key={i}
    26. onClick={this.pageClick.bind(this,i)}>{i}</li>)
    27. }
    28. }
    29. //后面省略号
    30. if (totalPage - startPage >= groupCount + 1) {
    31. pages.push(<li className="" key={-2}>···</li>)
    32. }
    33. //最后一页
    34. pages.push(<li className={currentPage === totalPage ? "activePage" : null} key={totalPage}
    35. onClick={this.pageClick.bind(this,totalPage)}>{totalPage}</li>)
    36. }
    37. //<a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a>
    38. pages.push(<li className={currentPage === totalPage ? "nomore" : null}
    39. onClick={this.nextPageHandeler.bind(this)}
    40. key={totalPage + 1}><a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a></li>)
    41. 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}
    1. )

    }
    }
    export default Pagecontainer

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

    猜你在找的JavaScript相关文章