如何动态生成按5组递进的分页页码数组？

从你的硬编码逻辑能看出规律：当currentPage落在某个5页区间时，显示该区间的全部5个页码。比如currentPage在6-10时显示6-10，11-15时显示11-15，以此类推。

核心思路 #

1. 先计算当前currentPage所属的5页区间的起始页码：
   • 用Math.floor((currentPage - 1) / 5)得到当前所在的“5页组”索引（从0开始）
   • 起始页码 = 索引 * 5 + 1
2. 基于起始页码，生成连续的5个页码即可。

代码实现 #

// 定义每组的页码数量，这里固定为5
const pageGroupSize = 5;
// 计算当前组的起始页码
const startPage = Math.floor((currentPage - 1) / pageGroupSize) * pageGroupSize + 1;
// 生成连续的5个页码数组
const pages = Array.from({ length: pageGroupSize }, (_, i) => startPage + i);

验证示例 #

• 当currentPage = 7时：startPage = Math.floor((7-1)/5)*5 +1 = 1*5+1=6，pages为[6,7,8,9,10]，和原硬编码一致
• 当currentPage = 12时：startPage = Math.floor((12-1)/5)*5 +1 = 2*5+1=11，pages为[11,12,13,14,15]，符合预期
• 当currentPage = 25时：startPage = Math.floor((25-1)/5)*5 +1 =4*5+1=21，pages为[21,22,23,24,25]，和原逻辑匹配

扩展：处理总页数不足的情况 #

如果实际总页数可能小于当前组的结束页码（比如总页数是23），可以加边界过滤，避免生成无效页码：

const totalPages = 23; // 实际业务中的总页数
const pages = Array.from({ length: pageGroupSize }, (_, i) => startPage + i)
  .filter(page => page <= totalPages);

内容的提问来源于stack exchange，提问作者Muirik