如何实现带动态参数的分页？需解决surrounding-page-count逻辑

以下是处理surrounding-page-count参数的核心JS逻辑，直接基于你提供的已知参数（currentPage、surroundingPageCount、totalPages）实现：

function generatePageNumbers(currentPage, surroundingPageCount, totalPages) {
  const pageNumbers = [];
  // 计算当前页需展示的前后页码边界，避免超出范围
  const startRange = Math.max(1, currentPage - surroundingPageCount);
  const endRange = Math.min(totalPages, currentPage + surroundingPageCount);

  // 添加上首页及可能的省略号
  if (startRange > 1) {
    pageNumbers.push(1);
    if (startRange > 2) {
      pageNumbers.push('...');
    }
  }

  // 插入当前页周围的连续页码
  for (let i = startRange; i <= endRange; i++) {
    pageNumbers.push(i);
  }

  // 添加尾页及可能的省略号
  if (endRange < totalPages) {
    if (endRange < totalPages - 1) {
      pageNumbers.push('...');
    }
    pageNumbers.push(totalPages);
  }

  return pageNumbers;
}

逻辑说明 #

1. 范围计算：用Math.max和Math.min确保页码范围不会小于1或超过总页数
2. 首页处理：若当前页的起始展示范围大于1，先加入首页；如果首页和起始范围间隔超过1，插入省略号简化显示
3. 中间页码插入：遍历计算好的连续页码范围，将所有页码加入列表
4. 尾页处理：若当前页的结束展示范围小于总页数，先判断是否需要省略号，再加入尾页

测试示例 #

• 当totalPages=10、currentPage=1、surroundingPageCount=2时，返回结果：[1, 2, 3, '...', 10]，对应你需要的**[1]**[2][3]...[10]
• 当totalPages=10、currentPage=5、surroundingPageCount=2时，返回结果：[1, '...', 3, 4, 5, 6, 7, '...', 10]，对应[1]...[3][4]**[5]**[6][7]...[10]

组件中使用示例 #

你可以直接调用该函数生成页码列表，再遍历生成JSX元素：

// 组件render方法内
const pageNumbers = generatePageNumbers(this.currentPage, this.surroundingPageCount, this.totalPages);

return (
  <div class="pagination">
    {pageNumbers.map((num) => {
      if (num === '...') {
        return <span class="ellipsis">...</span>;
      }
      const isActive = num === this.currentPage;
      return (
        <button 
          class={{ 'page-btn': true, 'active': isActive }}
          onClick={() => this.handlePageChange(num)}
        >
          {num}
        </button>
      );
    })}
  </div>
);

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