hookehuyr

docs: 更新带Tab加载列表状态保持改进方案

- 更新当前实现状态,说明LoadMoreList已使用scroll-view
- 补充缺少的功能清单(scrollTop prop、@scroll事件等)
- 明确不实施原因:需求不明确、技术储备充足、优先级评估
- 新增实施时机判断标准和启动条件
- 新增工作量评估(5.5-9.5小时)
- 新增风险评估(5个风险项及缓解措施)
- 新增实施建议(技术验证、分阶段实施、充分测试)
- 添加文档维护记录

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -36,19 +36,35 @@ const onTabClick = async (tabId) => {
### ❌ 问题 2:滚动位置无法保持
LoadMoreList 组件使用的是**页面级滚动**,而非 `scroll-view` 组件:
**当前状态(2026-02-08)**
- LoadMoreList 组件已使用 `scroll-view`(第39-75行)
-**尚未实现**滚动位置的保存和恢复逻辑
- 切换 tab 后,滚动位置仍然会重置
**当前实现**
```vue
<!-- src/components/LoadMoreList/index.vue:39 -->
<view class="load-more-content">
<!-- src/components/LoadMoreList/index.vue:39-47 -->
<scroll-view
v-if="enableScrollLoad && list.length > 0"
class="load-more-content scrollable"
:style="{ height: scrollHeight }"
:scroll-y="true"
lower-threshold="100"
@scrolltolower="handleScrollToLower"
>
<!-- 列表内容 -->
</view>
</scroll-view>
```
**缺少的功能**
- ❌ 没有 `scrollTop` prop 控制滚动位置
- ❌ 没有 `@scroll` 事件监听滚动
- ❌ 没有滚动位置的保存和恢复机制
**影响**
- 列表滚动到某个位置
- 切换 tab(列表重新渲染)
- 页面滚动位置会重置到顶部
- 滚动位置会重置到顶部
### ✅ 问题 3:数据可以保持
......@@ -303,14 +319,110 @@ const handleLoadMore = async (page) => {
## 实施优先级
⚠️ **当前不实施**:客户还未提出明确需求,暂时作为技术储备保存。
⚠️ **当前不实施**(2026-02-08 状态)
### 不实施的原因
1. **需求不明确**
- 客户/产品经理未提出明确需求
- 尚未收到用户反馈或投诉
- 业务价值不明确
2. **技术储备充足**
- 方案设计已完成
- 实施步骤清晰
- 可随时在需求明确后快速实施
3. **优先级评估**
- 当前有更高优先级的任务
- 此功能属于体验优化,非核心功能
- 建议等待用户反馈后再决定
### 何时需要实施
**建议在以下情况下启动实施**
1. **用户明确反馈**
- 用户投诉"切换 tab 后要重新滚动"
- 用户反馈"能不能记住我之前的浏览位置"
- 用户满意度调查显示此问题影响体验
2. **产品需求明确**
- 产品经理提出"tab 状态保持"需求
- 产品文档中明确要求此功能
- 竞品已实现类似功能
3. **体验优化阶段**
- 核心功能已完成,进入体验优化阶段
- 需要提升用户留存和使用时长
- 需要在竞品对比中脱颖而出
4. **技术债务清理**
- 定期技术债务审查时发现此问题
- 代码重构时顺便优化此功能
### 实施工作量评估
如果确定要实施,预计工作量:
📝 **何时需要实施**
- 用户反馈切换 tab 时状态丢失
- 产品需求明确要求保持 tab 状态
- 需要提升用户体验时
| 任务 | 预计时间 | 难度 |
|------|---------|------|
| LoadMoreList 组件改造 | 1-2 小时 | 🟡 中 |
| 搜索页面状态管理改造 | 2-3 小时 | 🟠 较高 |
| 滚动位置保存/恢复逻辑 | 1-2 小时 | 🟡 中 |
| 测试和调试 | 1-2 小时 | 🟢 低 |
| 文档更新 | 0.5 小时 | 🟢 低 |
| **总计** | **5.5-9.5 小时** | |
### 风险评估
| 风险项 | 风险等级 | 缓解措施 |
|--------|---------|---------|
| scroll-view scrollTop 属性不生效 | 🟡 中 | 使用 ref + nextTick 技巧确保值变化 |
| 滚动位置精度问题 | 🟢 低 | 使用 Math.floor() 取整 |
| 首次进入 tab 跳动问题 | 🟡 中 | 检查数据是否为空,初始化 scrollTop |
| 下拉刷新时重置问题 | 🟢 低 | 刷新时显式重置滚动位置和页码 |
| 兼容性问题(iOS/Android) | 🟡 中 | 在真机上充分测试 |
### 实施建议
如果确定要实施,建议遵循以下步骤:
1. **先做技术验证**(0.5-1 小时):
- 创建一个简单的 demo 验证 scroll-view 的 scrollTop 功能
- 测试在不同设备(iOS/Android)上的表现
- 确认技术可行性
2. **分阶段实施**
- **阶段 1**:先实现分页状态独立跟踪(不涉及滚动位置)
- **阶段 2**:再实现滚动位置保存和恢复
- **阶段 3**:优化体验(添加过渡动画等)
3. **充分测试**
- 在真机上测试不同场景
- 测试边界情况(快速切换 tab、下拉刷新、触底加载)
- 性能测试(大量数据时的表现)
### 技术储备说明
本文档已作为**技术储备**保存,包含:
- ✅ 完整的问题分析
- ✅ 详细的改进方案
- ✅ 可直接使用的代码示例
- ✅ 工作量评估和风险分析
当需求明确时,可以直接参考本文档快速实施。
## 参考文件
- 搜索页面:`src/pages/search/index.vue`
- LoadMoreList 组件:`src/components/LoadMoreList/index.vue`
---
**文档维护记录**
- **创建日期**:2026-02-08
- **最后更新**:2026-02-08
- **维护人**:Claude Code
- **状态**:需求不明确,暂不实施
- **下次审查**:收到用户反馈或产品需求时
......