阿里图标库引入

docs/首页滚动优化说明.md

@@ -0,0 +1,87 @@
+# 首页滚动显示隐藏优化说明
+
+## 修复的问题
+
+### 1. **逻辑冲突问题**
+- **原问题**：同时存在触摸手势（`handleTouchStart/Move/End`）和滚动事件两套控制逻辑
+- **影响**：两套逻辑相互干扰，导致显示隐藏行为不稳定
+- **解决方案**：移除触摸手势处理，统一使用滚动事件控制
+
+### 2. **小程序兼容性问题**
+- **原问题**：使用了 `document.querySelector('.falls-scroll')` 操作 DOM
+- **影响**：在微信小程序中无法正常工作
+- **解决方案**：完全通过响应式数据和滚动事件处理，避免直接操作 DOM
+
+### 3. **不合理的显示逻辑**
+- **原问题**：使用 `isManuallyHidden` 标记，只有手动隐藏后才能通过滚动显示
+- **影响**：用户体验差，需要特定操作才能恢复显示
+- **解决方案**：简化逻辑，滚动到顶部自动显示，向下滚动超过阈值自动隐藏
+
+### 4. **性能问题**
+- **原问题**：使用 `setTimeout` 进行节流，清理不完善
+- **影响**：可能导致内存泄漏和性能下降
+- **解决方案**：改用 `requestAnimationFrame`，添加 `ticking` 标志，在组件卸载时清理
+
+## 优化内容
+
+### 1. **滚动阈值优化**
+```javascript
+const HIDE_THRESHOLD = 150;      // 隐藏顶部区域的滚动阈值
+const SHOW_THRESHOLD = 10;       // 显示顶部区域的滚动阈值（接近顶部）
+const STICKY_THRESHOLD = 100;    // 筛选区域吸顶的滚动阈值
+```
+
+### 2. **滚动方向判断优化**
+- 添加最小位移判断（2px），避免微小抖动导致的误判
+- 使用 `delta` 计算滚动方向，更加准确
+
+### 3. **动画效果优化**
+- 使用 Material Design 的缓动曲线 `cubic-bezier(0.4, 0.0, 0.2, 1)`
+- 优化过渡时间，使动画更加流畅自然
+- 添加 `pointer-events: none` 避免隐藏时的交互问题
+- 使用硬件加速（`transform: translateZ(0)`）提升性能
+
+### 4. **吸顶效果优化**
+- 优化占位符高度，避免内容跳动
+- 改进阴影效果，视觉层次更加清晰
+- H5 和小程序分别处理，确保跨平台一致性
+
+### 5. **资源清理**
+- 在 `onUnmounted` 生命周期中清理 `requestAnimationFrame`
+- 防止内存泄漏
+
+## 使用效果
+
+### 滚动行为
+1. **向下滚动超过 150px**：顶部区域（搜索框、卡片、服务网格）自动隐藏
+2. **滚动到顶部（小于 10px）**：顶部区域自动显示
+3. **滚动超过 100px**：筛选区域吸顶显示
+
+### 动画效果
+- 隐藏/显示过渡时间：350ms
+- 透明度过渡：300ms
+- 平滑的向上滑动动画
+
+### 性能表现
+- 使用 `requestAnimationFrame` 确保 60fps 流畅度
+- 防抖处理避免过度渲染
+- 硬件加速提升动画性能
+
+## 兼容性
+
+- ✅ 微信小程序
+- ✅ H5
+- ✅ App (理论支持，需实际测试)
+
+## 注意事项
+
+1. 如需调整滚动阈值，修改 `HIDE_THRESHOLD`、`SHOW_THRESHOLD`、`STICKY_THRESHOLD` 三个常量
+2. 如需调整动画速度，修改 `.hidden-animation` 中的 `transition` 时间
+3. 占位符高度需要与 `.nav-filter` 的实际高度保持一致
+
+## 后续优化建议
+
+1. 可以考虑添加滚动速度检测，快速滚动时立即隐藏
+2. 可以添加用户偏好设置，允许关闭自动隐藏功能
+3. 可以添加触底提示，优化加载更多的体验
+