110 lines
3.5 KiB
Markdown
110 lines
3.5 KiB
Markdown
# 首页滚动隐藏功能修复报告
|
||
|
||
## 问题描述
|
||
用户反馈：列表区域向上滚动时，上面的区域（搜索栏、附近工作卡片、服务图标网格）没有隐藏，导致下面的职位列表显示区域被压缩得很小。
|
||
|
||
## 修复方案
|
||
|
||
### 1. **简化滚动逻辑**
|
||
- 移除了复杂的触摸手势处理
|
||
- 移除了 `requestAnimationFrame` 的复杂节流处理
|
||
- 使用简单直接的滚动位置判断
|
||
|
||
### 2. **优化滚动阈值**
|
||
```javascript
|
||
const HIDE_THRESHOLD = 50; // 向下滚动50px后隐藏顶部区域
|
||
const SHOW_THRESHOLD = 5; // 滚动到顶部5px内显示顶部区域
|
||
const STICKY_THRESHOLD = 80; // 滚动80px后筛选区域吸顶
|
||
```
|
||
|
||
### 3. **简化CSS动画**
|
||
```css
|
||
.hidden-animation {
|
||
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
|
||
overflow: hidden;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.hidden-height {
|
||
opacity: 0 !important;
|
||
transform: translateY(-100%) !important;
|
||
pointer-events: none !important;
|
||
max-height: 0 !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
```
|
||
|
||
### 4. **核心滚动处理函数**
|
||
```javascript
|
||
function handleScroll(e) {
|
||
const currentScrollTop = e.detail.scrollTop || 0;
|
||
|
||
// 简单的滚动逻辑：向下滚动超过阈值就隐藏，滚动到顶部就显示
|
||
if (currentScrollTop > HIDE_THRESHOLD) {
|
||
if (!shouldHideTop.value) {
|
||
shouldHideTop.value = true;
|
||
}
|
||
} else if (currentScrollTop <= SHOW_THRESHOLD) {
|
||
if (shouldHideTop.value) {
|
||
shouldHideTop.value = false;
|
||
}
|
||
}
|
||
|
||
// 控制筛选区域吸顶
|
||
if (currentScrollTop > STICKY_THRESHOLD) {
|
||
if (!shouldStickyFilter.value) {
|
||
shouldStickyFilter.value = true;
|
||
}
|
||
} else {
|
||
if (shouldStickyFilter.value) {
|
||
shouldStickyFilter.value = false;
|
||
}
|
||
}
|
||
|
||
// 更新滚动位置
|
||
lastScrollTop.value = currentScrollTop;
|
||
scrollTop.value = currentScrollTop;
|
||
}
|
||
```
|
||
|
||
## 测试方法
|
||
|
||
### 1. **手动测试**
|
||
- 点击右上角的红色"测试"按钮，验证CSS动画是否正常工作
|
||
- 按钮文字会显示当前状态："测试: 隐藏" 或 "测试: 显示"
|
||
|
||
### 2. **滚动测试**
|
||
- 向下滚动列表区域超过50px，顶部区域应该自动隐藏
|
||
- 滚动回到顶部（5px内），顶部区域应该自动显示
|
||
- 滚动超过80px，筛选区域应该吸顶显示
|
||
|
||
## 预期效果
|
||
|
||
1. **向下滚动 > 50px**：顶部区域（搜索栏、附近工作卡片、服务图标）平滑向上滑出隐藏
|
||
2. **滚动到顶部 < 5px**：顶部区域平滑向下滑入显示
|
||
3. **滚动 > 80px**：筛选区域吸顶显示，提供更好的导航体验
|
||
|
||
## 技术特点
|
||
|
||
- ✅ **简单可靠**：移除了复杂的逻辑，使用最直接的滚动位置判断
|
||
- ✅ **性能优化**：使用CSS硬件加速，流畅的动画效果
|
||
- ✅ **跨平台兼容**：支持微信小程序、H5、App
|
||
- ✅ **用户体验**：平滑的动画过渡，符合Material Design规范
|
||
|
||
## 后续优化建议
|
||
|
||
1. **移除测试按钮**：确认功能正常后，删除临时测试按钮
|
||
2. **调整阈值**：根据实际使用情况，可以微调滚动阈值
|
||
3. **添加用户偏好**：可以考虑添加设置选项，让用户选择是否启用自动隐藏
|
||
|
||
## 文件修改
|
||
|
||
- `pages/index/components/index-one.vue` - 主要修改文件
|
||
- `docs/首页滚动优化说明.md` - 详细技术文档
|
||
|
||
---
|
||
|
||
**注意**：当前版本包含一个临时的红色测试按钮，用于验证功能是否正常工作。确认功能正常后，请删除测试按钮。
|