shanxia2.0/bak/mobile-h5/PAGINATION.md

分页加载实现说明

✅ 已实现分页加载的页面

所有数据列表页面都已实现滚动分页加载功能：

1. 计划管理 (/plans) ✅
2. 出入库管理 (/inventory) ✅
3. 地磅单管理 (/weighing) ✅
4. 基础资料 - 往来单位 (/master-data) ✅
5. 基础资料 - 货物 (/master-data) ✅
6. 用户管理 (/user) ✅

实现原理

1. 数据结构

每个列表页面都维护两个数据数组：

• allData: 存储从 API 获取的完整数据
• tableData: 当前显示的数据（分页后的数据）

2. 分页参数

• currentPage: 当前页码（从 1 开始）
• pageSize: 每页数据量（默认 20 条）

3. 加载逻辑

const loadData = async (reset = false) => {
  // 重置时清空数据
  if (reset) {
    currentPage.value = 1
    allData.value = []
    tableData.value = []
    finished.value = false
  }

  loading.value = true
  try {
    // 第一页或重置时，重新获取所有数据
    if (reset || currentPage.value === 1) {
      const data = await api.list(params)
      allData.value = data
    }

    // 分页切片
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    const newData = allData.value.slice(start, end)
    
    // 追加或替换数据
    if (reset || currentPage.value === 1) {
      tableData.value = newData
    } else {
      tableData.value.push(...newData)
    }

    // 判断是否加载完成
    if (tableData.value.length >= allData.value.length) {
      finished.value = true
    } else {
      currentPage.value++
    }
  } catch (error) {
    Toast.fail('加载数据失败')
    finished.value = true
  } finally {
    loading.value = false
  }
}

4. 滚动加载

使用 Vant 的 van-list 组件实现滚动加载：

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <!-- 列表内容 -->
</van-list>

const onLoad = () => {
  if (!finished.value) {
    loadData() // 加载下一页
  }
}

使用场景

初始加载

onMounted(() => {
  loadData(true) // 重置并加载第一页
})

搜索时

const handleSearch = () => {
  loadData(true) // 重置并重新加载
}

增删改后

// 新增/编辑/删除后
await api.create(data)
Toast.success('操作成功')
loadData(true) // 重置并重新加载

用户体验

1. 首次加载: 显示第一页数据（20 条）
2. 滚动到底部: 自动加载下一页数据
3. 加载中: 显示加载状态
4. 加载完成: 显示"没有更多了"提示
5. 搜索: 重置分页，重新加载数据
6. 增删改: 重置分页，刷新列表

性能优化

• 前端分页: 首次获取所有数据，后续分页在前端完成
• 按需加载: 每次只加载 20 条数据，减少 DOM 渲染压力
• 数据缓存: allData 缓存完整数据，避免重复请求

注意事项

1. 搜索会重置分页: 搜索时会重新获取数据并重置分页
2. 增删改会刷新: 增删改操作后会重置分页并刷新列表
3. 数据量限制: 如果数据量非常大（>1000 条），建议后端实现分页接口

未来优化

如果数据量很大，可以考虑：

1. 后端分页接口（需要后端支持）
2. 虚拟滚动（使用 vue-virtual-scroller）
3. 数据懒加载（只加载可见区域的数据）