This commit is contained in:
李瑞
2025-09-13 19:02:07 +08:00
parent 171687085b
commit 545f77ef9d
5 changed files with 55 additions and 19 deletions

View File

@@ -3,4 +3,6 @@
top: 0; top: 0;
z-index: 999; z-index: 999;
background-color: #ffffff; background-color: #ffffff;
overflow: hidden;
z-index: 999;
} }

View File

@@ -21,7 +21,6 @@
} }
.bottomTextWrapper { .bottomTextWrapper {
width: 100%;
height: 68px; height: 68px;
padding: 0 16px; padding: 0 16px;
display: flex; display: flex;

View File

@@ -118,9 +118,9 @@
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
/* 优化过渡动画,使用更的缓动函数 */ /* 优化过渡动画,使用更平滑的缓动函数和更短的动画时间 */
transition: opacity 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.3s cubic-bezier(0.4, 0, 0.2, 1); transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} }
/* 第一个元素样式 */ /* 第一个元素样式 */
@@ -131,13 +131,13 @@
.secondElement { .secondElement {
/* 初始状态:透明且稍微偏移 */ /* 初始状态:透明且稍微偏移 */
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(5px);
} }
/* 隐藏状态 */ /* 隐藏状态 */
.hidden { .hidden {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(5px);
} }
/* 可见状态 */ /* 可见状态 */

View File

@@ -7,6 +7,7 @@ import CustomNavbar from "@/components/CustomNavbar";
import { Input } from "@nutui/nutui-react-taro"; import { Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro"; import Taro from "@tarojs/taro";
import "./index.scss"; import "./index.scss";
import { useMemo } from "react";
interface IProps { interface IProps {
config?: { config?: {
@@ -70,12 +71,18 @@ const ListHeader = (props: IProps) => {
paddingTop: `4px`, paddingTop: `4px`,
}; };
const showInputNavBar = useMemo(() => {
return isShowInputCustomerNavBar || showInput;
}, [isShowInputCustomerNavBar, showInput]);
console.log("===showInputNavBar",showInputNavBar)
return ( return (
<CustomNavbar> <CustomNavbar>
<View className="listNavWrapper"> <View className="listNavWrapper">
{/* 首页logo 导航*/} {/* 首页logo 导航*/}
<View <View
className={`listNavContainer toggleElement firstElement hidden ${(!isShowInputCustomerNavBar && !showInput) && "visible" className={`listNavContainer toggleElement firstElement hidden ${(!showInputNavBar && !showInput) && "visible"
}`} }`}
style={navbarStyle} style={navbarStyle}
> >
@@ -103,7 +110,7 @@ const ListHeader = (props: IProps) => {
</View> </View>
{/* 搜索导航 */} {/* 搜索导航 */}
<View <View
className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(isShowInputCustomerNavBar || showInput) && "visible" className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(showInputNavBar || showInput) && "visible"
} ${showInput && "inputCustomerNavbarShowInput"}`} } ${showInput && "inputCustomerNavbarShowInput"}`}
style={navbarStyle} style={navbarStyle}
> >

View File

@@ -1,7 +1,7 @@
import SearchBar from "@/components/SearchBar"; import SearchBar from "@/components/SearchBar";
import FilterPopup from "@/components/FilterPopup"; import FilterPopup from "@/components/FilterPopup";
import styles from "./index.module.scss"; import styles from "./index.module.scss";
import { useEffect, useRef } from "react"; import { useEffect, useRef, useCallback } from "react";
import Taro, { usePageScroll } from "@tarojs/taro"; import Taro, { usePageScroll } from "@tarojs/taro";
import { useListStore } from "@/store/listStore"; import { useListStore } from "@/store/listStore";
import { useGlobalState } from "@/store/global"; import { useGlobalState } from "@/store/global";
@@ -44,24 +44,52 @@ const ListPage = () => {
fetchGetGamesCount fetchGetGamesCount
} = store; } = store;
// 简化的滚动处理函数 // 防抖的滚动处理函数
usePageScroll((res) => { const handleScroll = useCallback((res) => {
const shouldShowInputNav = res?.scrollTop >= totalHeight; const currentScrollTop = res?.scrollTop || 0;
// 只有当状态需要改变时才更新 // 添加缓冲区,避免临界点频繁切换
if (shouldShowInputNav && !isShowInputCustomerNavBar) { const buffer = 10; // 10px 缓冲区
updateState({ isShowInputCustomerNavBar: true }); const shouldShowInputNav = currentScrollTop >= (totalHeight + buffer);
} else { const shouldHideInputNav = currentScrollTop < (totalHeight - buffer);
updateState({ isShowInputCustomerNavBar: false });
// 清除之前的定时器
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 scrollContextRef = useRef(null)
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
const lastScrollTopRef = useRef(0)
useEffect(() => { useEffect(() => {
getLocation() getLocation()
}, []); }, []);
// 清理定时器
useEffect(() => {
return () => {
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
};
}, []);
// 监听距离和排序方式变化,自动调用接口 // 监听距离和排序方式变化,自动调用接口
useEffect(() => { useEffect(() => {