feat(dealer/customer): 实现客户列表的无限滚动和搜索功能- 在客户列表页面添加 InfiniteLoading 组件,实现无限滚动加载- 添加搜索功能,支持按关键词搜索客户
- 优化数据加载逻辑,解决重复请求问题 - 在 Header 组件中增加用户登录状态和信息的检查
This commit is contained in:
84
客户管理上拉加载功能实现说明.md
Normal file
84
客户管理上拉加载功能实现说明.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# 客户管理模块上拉加载更多功能实现说明
|
||||
|
||||
## 概述
|
||||
参考订单管理模块 `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条时认为没有更多数据
|
||||
- 所有状态切换都会重置页码和列表数据
|
||||
- 保持了原有的搜索和筛选功能
|
||||
Reference in New Issue
Block a user