88 lines
3.2 KiB
Markdown
88 lines
3.2 KiB
Markdown
# 首页滚动显示隐藏优化说明
|
||
|
||
## 修复的问题
|
||
|
||
### 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. 可以添加触底提示，优化加载更多的体验
|
||
|