developer/template-10560
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d770796df46b85f654727c46f670deb83eb16c5c
template-10560/docs/客户管理上拉加载功能实现说明.md
赵忠林 d770796df4 feat(dealer): 新增银行卡管理功能 
- 添加银行卡管理页面和相关API
- 实现银行卡列表展示、添加、编辑和删除功能
- 优化提现页面，支持选择银行卡进行提现
- 新增 FixedButton 组件用于底部固定按钮
2025-09-06 19:37:49 +08:00

2.7 KiB
Raw Blame History

客户管理模块上拉加载更多功能实现说明

概述

参考订单管理模块 src/user/order/order.tsx 的实现，为客户管理模块 src/dealer/customer/index.tsx 添加了完善的上拉加载更多功能。

主要修改内容

1. 优化数据获取函数 fetchCustomerData

  • 新增参数：
    • resetPage: 是否重置页码（用于切换tab或刷新）
    • targetPage: 目标页码（用于加载更多）
  • 改进逻辑：
    • 支持重置页面和追加数据两种模式
    • 正确处理页码状态
    • 添加错误处理和用户提示

2. 改进 reloadMore 函数

  • 防止重复加载（检查 loading 和 hasMore 状态）
  • 正确计算下一页页码
  • 调用优化后的 fetchCustomerData 函数

3. 优化状态管理

  • 初始化数据：使用 resetPage=true 确保从第一页开始
  • Tab切换：清空列表、重置页码和加载状态，然后重新获取数据
  • 取消操作：操作成功后重新加载当前tab数据

4. 改进UI渲染

  • InfiniteLoading组件：
    • 设置合适的容器高度（75vh）
    • 优化加载状态显示
    • 改进空数据状态展示
    • 添加滚动容器样式

5. 修复依赖问题

  • 移除 fetchCustomerData 函数中的 page 和 list 依赖，避免无限循环

核心功能特性

✅ 上拉加载更多

  • 滚动到底部自动触发加载下一页数据
  • 防止重复加载机制
  • 正确的页码管理

✅ Tab切换支持

  • 切换tab时重置列表和页码
  • 每个tab独立的数据加载

✅ 错误处理

  • 网络请求失败时显示错误提示
  • 加载失败时不影响现有数据

✅ 加载状态

  • 首次加载显示loading状态
  • 加载更多时显示"加载中..."
  • 无更多数据时显示"没有更多了"

✅ 空数据处理

  • 无数据时显示友好的空状态提示
  • 区分加载中和真正的无数据状态

参考实现

本实现参考了订单管理模块 src/user/order/components/OrderList.tsx 的以下核心特性：

  • reload 函数的 resetPage 和 targetPage 参数设计
  • reloadMore 函数的防重复加载逻辑
  • InfiniteLoading 组件的配置和样式
  • 状态管理和错误处理机制

使用方式

  1. 进入客户管理页面
  2. 滚动到列表底部自动加载更多数据
  3. 切换不同状态tab查看对应客户
  4. 支持搜索功能（原有功能保持不变）

技术栈

  • React + TypeScript
  • Taro框架
  • NutUI组件库
  • InfiniteLoading组件实现上拉加载

注意事项

  • 每页默认加载10条数据
  • 当返回数据少于10条时认为没有更多数据
  • 所有状态切换都会重置页码和列表数据
  • 保持了原有的搜索和筛选功能