From 545f77ef9d92984a80e33415a917c3109a36ef6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=91=9E?= <lirui@liruideMacBook-Pro.local>
Date: Sat, 13 Sep 2025 19:02:07 +0800
Subject: [PATCH] fix

---
 src/components/CustomNavbar/index.module.scss |  2 +
 src/container/listContainer/index.scss        |  1 -
 src/container/listCustomNavbar/index.scss     | 10 ++--
 src/container/listCustomNavbar/index.tsx      | 11 +++-
 src/game_pages/list/index.tsx                 | 50 +++++++++++++++----
 5 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss
index b15b2d5..d6eaab3 100644
--- a/src/components/CustomNavbar/index.module.scss
+++ b/src/components/CustomNavbar/index.module.scss
@@ -3,4 +3,6 @@
   top: 0;
   z-index: 999;
   background-color: #ffffff;
+  overflow: hidden;
+  z-index: 999;
 }
\ No newline at end of file
diff --git a/src/container/listContainer/index.scss b/src/container/listContainer/index.scss
index 7d2ded3..0a02465 100644
--- a/src/container/listContainer/index.scss
+++ b/src/container/listContainer/index.scss
@@ -21,7 +21,6 @@
   }
 
   .bottomTextWrapper {
-    width: 100%;
     height: 68px;
     padding: 0 16px;
     display: flex;
diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss
index 8f37ff2..41524a0 100644
--- a/src/container/listCustomNavbar/index.scss
+++ b/src/container/listCustomNavbar/index.scss
@@ -118,9 +118,9 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   
-  /* 优化过渡动画，使用更快的缓动函数 */
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
-              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  /* 优化过渡动画，使用更平滑的缓动函数和更短的动画时间 */
+  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
+              transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* 第一个元素样式 */
@@ -131,13 +131,13 @@
 .secondElement {
   /* 初始状态：透明且稍微偏移 */
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(5px);
 }
 
 /* 隐藏状态 */
 .hidden {
   opacity: 0;
-  transform: translateY(10px);
+  transform: translateY(5px);
 }
 
 /* 可见状态 */
diff --git a/src/container/listCustomNavbar/index.tsx b/src/container/listCustomNavbar/index.tsx
index 11fc502..9448770 100644
--- a/src/container/listCustomNavbar/index.tsx
+++ b/src/container/listCustomNavbar/index.tsx
@@ -7,6 +7,7 @@ import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
 import Taro from "@tarojs/taro";
 import "./index.scss";
+import { useMemo } from "react";
 
 interface IProps {
   config?: {
@@ -70,12 +71,18 @@ const ListHeader = (props: IProps) => {
     paddingTop: `4px`,
   };
 
+  const showInputNavBar = useMemo(() => {
+    return isShowInputCustomerNavBar || showInput;
+  }, [isShowInputCustomerNavBar, showInput]);
+
+  console.log("===showInputNavBar",showInputNavBar)
+
   return (
     <CustomNavbar>
       <View className="listNavWrapper">
         {/* 首页logo 导航*/}
         <View
-          className={`listNavContainer toggleElement firstElement hidden ${(!isShowInputCustomerNavBar && !showInput) && "visible"
+          className={`listNavContainer toggleElement firstElement hidden ${(!showInputNavBar && !showInput) && "visible"
             }`}
           style={navbarStyle}
         >
@@ -103,7 +110,7 @@ const ListHeader = (props: IProps) => {
         </View>
         {/* 搜索导航 */}
         <View
-          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(isShowInputCustomerNavBar || showInput) && "visible"
+          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(showInputNavBar || showInput) && "visible"
             } ${showInput && "inputCustomerNavbarShowInput"}`}
           style={navbarStyle}
         >
diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx
index abb37d3..fec1583 100644
--- a/src/game_pages/list/index.tsx
+++ b/src/game_pages/list/index.tsx
@@ -1,7 +1,7 @@
 import SearchBar from "@/components/SearchBar";
 import FilterPopup from "@/components/FilterPopup";
 import styles from "./index.module.scss";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 import Taro, { usePageScroll } from "@tarojs/taro";
 import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
@@ -44,24 +44,52 @@ const ListPage = () => {
     fetchGetGamesCount
   } = store;
 
-  // 简化的滚动处理函数
-  usePageScroll((res) => {
-    const shouldShowInputNav = res?.scrollTop >= totalHeight;
-
-    // 只有当状态需要改变时才更新
-    if (shouldShowInputNav && !isShowInputCustomerNavBar) {
-        updateState({ isShowInputCustomerNavBar: true });
-    } else {
-        updateState({ isShowInputCustomerNavBar: false });
+  // 防抖的滚动处理函数
+  const handleScroll = useCallback((res) => {
+    const currentScrollTop = res?.scrollTop || 0;
+    
+    // 添加缓冲区，避免临界点频繁切换
+    const buffer = 10; // 10px 缓冲区
+    const shouldShowInputNav = currentScrollTop >= (totalHeight + buffer);
+    const shouldHideInputNav = currentScrollTop < (totalHeight - buffer);
+    
+    // 清除之前的定时器
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
     }
-  });
+    
+    // 防抖处理，避免频繁更新状态
+    scrollTimeoutRef.current = setTimeout(() => {
+      // 只有在状态真正需要改变时才更新
+      if (shouldShowInputNav && !isShowInputCustomerNavBar) {
+        updateState({ isShowInputCustomerNavBar: true });
+      } else if (shouldHideInputNav && isShowInputCustomerNavBar) {
+        updateState({ isShowInputCustomerNavBar: false });
+      }
+      
+      lastScrollTopRef.current = currentScrollTop;
+    }, 16); // 约60fps的防抖间隔
+  }, [totalHeight, isShowInputCustomerNavBar, updateState]);
+
+  usePageScroll(handleScroll);
 
   const scrollContextRef = useRef(null)
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const lastScrollTopRef = useRef(0)
 
   useEffect(() => {
     getLocation()
   }, []);
 
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, []);
+
 
   // 监听距离和排序方式变化，自动调用接口
   useEffect(() => {