“分页”的方式，大家通常怎么处理？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2807 天前的主题，其中的信息可能已经有所发展或是发生改变。

遇到五种分页方式，大家都怎么处理：

1 、 Discuz! 那种全功能分页：<< 1 2 3 ... 5 6 7 ... 31 32 33 >>

2 、第 2 种是第 1 种的简化版： < 上一页 6 下一页 >

3 、第 3 种是不显示页码，只显示：点击加载更多 / 或点击加载下一页

4 、第 4 种是页面滚动到底部，自动加载下一页

5 、第 5 种是第 4 种的加强版，在用户访问第 6 页时，就预加载第 7 页了（用户感觉不到已经加载了下一页）。

分页

载第

页

页码

62 条回复 • 2017-04-08 11:11:27 +08:00

torbrowserbridge

2017-04-06 09:03:59 +08:00 via iPhone

按照产品汪的需求来...

yahon

2017-04-06 09:07:26 +08:00

还有就是没有分页按钮，通过事件触发加载下一页（更多）

rogwan

2017-04-06 09:07:34 +08:00 via Android

我喜欢第 2 种， PM 说现在流行第 4 ， 5 种。

rogwan

2017-04-06 09:09:10 +08:00 via Android

@yahon 比如，什么事件？

dong3580

2017-04-06 09:10:25 +08:00

我一般都是用第一种，后面再来个跳转到[x]页面

crysislinux

2017-04-06 09:11:32 +08:00 via Android

实际体验来说，还是 1 比较好。。

Troevil

2017-04-06 09:13:46 +08:00

如果筛选条件过多, 能不算 total 就不算 total 呗

mfu

2017-04-06 09:14:24 +08:00

第 4 第 5 种的缺点是无法从第 1 页直接跳到第 10 页。

yang2yang

2017-04-06 09:14:31 +08:00

突然发现对于后台来说，好像都一样，只要你传参数过来......

zioc

2017-04-06 09:15:31 +08:00

按照需求来。

1 、有必要跳页，一般出现在作业系统的查询页，比如订单管理
2 、过时了，但比较容易实现
3 4 5 、没有必要跳页，这样比较简洁，怎么加载看需求

lany

2017-04-06 09:22:28 +08:00

比较喜欢 3

yahon

2017-04-06 09:25:36 +08:00

@rogwan 比如滚动到底部自动加载下一页，通过鼠标左右箭头翻页

zjqzxc

2017-04-06 09:27:35 +08:00

移动端用 4 ， 5 ：手机上点那一堆挨那么近的小页码很容易出错
pc 端看需求，只用 1 或者 1 和 4 ， 5 结合；页面顶端使用方式 1 ，下拉到底部自动加载下一页

当然最重要的是看 pm 怎么说

yejinmo

2017-04-06 09:31:02 +08:00

我只想点个 footer 上的链接

你却一直在加载下一页

my101du

2017-04-06 09:31:16 +08:00

作为程序员，在测试的时候比较喜欢能操控到所有页面，一般是列出 1~N 的链接。顺便还添加一个 input 可以直接跳转。

但是上线的时候，一般留个 1 2 3 .... N-2 N-1 N 以及上一页 /下一页第一页 /最后一页的按钮

yankbytes

2017-04-06 09:32:35 +08:00 via iPhone

个人感觉看场景吧，如果像是微博或者知乎那样的信息流结构，感觉 4 、 5 比较适用，如果像是订单之类的可能很多时候我都不会点击下一页，那么感觉 1 比较合适。可以加 telemetry 观测用户行为然后决定？

gdtv

2017-04-06 09:33:02 +08:00

我喜欢第一种,非常极其十分强烈讨厌第 4 种和第 5 种, 原因见我刚发的帖子 https://www.v2ex.com/t/352824

Antidictator

2017-04-06 09:35:00 +08:00

@gdtv 我也超级讨厌第 4 种，原因是我花了好几个小时还是找不到在知乎看到的那个回答。好气哦！！！！！！

hasbug

2017-04-06 09:35:17 +08:00

比较喜欢这种：
下拉上一页，下滑下一页，永远只显示一页的内容（前端路由）

hasbug

2017-04-06 09:35:46 +08:00

@hasbug 写反了，哈哈哈。

iRiven

2017-04-06 09:36:30 +08:00 via Android

讨厌无限下拉，上下页最舒服

Yunhao

2017-04-06 09:36:42 +08:00 via iPhone

有时候我只是想看一下页面的 footer ，那些自动加载的让我很无奈

alvy

2017-04-06 09:37:01 +08:00

python pagination

hasbug

2017-04-06 09:37:02 +08:00

纠正一下
比较喜欢这种：
下拉上一页，上滑下一页，永远只显示一页的内容（前端路由）

Reign

2017-04-06 09:37:58 +08:00

看性能要求，如果千万级 or 亿级数据， 1 这种方式就有点吃力了，因为 1 这种方式 mysql 只能 offset limit 方式查询。所以只能 2 、 3 、 4 、 5

solidsnake

2017-04-06 09:40:32 +08:00 via iPhone

按需

houshengzi

2017-04-06 09:46:16 +08:00

@Reign 难道其他 4 种不是 offset limit ？

gdtv

2017-04-06 09:47:41 +08:00 via Android

@Reign
@houshengzi
同问，难道其他 4 种不是 offset limit ？

gdtv

2017-04-06 09:49:07 +08:00 via Android

@houshengzi
@Reign
哦，明白了，其他方式应该是 where time<xxxx limit xxx ，不用 offset

willakira

2017-04-06 09:50:24 +08:00

这么明显的 A/B test 需求…
不要瞎选，你把几个关键指标的监控放好，然后做 A/B Test ，每个样式给 5%-10%的用户，然后看看哪种样式的结果最好就行。例如停留时间，翻页点击等等

AlisaDestiny

2017-04-06 10:31:57 +08:00

@Yunhao +1.自动加载更多真的很烦。

yidinghe

2017-04-06 10:42:16 +08:00

在性能方面来说，不跳页（或者说不往后跳页，往前跳可以通过缓存解决）是最好的，因为这时候查询就不需要 skip 了，不管从什么位置开始查，所需要的时间都是一样的。

rocksolid

2017-04-06 11:06:33 +08:00

最讨厌第一种，特别是没有跳页的

alex321

2017-04-06 11:16:11 +08:00

就产品设计初衷选择而言，在后台管理量级列表上 1 很实用，当然还有个跳页，比如各种 CMS 、 CRM 和 ERP ；在轻量级别的触屏版上 2 更加合适，比如 Google 触屏版的搜索；追求简洁设计的情况下，在 APP 上更多的会是 3 、 4 ，这个太多了就不说了。
有交互的，我更加倾向使用 1 和 4 的集合版本，通过鼠标或者手指滑动触发加载前 3~5 页，然后后续显示分页组件，类似色魔张大妈的效果。

然后，多嘴一下，我觉得 layui 的分页组件挺不错， https://www.layui.com/doc/modules/laypage.html 。