插件演示
今天用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);
}