术语图鉴/前端基础/分页
←→切换Esc返回

分页 Pagination

你可能会说

列表有 200 条数据,不能全部加载出来,得分页显示。

分页是把大量内容拆成多页显示的导航方式——每页固定条数,用户翻页浏览。

内容太多时分成多页显示,底部有「上一页 1 2 3 下一页」。避免一次加载几千条数据卡死页面。

也常被叫作Pagination

生活类比

像一本书——内容分成一页页,看完结尾翻页继续,不用一次摊开所有纸。

🎮 动手试试

👇 点击页码切换数据

共 48 条 · 第 1/8 页
#1
#2
#3
#4
#5
#6
选择题选择一个你认为最合适的答案

关于「分页」,以下哪个描述最准确?

你可以这样告诉 AI

帮我实现分页:每页 12 条,底部分页器显示页码(当前页高亮),支持上一页/下一页,URL 带 ?page=2 参数。

容易混淆?这样区分

分页 Pagination≠
无限滚动 Infinite Scroll

分页是离散跳转(第1页→第2页),无限滚动是连续追加(滚到底自动加载)。

分页 Pagination≠
懒加载 Lazy Loading

懒加载是延迟加载资源(图片进入视口才加载),分页是数据分批获取。

什么时候用

数据列表分页

搜索结果、订单列表、文章目录等数据量大时,每页展示固定条数,避免一次加载过多卡顿。

和 AI 协作时

想让 AI 做分页时,直接说「每页 12 条,底部分页器显示页码和上一页/下一页,URL 带 ?page= 参数」。

什么时候不用

信息流浏览

社交动态、短视频等浏览型场景用无限滚动体验更流畅,分页会打断沉浸感。

与数据列表无关的项目

纯展示型页面或不需要分页逻辑的后端项目。

组成结构 · Anatomy

1
核心概念Core

内容太多时分成多页显示,底部有「上一页 1 2 3 下一页」。避免一次加载几千条数据卡死页面。

2
实际表现In Practice

像一本书——内容分成一页页,看完结尾翻页继续,不用一次摊开所有纸。

3
与 AI 的关联AI Context

和 AI 沟通时提到「列表太长,加个翻页」,就是加分页功能。

典型使用场景

列表分页器
告诉 AI「帮我给文章列表加分页:每页 10 条,底部显示页码,当前页高亮,有上一页和下一页按钮,URL 带 ?page=2 参数」
想弄懂概念时
告诉 AI「用大白话给我解释什么是分页,举个生活中的例子」

延伸阅读