diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss index 2e0c6a1..a9816cc 100644 --- a/src/components/CustomNavbar/index.module.scss +++ b/src/components/CustomNavbar/index.module.scss @@ -3,7 +3,8 @@ top: 0; left: 0; overflow: hidden; - z-index: 9991; + z-index: 99; width: 100%; // 背景颜色通过 style 动态设置,默认透明 + box-shadow: none; } diff --git a/src/components/DistanceQuickFilter/index.scss b/src/components/DistanceQuickFilter/index.scss index 6419320..daeef2c 100644 --- a/src/components/DistanceQuickFilter/index.scss +++ b/src/components/DistanceQuickFilter/index.scss @@ -4,10 +4,11 @@ .nut-menu-bar { --nutui-menu-bar-line-height: 30px; - background-color: unset; + background-color: #fafafa; box-shadow: unset; // padding: 0 15px; gap: 5px; + justify-content: flex-start; } .nut-menu-title { @@ -33,8 +34,12 @@ .nut-menu-container-wrap { width: 100vw; + left: 0 !important; + margin-left: -15px !important; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; + background-color: #fafafa !important; + z-index: 1000 !important; } .positionWrap { diff --git a/src/container/listCustomNavbar/index.tsx b/src/container/listCustomNavbar/index.tsx index c964395..ada79a8 100644 --- a/src/container/listCustomNavbar/index.tsx +++ b/src/container/listCustomNavbar/index.tsx @@ -124,7 +124,7 @@ const ListHeader = (props: IProps) => { }; return ( - + {/* 首页logo 导航*/} { const scrollDirectionRef = useRef<'up' | 'down' | null>(null); const lastScrollTimeRef = useRef(Date.now()); const loadingMoreRef = useRef(false); // 防止重复加载更多 + const scrollStartPositionRef = useRef(0); // 记录开始滚动的位置 const [showSearchBar, setShowSearchBar] = useState(true); // 控制搜索框显示/隐藏(筛选始终显示) // ScrollView 滚动处理函数 @@ -78,49 +79,57 @@ const ListPage = () => { const currentTime = Date.now(); const timeDiff = currentTime - lastScrollTimeRef.current; - // 节流:如果时间差太小,跳过本次处理 - if (timeDiff < 16) return; // 约60fps,避免过于频繁的计算 + // 节流:提高到100ms,减少触发频率 + if (timeDiff < 100) return; // 计算滚动距离 const scrollDiff = currentScrollTop - lastScrollTop; - // 判断滚动方向(提高阈值避免微小滚动误判) + // 判断滚动方向(提高阈值到15px) let newDirection = scrollDirectionRef.current; - if (scrollDiff > 5) { - newDirection = 'up'; - } else if (scrollDiff < -5) { - newDirection = 'down'; - } - - scrollDirectionRef.current = newDirection; - - // 清除之前的定时器 - if (scrollTimeoutRef.current) { - clearTimeout(scrollTimeoutRef.current); - } - - // 滚动阈值(提高阈值减少误触发) - const threshold = 80; - - if (newDirection === 'up' && currentScrollTop > threshold) { - // 上滑超过阈值,隐藏搜索框 - if (showSearchBar) { - setShowSearchBar(false); + if (Math.abs(scrollDiff) > 15) { + if (scrollDiff > 0) { + // 方向改变时,记录新的起始位置 + if (newDirection !== 'up') { + scrollStartPositionRef.current = lastScrollTop; + } + newDirection = 'up'; + } else { + // 方向改变时,记录新的起始位置 + if (newDirection !== 'down') { + scrollStartPositionRef.current = lastScrollTop; + } + newDirection = 'down'; } - if (!isShowInputCustomerNavBar) { + scrollDirectionRef.current = newDirection; + } + + // 计算从开始滚动到现在的累计距离 + const totalScrollDistance = Math.abs(currentScrollTop - scrollStartPositionRef.current); + + // 滚动阈值 + const positionThreshold = 120; // 需要滚动到距离顶部120px + const distanceThreshold = 80; // 需要连续滚动80px才触发 + + if (newDirection === 'up' && currentScrollTop > positionThreshold && totalScrollDistance > distanceThreshold) { + // 上滑超过阈值,且连续滚动距离足够,隐藏搜索框 + if (showSearchBar || !isShowInputCustomerNavBar) { + setShowSearchBar(false); updateListPageState({ isShowInputCustomerNavBar: true, }); + // 重置起始位置 + scrollStartPositionRef.current = currentScrollTop; } - } else if (newDirection === 'down' || currentScrollTop <= threshold) { - // 下滑或回到顶部,显示搜索框 - if (!showSearchBar) { + } else if ((newDirection === 'down' && totalScrollDistance > distanceThreshold) || currentScrollTop <= positionThreshold) { + // 下滑且连续滚动距离足够,或者回到顶部附近,显示搜索框 + if (!showSearchBar || isShowInputCustomerNavBar) { setShowSearchBar(true); - } - if (isShowInputCustomerNavBar) { updateListPageState({ isShowInputCustomerNavBar: false, }); + // 重置起始位置 + scrollStartPositionRef.current = currentScrollTop; } } diff --git a/src/game_pages/searchResult/index.scss b/src/game_pages/searchResult/index.scss index b790fee..bad48e2 100644 --- a/src/game_pages/searchResult/index.scss +++ b/src/game_pages/searchResult/index.scss @@ -12,7 +12,7 @@ padding: 5px 15px 10px 15px; position: sticky; top: -1px; - background-color: #fefefe; + background-color: #fafafa; z-index: 123; .nut-menu-bar {