81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
import {
|
||
ref
|
||
} from 'vue'
|
||
|
||
export function useScrollDirection(options = {}) {
|
||
const {
|
||
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 (enablePerformanceMode && now - lastInvoke < throttleTime) return
|
||
lastInvoke = now
|
||
|
||
const scrollTop = e.detail.scrollTop
|
||
const delta = scrollTop - lastScrollTop.value
|
||
accumulatedScroll.value += delta
|
||
|
||
// 控制顶部区域隐藏
|
||
if (scrollTop > hideThreshold) {
|
||
if (!shouldHideTop.value) {
|
||
shouldHideTop.value = true
|
||
}
|
||
} else {
|
||
if (shouldHideTop.value) {
|
||
shouldHideTop.value = 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
|
||
}
|
||
}
|
||
|
||
lastScrollTop.value = scrollTop
|
||
}
|
||
|
||
return {
|
||
isScrollingDown,
|
||
shouldHideTop,
|
||
shouldStickyFilter,
|
||
handleScroll
|
||
}
|
||
} |