react封装翻页插件

插件演示

今天用react封装一个翻页插件，先给大家看一下效果：
翻页插件上面的文字是从后台获取的。

插件说明

这个插件有五部分组成：首页、上一页、中间显示数字、下一页、尾页。具体的功能是：如果当前页面是第一页，那么首页和上一页就不能点击，下一页和尾页也是如此。

插件原理

接下来就是怎么写这个插件。在这里我是用的react封装的，本篇文章就先解释原理，具体代码我会附上链接。
那么，该如何下手呢，首先写出首页和下一页，这两个最简单，下一页和尾页也是如此，给每一个按钮都绑定一个click事件，根据点击的页码数字来进行动态渲染，相对难写的是中间部分的数字。在这里我们让它只显示五个数字，那么这五个数字怎么确定呢？从上图可以看出，如果我们当前页是第三页，前面两个数字分别是1、2，后面两个数字是4、5，这样可以计算出具体数字：根据当前页数字减去一共显示的页码数量除2，向下取整，得到的就是第一个页码，最大页码是用最小页码加上总的显示页码数量减去1，然后在for循环里动态生成按钮放入numbers，在页面上渲染即可，部分代码如下，总的代码在码云上，因为github的账号密码忘了，比较尴尬。码云地址：https://gitee.com/cao_hong_yu/general_page_flipping_plugin

export default function page(props) {
    let pageNum = pageNumebr(props);
    if(pageNum === 0){
        return null;
    }
    let min = minPageNumber(props);
    let max = maxPageNumber(min, pageNum, props);
    let numbers = [];
    for(let i = min; i <= max; i++){
    numbers.push(<span className={props.current === i ? 'item active' : 'item'} key={i} onClick={() => { toPage(i, props) }} >{i}</span>)
    }
    return (
        <>
        <span className={props.current === 1 ? 'item disabled' : 'item'} onClick={() => {toPage(1, props)}} >首页</span>
        <span className={props.current === 1 ? 'item disabled' : 'item'} onClick={() => {toPage(props.current - 1, props)}} >上一页</span>

        {numbers}

        <span className={props.current === pageNum ? 'item disabled' : 'item'} onClick={() => {toPage(props.current + 1, props)}} >下一页</span>
        <span className={props.current === pageNum ? 'item disabled' : 'item'} onClick={() => {toPage(pageNum, props)}} >尾页</span>
       <span>{props.current}</span> / <span>{pageNum}</span>
        </>
    )
}
//求最小的页数
function minPageNumber(props){
    let min = props.current - Math.floor(props.panelNumber / 2);
    if(min <= 0){
        min = 1;
    }
    return min;
}

//求最大的页数
function maxPageNumber(min, pageNum, props){
    let max = min + props.panelNumber - 1;
    if(max > pageNum){
        max = pageNum;
    }
    return max;
}
//总页数
function pageNumebr(props){
    return Math.ceil(props.total / props.limit);
}

//跳转页面

function toPage(target, props){
    if(target === props.current){
        return; //目标页与跳转页相同
    }
    if(target > pageNumebr(props)){
        target = pageNumebr(props)
        return;
    }
    if(target < 1){
        target = 1;
        return;
    }
	//翻页控制中传递target进行动态渲染
    props.onChangePage&&props.onChangePage(target);
}