微信登录调试

hook/useScrollDirection.js

@@ -4,39 +4,69 @@ import {
 
 export function useScrollDirection(options = {}) {
     const {
-        threshold = 200, // 滚动偏移阈值
-            throttleTime = 100, // 节流时间（毫秒）
-            onChange = null // 滚动方向变化的回调
+        threshold = 50, // 滚动偏移阈值，降低以更敏感
+        throttleTime = 16, // 节流时间（毫秒），约60fps
+        onChange = null, // 滚动方向变化的回调
+        hideThreshold = 100, // 隐藏区域的滚动阈值
+        enablePerformanceMode = true // 启用性能优化模式
     } = options
 
     const lastScrollTop = ref(0)
     const accumulatedScroll = ref(0)
     const isScrollingDown = ref(false)
+    const shouldHideTop = ref(false) // 控制顶部区域隐藏
+    const shouldStickyFilter = ref(false) // 控制筛选区域吸顶
     let lastInvoke = 0
 
     function handleScroll(e) {
         const now = Date.now()
-        if (now - lastInvoke < throttleTime) return
+        if (enablePerformanceMode && now - lastInvoke < throttleTime) return
         lastInvoke = now
 
         const scrollTop = e.detail.scrollTop
         const delta = scrollTop - lastScrollTop.value
         accumulatedScroll.value += delta
 
-        if (accumulatedScroll.value > threshold) {
-            if (!isScrollingDown.value) {
-                isScrollingDown.value = true
-                onChange?.(true) // 通知变更为向下
+        // 控制顶部区域隐藏
+        if (scrollTop > hideThreshold) {
+            if (!shouldHideTop.value) {
+                shouldHideTop.value = true
+            }
+        } else {
+            if (shouldHideTop.value) {
+                shouldHideTop.value = false
             }
-            accumulatedScroll.value = 0
         }
 
-        if (accumulatedScroll.value < -threshold) {
-            if (isScrollingDown.value) {
-                isScrollingDown.value = false
-                onChange?.(false) // 通知变更为向上
+        // 控制筛选区域吸顶（当顶部区域隐藏时）
+        if (scrollTop > hideThreshold + 50) { // 稍微延迟吸顶
+            if (!shouldStickyFilter.value) {
+                shouldStickyFilter.value = true
+            }
+        } else {
+            if (shouldStickyFilter.value) {
+                shouldStickyFilter.value = false
+            }
+        }
+
+        // 滚动方向检测（仅在性能模式下使用阈值）
+        if (!enablePerformanceMode || Math.abs(accumulatedScroll.value) > threshold) {
+            if (accumulatedScroll.value > 0) {
+                // 向下滚动
+                if (!isScrollingDown.value) {
+                    isScrollingDown.value = true
+                    onChange?.(true) // 通知变更为向下
+                }
+            } else {
+                // 向上滚动
+                if (isScrollingDown.value) {
+                    isScrollingDown.value = false
+                    onChange?.(false) // 通知变更为向上
+                }
+            }
+            if (enablePerformanceMode) {
+                accumulatedScroll.value = 0
             }
-            accumulatedScroll.value = 0
         }
 
         lastScrollTop.value = scrollTop
@@ -44,6 +74,8 @@ export function useScrollDirection(options = {}) {
 
     return {
         isScrollingDown,
+        shouldHideTop,
+        shouldStickyFilter,
         handleScroll
     }
 }