美文网首页React
一步一步教你写 React 分页组件(三)

一步一步教你写 React 分页组件(三)

作者: 柏丘君 | 来源:发表于2017-05-10 22:11 被阅读463次
    • 此分页组件已发布至NPM,欢迎下载并提意见

    上篇文章完成了页码切换的功能,本文将在此基础上进行更多的处理。

    判断是否还有上一页/下一页

    判断是否还有上一页/下一页的方法:

    • 如果当前页码为1(pageCurr),则没有上一页
    • 如果当前页码为总页码(totalPage),则没有下一页

    增加一个样式,在没有上一页/下一页时应用:

    ...
    .nomore{
        color:#b5b5b5 !important;
    }
    

    create 方法中进行当前页码判断,并应用样式:

    ...
    create(){
        ...
        pages.push(<li onClick = { this.goPrev.bind(this) } className = { this.state.pageCurr === 1? style.nomore:"" } key={0}>上一页</li>)
        ...
        pages.push(<li onClick = { this.goNext.bind(this) } className = { this.state.pageCurr === totalPage? style.nomore:"" } key={totalPage + 1}>下一页</li>)
    ...
    }
    ...
    

    修改 goPrev 和 goNext 方法,处理页码越界操作:

    ...
    // 页面向前
    goPrev(){
        let {
            pageCurr,
        } = this.state;
    
        if(--pageCurr === 0){
            return;
        }
    
        this.go(pageCurr)
    }
    // 页面向后
    goNext(){
        let {
            pageCurr,
        } = this.state;
    
        const {
            totalPage,
        } = this.props.config;
    
        if(++pageCurr > totalPage){
            return;
        }
        this.go(pageCurr)
    }
    ...
    

    完成效果如图:

    页码判断.gif

    不显示所有的页码

    由于我们的页码是动态生成的,并且前面我们一直将总页数(totalPage)设置为10,如果页码大于10时,我们是否该将这些页码全部展示呢?这样做显然是不可取的,因此这里我们定义一下分页的规则:

    • 如果页码小于等于10,显示所有页码
    • 如果页码大于10,省略一部分页码

    文字总是苍白的,让我们用代码揭示这个世界:)
    定义省略符的样式:

    ...
    .ellipsis{
        border:none !important;
        margin:0 10px;
        cursor: default !important;
    }
    

    重写 create 方法,增加页码判断:

    create(){
        const {
            totalPage,
        } = this.props.config;
    
        const {
            pageCurr,
        } = this.state;
    
        let pages = [];
        if( totalPage <= 10){
            pages.push(<li onClick = { this.goPrev.bind(this) } className = { this.state.pageCurr === 1? style.nomore:"" } key={0}>上一页</li>)
            for(let i = 1;i <= totalPage; i++){
                // 点击页码时调用 go 方法,根据 state 判断是否应用 active 样式
                pages.push(<li onClick = { this.go.bind(this,i) } className = { pageCurr === i ? style.active : "" } key={i}>{i}</li>)
            }
            pages.push(<li onClick = { this.goNext.bind(this) } className = { this.state.pageCurr === totalPage? style.nomore:"" } key={totalPage + 1}>下一页</li>)
        }else{
            pages.push(<li className = { this.state.pageCurr === 1? style.nomore:"" } key={ 0 } onClick = { this.goPrev.bind(this) }>上一页</li>)
            for(let i = 1;i <= 7;i ++){
                pages.push(<li className = { this.state.pageCurr === i? style.active:""} key={i} onClick = { this.go.bind(this,i) }>{i}</li>)
            }
            // 分页中间的省略号
            pages.push(<li className = { style.ellipsis } key={ -1 }>···</li>)
            // 倒数第一、第二页
            pages.push(<li className = { this.state.pageCurr === totalPage -1 ? style.active:""} key={ totalPage - 1 } onClick = { this.go.bind(this,totalPage - 1) }>{ totalPage -1 }</li>)
            pages.push(<li className = { this.state.pageCurr === totalPage ? style.active:""} key={ totalPage } onClick = { this.go.bind(this,totalPage) }>{ totalPage }</li>)
            // 下一页
            pages.push(<li className = { this.state.pageCurr === totalPage ? style.nomore:"" } key={ totalPage + 1 } onClick = { this.goNext.bind(this) }>下一页</li>)
        }
        return pages;
    }
    

    当总页数大于10条时,页码区域的显示方式是:

    • 先显示7条页码
    • 再显示省略符(···)
    • 最后显示倒数两个页码

    修改总页数(totalPage)为21,看看效果:

    页码规则.gif

    至此,页码规则就介绍到这里。我这里定义开头显示7个页码,纯属是自己的爱好,您也可以自行定义,甚至我们可以将其设置为一个变量(groupCount)并作为 config 的一个属性,用来动态控制。
    这个分页还是不完善的,当点击到第7页再点击下一页时没有任何变化,我们将在下一篇文章解决这个问题。今天就先到这里,祝大家学习愉快。

    完。

    一步一步教你写 React 分页组件(一)
    一步一步教你写 React 分页组件(二)
    一步一步教你写 React 分页组件(三)
    一步一步教你写 React 分页组件(四)
    一步一步教你写 React 分页组件(五)
    一步一步教你写 React 分页组件(六)

    相关文章

      网友评论

        本文标题:一步一步教你写 React 分页组件(三)

        本文链接:https://www.haomeiwen.com/subject/vlqntxtx.html