滚动分页查询-通俗解释
我们用一种绝对通俗的方式来理解“滚动分页”,它还有一个更常见的名字,叫**“下拉加载更多”或“无限滚动”**。
经典的“翻页” vs 现代的“滚动分页”
想象一下你在刷朋友圈或者微博。
1. 传统分页(像看书)
你刷了一会儿,看到了第10条内容。这时你想看更早的内容,页面底部会出现:
[上一页] [1] [2] [3] [4] [5] [下一页]
你要点击 [下一页]
或者 [3]
来跳转到新的页面看新的内容。
- 特点:有明确的页码,内容是按页划分的。你想看哪页就点哪页。
2. 滚动分页(像卷轴)
你打开App,不停地用手指向上滑动屏幕。刷过第1条、第2条、第3条……当你快滑到底部时,App会自动加载下一批内容,无缝地接在现有内容的后面。你完全看不到页码,只需要不停地滑动即可。
- 特点:没有页码,内容是连续不断地追加加载的。你永远在一个长长的“卷轴”上向下浏览。
滚动分页是怎么工作的?(技术核心)
滚动分页之所以能实现,背后依靠两个关键信息:
- 游标 (Cursor): 可以把它想象成 “书签” 或者 “ checkpoint ”。
- 数量 (Count): 每次要加载多少条内容。
最常见的实现方式有两种:
方式一:基于偏移量 (Offset) - “从第几条开始”
这更像传统分页的思路,但对用户是无感的。
- 第一次加载:前端说:“喂,后端,给我最开始的20条数据。”
GET /feed?limit=20
- 第二次加载(用户滑到底部):前端说:“喂,后端,我已经有20条了,请从第21条开始,再给我20条。”
GET /feed?offset=20&limit=20
- 缺点:如果在你刷新的间隙,有人插入或删除了一条数据(比如第19条被删了),那么你第二次请求的“第21条”可能就变成了“第20条”,会导致重复加载或跳过某条数据的问题。
方式二:基于游标 (Cursor) - “从这个标记之后开始” (推荐)
这是更现代、更精准的方式,完美解决了数据变动的问题。
- 第一次加载:前端说:“喂,后端,给我20条数据。”
- 后端返回了20条数据,并且最后一条数据有一个唯一的、代表时间的ID,比如
last_id: 1648886400
(这是一个时间戳)。
- 后端返回了20条数据,并且最后一条数据有一个唯一的、代表时间的ID,比如
- 第二次加载(用户滑到底部):前端说:“喂,后端,请给我在这个ID(1648886400)之后的20条数据。”
GET /feed?cursor=1648886400&limit=20
- 优点:绝对精准。无论之前的數據如何增刪,這個“游標”都像一個錨點,牢牢定位在你上次看到的位置,保證加載的內容既不重複也不遺漏。微博、Twitter等都采用这种方式。
一个生动的比喻
传统分页就像一本装订好的书:
你想看第50页,直接翻到那里就行。但如果有人在第49页后面新加了一页,你的第50页内容就变了。
滚动分页(基于游标) 就像一个不断向下延伸的魔法卷轴:
你看到的地方,卷轴上会做一个魔法标记。当你喊“更多!”,卷轴就会从那个标记之后开始,显现出新的内容。无论卷轴前面部分如何修改,都不会影响你接下来要看的内容。
总结一下
特性 | 传统分页 | 滚动分页(滚动加载) |
---|---|---|
用户交互 | 点击页码按钮 | 不停地下拉/上滑 |
体验 | 跳转,有中断感 | 无缝连续,沉浸感强 |
背后原理 | ?page=2&size=20 | ?cursor=abc123&limit=20 |
数据稳定性 | 容易受数据增删影响 | 稳定,不受之前数据变动影响 |
适用场景 | 后台管理系统、搜索引擎 | 社交媒体feed流、商品列表、消息记录 |
所以,滚动分页就是一种通过“游标”来记录位置,并通过多次请求、追加内容的方式,实现无需跳转、连续不断加载内容的技术方案。你每次刷抖音、逛淘宝,背后都是它在默默工作。