仿谷歌,百度查询页面技术实现分页分析

分页 (pagination) 一种自动分页机制,可以将移动 Web 窗体中的内容分割成一组组较小的页进行呈现,以适合于特定的设备。该机制还呈现可用于浏览到其他页的用户界面元素.在整个的web开发应用中分页是必会的知识点。应该熟练掌握与运用。
在实际开发的应用中,分页显的尤为重要,现将baidu,google查询分页显示的页面及分页效果分析如下:
1 、baidu搜索观察分页效果如下:
2 、Google搜索分页效果实现如下:
分析流程结构:

页面显示的页码
当前页
末页
分析
1 2 3 4 5 6 7 8 9 10 下一页
1
10
10=1+9
分析1:当总页数小于11时,
       页面索引起始值=1;
       页面索引最终值=总页数;
上一页 1 2 3 4 5 6 7 8 9 10 11 下一页
2
11
11=2+9
上一页 1 2 3 … … 9 10 11 12 下一页
3
12
12=3+9
上一页 1 2 3 … …10 11 12 13 下一页
4
13
13=4+9
上一页 1 2 3 … …11 12 13 14 下一页
5
14
14=5+9
上一页 1 2 3 … …12 13 14 15 下一页
6
15
15=6+9
上一页 1 2 3 … …13 14 15 16 下一页
7
16
16=7+9
上一页 1 2 3 … …16 17 18 20 下一页
11
20
20=11+9
注意观察
上一页 2 3 4 … …18 29 20 21 下一页
12
21
2=12-10 21=12+9
上一页 3 4 5 … …19 20 21 22 下一页
13
22
3=13-10 22=13+9
上一页 4 5 6 … … 20 21 22 23 下一页
14
23
4=14-10 23=13+9
分析2:当 总页数大于 11页面上显示的总共页码为20,其中以上观察可知:
      页面索引起始值=当前页-10;
      页面索引最终值=当前页+9;
注意:当页面的 索引最终值大于查询的总页数时,那么效果应该如下:
    页面索引最终值=查询的总页数;
    页面索引起始值=查询的总页数-19;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值