flat: 暂存

hook/useScrollDirection.js

@@ -0,0 +1,49 @@
+import {
+    ref
+} from 'vue'
+
+export function useScrollDirection(options = {}) {
+    const {
+        threshold = 200, // 滚动偏移阈值
+            throttleTime = 100, // 节流时间（毫秒）
+            onChange = null // 滚动方向变化的回调
+    } = options
+
+    const lastScrollTop = ref(0)
+    const accumulatedScroll = ref(0)
+    const isScrollingDown = ref(false)
+    let lastInvoke = 0
+
+    function handleScroll(e) {
+        const now = Date.now()
+        if (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) // 通知变更为向下
+            }
+            accumulatedScroll.value = 0
+        }
+
+        if (accumulatedScroll.value < -threshold) {
+            if (isScrollingDown.value) {
+                isScrollingDown.value = false
+                onChange?.(false) // 通知变更为向上
+            }
+            accumulatedScroll.value = 0
+        }
+
+        lastScrollTop.value = scrollTop
+    }
+
+    return {
+        isScrollingDown,
+        handleScroll
+    }
+}