You need to sign in or sign up before continuing.
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) => { ...@@ -36,19 +36,35 @@ const onTabClick = async (tabId) => {
36 36
37 ### ❌ 问题 2:滚动位置无法保持 37 ### ❌ 问题 2:滚动位置无法保持
38 38
39 -LoadMoreList 组件使用的是**页面级滚动**,而非 `scroll-view` 组件: 39 +**当前状态(2026-02-08)**
40 +- LoadMoreList 组件已使用 `scroll-view`(第39-75行)
41 +-**尚未实现**滚动位置的保存和恢复逻辑
42 +- 切换 tab 后,滚动位置仍然会重置
40 43
44 +**当前实现**
41 ```vue 45 ```vue
42 -<!-- src/components/LoadMoreList/index.vue:39 --> 46 +<!-- src/components/LoadMoreList/index.vue:39-47 -->
43 -<view class="load-more-content"> 47 +<scroll-view
48 + v-if="enableScrollLoad && list.length > 0"
49 + class="load-more-content scrollable"
50 + :style="{ height: scrollHeight }"
51 + :scroll-y="true"
52 + lower-threshold="100"
53 + @scrolltolower="handleScrollToLower"
54 +>
44 <!-- 列表内容 --> 55 <!-- 列表内容 -->
45 -</view> 56 +</scroll-view>
46 ``` 57 ```
47 58
59 +**缺少的功能**
60 +- ❌ 没有 `scrollTop` prop 控制滚动位置
61 +- ❌ 没有 `@scroll` 事件监听滚动
62 +- ❌ 没有滚动位置的保存和恢复机制
63 +
48 **影响** 64 **影响**
49 - 列表滚动到某个位置 65 - 列表滚动到某个位置
50 - 切换 tab(列表重新渲染) 66 - 切换 tab(列表重新渲染)
51 -- 页面滚动位置会重置到顶部 67 +- 滚动位置会重置到顶部
52 68
53 ### ✅ 问题 3:数据可以保持 69 ### ✅ 问题 3:数据可以保持
54 70
...@@ -303,14 +319,110 @@ const handleLoadMore = async (page) => { ...@@ -303,14 +319,110 @@ const handleLoadMore = async (page) => {
303 319
304 ## 实施优先级 320 ## 实施优先级
305 321
306 -⚠️ **当前不实施**:客户还未提出明确需求,暂时作为技术储备保存。 322 +⚠️ **当前不实施**(2026-02-08 状态)
323 +
324 +### 不实施的原因
325 +
326 +1. **需求不明确**
327 + - 客户/产品经理未提出明确需求
328 + - 尚未收到用户反馈或投诉
329 + - 业务价值不明确
330 +
331 +2. **技术储备充足**
332 + - 方案设计已完成
333 + - 实施步骤清晰
334 + - 可随时在需求明确后快速实施
335 +
336 +3. **优先级评估**
337 + - 当前有更高优先级的任务
338 + - 此功能属于体验优化,非核心功能
339 + - 建议等待用户反馈后再决定
340 +
341 +### 何时需要实施
342 +
343 +**建议在以下情况下启动实施**
344 +
345 +1. **用户明确反馈**
346 + - 用户投诉"切换 tab 后要重新滚动"
347 + - 用户反馈"能不能记住我之前的浏览位置"
348 + - 用户满意度调查显示此问题影响体验
349 +
350 +2. **产品需求明确**
351 + - 产品经理提出"tab 状态保持"需求
352 + - 产品文档中明确要求此功能
353 + - 竞品已实现类似功能
354 +
355 +3. **体验优化阶段**
356 + - 核心功能已完成,进入体验优化阶段
357 + - 需要提升用户留存和使用时长
358 + - 需要在竞品对比中脱颖而出
359 +
360 +4. **技术债务清理**
361 + - 定期技术债务审查时发现此问题
362 + - 代码重构时顺便优化此功能
363 +
364 +### 实施工作量评估
365 +
366 +如果确定要实施,预计工作量:
307 367
308 -📝 **何时需要实施** 368 +| 任务 | 预计时间 | 难度 |
309 -- 用户反馈切换 tab 时状态丢失 369 +|------|---------|------|
310 -- 产品需求明确要求保持 tab 状态 370 +| LoadMoreList 组件改造 | 1-2 小时 | 🟡 中 |
311 -- 需要提升用户体验时 371 +| 搜索页面状态管理改造 | 2-3 小时 | 🟠 较高 |
372 +| 滚动位置保存/恢复逻辑 | 1-2 小时 | 🟡 中 |
373 +| 测试和调试 | 1-2 小时 | 🟢 低 |
374 +| 文档更新 | 0.5 小时 | 🟢 低 |
375 +| **总计** | **5.5-9.5 小时** | |
376 +
377 +### 风险评估
378 +
379 +| 风险项 | 风险等级 | 缓解措施 |
380 +|--------|---------|---------|
381 +| scroll-view scrollTop 属性不生效 | 🟡 中 | 使用 ref + nextTick 技巧确保值变化 |
382 +| 滚动位置精度问题 | 🟢 低 | 使用 Math.floor() 取整 |
383 +| 首次进入 tab 跳动问题 | 🟡 中 | 检查数据是否为空,初始化 scrollTop |
384 +| 下拉刷新时重置问题 | 🟢 低 | 刷新时显式重置滚动位置和页码 |
385 +| 兼容性问题(iOS/Android) | 🟡 中 | 在真机上充分测试 |
386 +
387 +### 实施建议
388 +
389 +如果确定要实施,建议遵循以下步骤:
390 +
391 +1. **先做技术验证**(0.5-1 小时):
392 + - 创建一个简单的 demo 验证 scroll-view 的 scrollTop 功能
393 + - 测试在不同设备(iOS/Android)上的表现
394 + - 确认技术可行性
395 +
396 +2. **分阶段实施**
397 + - **阶段 1**:先实现分页状态独立跟踪(不涉及滚动位置)
398 + - **阶段 2**:再实现滚动位置保存和恢复
399 + - **阶段 3**:优化体验(添加过渡动画等)
400 +
401 +3. **充分测试**
402 + - 在真机上测试不同场景
403 + - 测试边界情况(快速切换 tab、下拉刷新、触底加载)
404 + - 性能测试(大量数据时的表现)
405 +
406 +### 技术储备说明
407 +
408 +本文档已作为**技术储备**保存,包含:
409 +- ✅ 完整的问题分析
410 +- ✅ 详细的改进方案
411 +- ✅ 可直接使用的代码示例
412 +- ✅ 工作量评估和风险分析
413 +
414 +当需求明确时,可以直接参考本文档快速实施。
312 415
313 ## 参考文件 416 ## 参考文件
314 417
315 - 搜索页面:`src/pages/search/index.vue` 418 - 搜索页面:`src/pages/search/index.vue`
316 - LoadMoreList 组件:`src/components/LoadMoreList/index.vue` 419 - LoadMoreList 组件:`src/components/LoadMoreList/index.vue`
420 +
421 +---
422 +
423 +**文档维护记录**
424 +- **创建日期**:2026-02-08
425 +- **最后更新**:2026-02-08
426 +- **维护人**:Claude Code
427 +- **状态**:需求不明确,暂不实施
428 +- **下次审查**:收到用户反馈或产品需求时
......