ks-app-employment-service/docs/滚动隐藏功能修复报告.md

首页滚动隐藏功能修复报告

问题描述

用户反馈：列表区域向上滚动时，上面的区域（搜索栏、附近工作卡片、服务图标网格）没有隐藏，导致下面的职位列表显示区域被压缩得很小。

修复方案

1. 简化滚动逻辑

• 移除了复杂的触摸手势处理
• 移除了 requestAnimationFrame 的复杂节流处理
• 使用简单直接的滚动位置判断

2. 优化滚动阈值

const HIDE_THRESHOLD = 50;   // 向下滚动50px后隐藏顶部区域
const SHOW_THRESHOLD = 5;    // 滚动到顶部5px内显示顶部区域
const STICKY_THRESHOLD = 80; // 滚动80px后筛选区域吸顶

3. 简化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. 核心滚动处理函数

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 - 详细技术文档

---

注意：当前版本包含一个临时的红色测试按钮，用于验证功能是否正常工作。确认功能正常后，请删除测试按钮。