首页上下滑动优化

pages/index/components/index-one.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="app-container">
+    <view class="app-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
         <!-- #ifdef MP-WEIXIN -->
         <!-- 小程序背景图片 -->
         <image class="mp-background" src="/static/icon/background2.png" mode="aspectFill"></image>
@@ -229,7 +229,7 @@
         
         
         <view class="nav-filter" :class="{ 'sticky-filter': shouldStickyFilter }" v-if="shouldShowJobSeekerContent">
-            <view class="filter-top" @touchmove.stop.prevent>
+            <view class="filter-top">
                 <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
                     <view class="jobs-left">
                         <view
@@ -286,7 +286,6 @@
                 @scrolltolower="scrollBottom"
                 :enable-back-to-top="false"
                 :scroll-with-animation="false"
-                @touchmove.stop.prevent
             >
                 <view class="falls" v-if="list.length">
                     <!-- #ifdef MP-WEIXIN -->
@@ -567,10 +566,48 @@ const lastScrollTop = ref(0);
 const scrollTop = ref(0);
 // 当用户与筛选/导航交互时，临时锁定头部显示状态，避免因数据刷新导致回弹显示
 const isInteractingWithFilter = ref(false);
+// 触摸事件状态
+const touchStartY = ref(0);
+const touchMoveY = ref(0);
 // 滚动阈值配置
 const HIDE_THRESHOLD = 50; // 隐藏顶部区域的滚动阈值（降低阈值，更容易触发）
 const SHOW_THRESHOLD = 5; // 显示顶部区域的滚动阈值（接近顶部）
 const STICKY_THRESHOLD = 80; // 筛选区域吸顶的滚动阈值
+const TOUCH_MOVE_THRESHOLD = 30; // 触摸滑动阈值，用于判断是否为有效滑动
+
+// 处理触摸开始事件
+function handleTouchStart(e) {
+    // 记录触摸起始位置
+    touchStartY.value = e.touches[0].clientY;
+}
+
+// 处理触摸移动事件
+function handleTouchMove(e) {
+    // 记录触摸移动位置
+    touchMoveY.value = e.touches[0].clientY;
+    
+    // 计算滑动距离
+    const diffY = touchStartY.value - touchMoveY.value;
+    
+    // 当向上滑动超过阈值时，隐藏顶部区域
+    if (diffY > TOUCH_MOVE_THRESHOLD) {
+        if (!shouldHideTop.value) {
+            shouldHideTop.value = true;
+        }
+        if (!shouldStickyFilter.value) {
+            shouldStickyFilter.value = true;
+        }
+    }
+    // 当向下滑动超过阈值且在顶部附近时，显示顶部区域
+    else if (diffY < -TOUCH_MOVE_THRESHOLD && scrollTop.value <= SHOW_THRESHOLD) {
+        if (shouldHideTop.value && !isInteractingWithFilter.value) {
+            shouldHideTop.value = false;
+        }
+        if (shouldStickyFilter.value) {
+            shouldStickyFilter.value = false;
+        }
+    }
+}
 
 // 简化的滚动处理函数
 function handleScroll(e) {