百度分页栏效果

该文章描述了一种百度分页栏的实现方式,根据用户点击的页码动态调整显示的页码范围。如果在前5页,显示1-10页;如果点击页码大于5,显示当前页码左右各5页;若接近最后页,展示离末尾10页。代码中使用了JavaScript进行计算,并确保页码范围在总页数内。
摘要由CSDN通过智能技术生成

百度分页栏,前5后4
设置分页栏开始位置start ,结束位置end
1、当点击前面1-5页,展示的是1-10页页码,即start = 1 ,end = 10;
在这里插入图片描述
2、当点击大于5页页码时,分页栏展示的页码与当前页码相关,当前页码(currentPage)左边展示5页,即start = currentPage - 5,右边展示4页,即end = currentPage + 4,总页数为10
在这里插入图片描述
3、当点击页码到最后总页数之间少于4页,则从最后一页往前展示10页,即end = 总页数,start = end - 10;
在这里插入图片描述
总的实现代码

//JavaScript代码
		start = currentPage - 5;
                end = currentPage + 4;
                if(totalPage <= 10){
                    //如果分页总页数小于10则全部展示
                    start = 1;
                    end = data.totalPage;
                }else{
                    if(start <= 0){
                        //如果是1-6页
                        start = 1;
                        end = 10;
                    }
                    if(end > data.totalPage){
                        end = data.totalPage;
                        start = end - 9;
                    }
                }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值