fix
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
@@ -21,7 +21,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bottomTextWrapper {
|
.bottomTextWrapper {
|
||||||
width: 100%;
|
|
||||||
height: 68px;
|
height: 68px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 可见状态 */
|
/* 可见状态 */
|
||||||
|
|||||||
@@ -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}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user