如何在Xamarin Forms中为ListView实现传统分页功能

你需要实现的是带独立分页控制器的非滚动分页方案，可按照以下步骤实现：

核心状态定义 #

• 提前声明3个核心状态变量：currentPage（当前页码，初始值默认1）、pageSize（每页展示数据条数，可默认设为10/20，支持用户自定义切换）、total（数据总条数，由后端接口返回）
• 首次进入页面时，向后端传递currentPage和pageSize两个参数，拉取对应页的数据渲染到ListView表格中，同时根据返回的total计算总分页数：Math.ceil(total / pageSize)

分页器交互逻辑 #

预期效果如下图：

• 页码点击：用户点击目标页码时，更新currentPage为选中值，重新拉取对应页数据刷新ListView
• 上下页切换：点击上一页按钮时currentPage减1，点击下一页按钮时currentPage加1，需做边界限制：currentPage最小值为1、最大值为总分页数，超出边界时对应按钮置灰不可点击
• 长页码省略：如果总页数超过10页，仅展示首尾2个页码、当前页前后2个页码，中间多余页码用...占位，避免分页控件宽度过长
• 每页条数切换：如果支持用户自定义pageSize，切换时需将currentPage重置为1，再拉取新的分页数据，避免出现页码溢出问题

核心代码示例（JS 页码生成逻辑） #

// 生成分页器展示的页码数组
function generatePageList(totalPage, currentPage) {
  const pageList = []
  // 总页数小于等于10时直接展示全部页码
  if (totalPage <= 10) {
    for (let i = 1; i <= totalPage; i++) {
      pageList.push(i)
    }
    return pageList
  }
  // 总页数超过10时做省略处理
  pageList.push(1)
  if (currentPage > 3) pageList.push('...')
  const startPage = Math.max(2, currentPage - 2)
  const endPage = Math.min(totalPage - 1, currentPage + 2)
  for (let i = startPage; i <= endPage; i++) {
    pageList.push(i)
  }
  if (currentPage < totalPage - 2) pageList.push('...')
  pageList.push(totalPage)
  return pageList
}

注意事项 #

• 接口请求过程中添加loading状态，同时禁用分页器点击，避免用户重复操作导致多次请求
• 分页数据拉取后直接替换ListView原有数据，不要做数据拼接，和无限滚动逻辑做区分
• 数据为空、接口报错等异常场景需添加对应缺省提示，避免展示空白表格

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