# 首页滚动显示隐藏优化说明

## 修复的问题

### 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. 可以添加触底提示，优化加载更多的体验