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` - 详细技术文档
|
|||
|
|
|||
|
---
|
|||
|
|
|||
|
**注意**:当前版本包含一个临时的红色测试按钮,用于验证功能是否正常工作。确认功能正常后,请删除测试按钮。
|