docs: 更新带Tab加载列表状态保持改进方案
- 更新当前实现状态,说明LoadMoreList已使用scroll-view - 补充缺少的功能清单(scrollTop prop、@scroll事件等) - 明确不实施原因:需求不明确、技术储备充足、优先级评估 - 新增实施时机判断标准和启动条件 - 新增工作量评估(5.5-9.5小时) - 新增风险评估(5个风险项及缓解措施) - 新增实施建议(技术验证、分阶段实施、充分测试) - 添加文档维护记录 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
122 additions
and
10 deletions
| ... | @@ -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 | +- **下次审查**:收到用户反馈或产品需求时 | ... | ... |
-
Please register or login to post a comment