ks-app-employment-service/docs/首页滚动优化说明.md

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

修复的问题

1. 逻辑冲突问题

• 原问题：同时存在触摸手势（handleTouchStart/Move/End）和滚动事件两套控制逻辑
• 影响：两套逻辑相互干扰，导致显示隐藏行为不稳定
• 解决方案：移除触摸手势处理，统一使用滚动事件控制

2. 小程序兼容性问题

• 原问题：使用了 document.querySelector('.falls-scroll') 操作 DOM
• 影响：在微信小程序中无法正常工作
• 解决方案：完全通过响应式数据和滚动事件处理，避免直接操作 DOM

3. 不合理的显示逻辑

• 原问题：使用 isManuallyHidden 标记，只有手动隐藏后才能通过滚动显示
• 影响：用户体验差，需要特定操作才能恢复显示
• 解决方案：简化逻辑，滚动到顶部自动显示，向下滚动超过阈值自动隐藏

4. 性能问题

• 原问题：使用 setTimeout 进行节流，清理不完善
• 影响：可能导致内存泄漏和性能下降
• 解决方案：改用 requestAnimationFrame，添加 ticking 标志，在组件卸载时清理

优化内容

1. 滚动阈值优化

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