分页下一页按钮跳转异常：当前页码乘6跳转问题求助

云上老周

2026-5-28

分页跳转异常问题排查与修复

我仔细看了你的代码和问题描述，问题的核心是你混淆了「页码组索引」和「当前页码」的概念，导致点击页码后，iteration变量被错误赋值，进而触发下一页时跳转至错误的内容区间。

问题根源拆解

变量职责混乱：你用iteration同时承担了两个角色——页码组的索引（比如第1组是1-6页，第2组是7-12页）和当前选中的页码。当你点击页码2时，直接把iteration设为2，这会让系统认为你要显示第2组的页码（7-12），而不是停留在第1组（包含页码2）。
下一页逻辑错误：当iteration被错误设为2后，点击下一页箭头时iteration++变成3，系统会请求第3组对应的内容区间（13-18），这就出现了你看到的异常跳转。
CreatePages中的current判断错误：你用i == (this.iteration - 1)来标记当前页码，这在iteration被错误赋值后，会把错误的页码标记为当前页。

修复方案

我们需要明确变量的职责，重新梳理逻辑：

1. 明确变量定义

先在你的组件中新增两个变量，理清职责：

currentPage: number = 1; // 记录当前选中的具体页码，默认第1页
pagesPerGroup: number = 6; // 每组显示的页码数量，固定为6

2. 修复CreatePages函数

这个函数的作用是根据当前页码，生成对应的页码组列表：

CreatePages() {
  this.pages = [];
  // 计算当前页码所在组的起始页码
  const groupStart = Math.floor((this.currentPage - 1) / this.pagesPerGroup) * this.pagesPerGroup + 1;
  // 计算当前页码所在组的结束页码（不超过总页数）
  const groupEnd = Math.min(groupStart + this.pagesPerGroup - 1, this.allPages);

  for (let i = groupStart; i <= groupEnd; i++) {
    this.pages.push({
      id: i,
      current: i === this.currentPage // 根据当前页码标记选中状态
    });
  }
  console.log({ pages: this.pages });
}

3. 修复Page函数（页码点击事件）

点击页码时，更新当前页码，并重新生成页码组：

Page(id: number) {
  // 更新当前选中的页码
  this.currentPage = id;
  // 重新生成当前页码所在的组
  this.CreatePages();
  // 请求对应页码的内容（注意这里传的是currentPage，不是iteration）
  this.postSearch(this.query, this.currentPage, this.pagesize, this.categories);
}

4. 修复PagingPrev和PagingNext函数（上下页箭头事件）

这两个函数负责切换当前页码，并处理边界情况：

PagingPrev() {
  if (this.currentPage > 1) {
    this.currentPage--;
    this.CreatePages();
    this.postSearch(this.query, this.currentPage, this.pagesize, this.categories);
  }
  // 已经是第1页时，不做任何操作
}

PagingNext() {
  if (this.currentPage < this.allPages) {
    this.currentPage++;
    this.CreatePages();
    this.postSearch(this.query, this.currentPage, this.pagesize, this.categories);
  }
  // 已经是最后一页时，不做任何操作
}

修复后效果验证

当你处于第2页（内容区间1-6），点击下一页箭头，会跳转到第3页（内容区间7-12），完全符合预期。
当你点击页码2时，系统会自动显示包含页码2的第1组页码（1-6），不会错误跳转到第2组。
当页码组需要切换时（比如从第6页点击下一页到第7页），页码列表会自动更新为7-12组，逻辑连贯。

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