85 lines
2.7 KiB
Markdown
85 lines
2.7 KiB
Markdown
# 客户管理模块上拉加载更多功能实现说明
|
||
|
||
## 概述
|
||
参考订单管理模块 `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条时认为没有更多数据
|
||
- 所有状态切换都会重置页码和列表数据
|
||
- 保持了原有的搜索和筛选功能
|