diff --git a/src/app.ts b/src/app.ts index 98ec3fe..c4bcd9a 100644 --- a/src/app.ts +++ b/src/app.ts @@ -5,8 +5,6 @@ import "qweather-icons/font/qweather-icons.css"; import { useDictionaryStore } from "./store/dictionaryStore"; import { useGlobalStore } from "./store/global"; -// import { getNavbarHeight } from "@/utils/getNavbarHeight"; - interface AppProps { children: ReactNode; } diff --git a/src/components/CustomNavbar/index.module.scss b/src/components/CustomNavbar/index.module.scss index d6eaab3..b1ebd81 100644 --- a/src/components/CustomNavbar/index.module.scss +++ b/src/components/CustomNavbar/index.module.scss @@ -1,8 +1,10 @@ .customerNavbar { - position: sticky; + position: fixed; top: 0; + left: 0; z-index: 999; - background-color: #ffffff; overflow: hidden; z-index: 999; + width: 100%; + background-color: #fff; } \ No newline at end of file diff --git a/src/components/CustomNavbar/index.tsx b/src/components/CustomNavbar/index.tsx index 64a7954..650459c 100644 --- a/src/components/CustomNavbar/index.tsx +++ b/src/components/CustomNavbar/index.tsx @@ -9,12 +9,12 @@ interface IProps { const CustomNavbar = (props: IProps) => { const { children } = props; const { statusNavbarHeightInfo } = useGlobalState(); - const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo; + const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo; return ( {children} diff --git a/src/components/CustomerNavbarBack/index.tsx b/src/components/CustomerNavbarBack/index.tsx index 338ad51..7a712ba 100644 --- a/src/components/CustomerNavbarBack/index.tsx +++ b/src/components/CustomerNavbarBack/index.tsx @@ -6,7 +6,7 @@ import Taro from "@tarojs/taro"; const ListHeader = () => { const { statusNavbarHeightInfo } = useGlobalState(); - const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo; + const { statusBarHeight, navBarHeight, totalHeight } = statusNavbarHeightInfo; const handleBack = () => { Taro.navigateBack(); } @@ -19,7 +19,7 @@ const ListHeader = () => { diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index 493e867..0790b46 100644 --- a/src/components/SearchBar/index.module.scss +++ b/src/components/SearchBar/index.module.scss @@ -4,7 +4,7 @@ --nutui-searchbar-content-border-radius: 44px; --nutui-searchbar-input-text-color: #000000; --nutui-searchbar-input-padding: 0 0 0 10px; - --nutui-searchbar-padding: 10px 0 0 0; + --nutui-searchbar-padding: 10px 0 10px 0; background-color: unset; :global(.nut-searchbar-content) { diff --git a/src/container/inputCustomerNavbar/index.scss b/src/container/inputCustomerNavbar/index.scss index a92d9cd..23006f3 100644 --- a/src/container/inputCustomerNavbar/index.scss +++ b/src/container/inputCustomerNavbar/index.scss @@ -1,6 +1,6 @@ .inputCustomerNavbarContainer { - padding-left: 17px; display: flex; + align-items: center; gap: 8px; @@ -15,6 +15,7 @@ } .navContent { + padding-left: 17px; display: flex; align-items: center; gap: 4px; diff --git a/src/container/inputCustomerNavbar/index.tsx b/src/container/inputCustomerNavbar/index.tsx index 1690be3..ecf8118 100644 --- a/src/container/inputCustomerNavbar/index.tsx +++ b/src/container/inputCustomerNavbar/index.tsx @@ -1,8 +1,6 @@ import { View, Image } from "@tarojs/components"; import img from "@/config/images"; -import { getCurrentLocation } from "@/utils/locationUtils"; import "./index.scss"; -import { useEffect } from "react"; import { useGlobalState } from "@/store/global"; import { useListState } from "@/store/listStore"; import CustomNavbar from "@/components/CustomNavbar"; @@ -15,25 +13,9 @@ interface IProps { const ListHeader = (props: IProps) => { const { icon } = props; - const { updateState, statusNavbarHeightInfo } = useGlobalState(); + const { statusNavbarHeightInfo } = useGlobalState(); const { searchValue } = useListState(); - const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo; - - // 获取位置信息 - // const getCurrentLocal = () => { - // updateState({ - // getLocationLoading: true, - // }); - // getCurrentLocation().then((res) => { - // updateState({ - // getLocationLoading: false, - // location: res || {}, - // }); - // }); - // }; - // useEffect(() => { - // getCurrentLocal(); - // }, []); + const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo; const handleInputClick = () => { Taro.navigateTo({ @@ -46,7 +28,7 @@ const ListHeader = (props: IProps) => { diff --git a/src/container/listContainer/index.scss b/src/container/listContainer/index.scss index 0a02465..af26e6f 100644 --- a/src/container/listContainer/index.scss +++ b/src/container/listContainer/index.scss @@ -5,6 +5,7 @@ flex-direction: column; gap: 5px; padding-bottom: 34px; + min-height: 100vh; .recommendTextWrapper { display: flex; diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss index 41524a0..77fb979 100644 --- a/src/container/listCustomNavbar/index.scss +++ b/src/container/listCustomNavbar/index.scss @@ -3,6 +3,9 @@ } .listNavContainer { + display: flex; + align-items: center; + .listNavLine { width: 1px; height: 25px; @@ -51,6 +54,7 @@ .inputCustomerNavbarContainer { padding-left: 17px; display: flex; + align-items: center; gap: 8px; .logo { @@ -99,6 +103,7 @@ .inputCustomerNavbarShowInput { padding-left: 10px; + .logo { width: 32px; height: 32px; @@ -117,27 +122,26 @@ will-change: opacity, transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; - + /* 优化过渡动画,使用更平滑的缓动函数和更短的动画时间 */ - 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); + 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); } /* 第一个元素样式 */ -.firstElement { -} +.firstElement {} /* 第二个元素样式 */ .secondElement { /* 初始状态:透明且稍微偏移 */ opacity: 0; - transform: translateY(5px); + transform: translateY(-5px); } /* 隐藏状态 */ .hidden { opacity: 0; - transform: translateY(5px); + transform: translateY(-5px); } /* 可见状态 */ diff --git a/src/container/listCustomNavbar/index.tsx b/src/container/listCustomNavbar/index.tsx index 9448770..d99fc73 100644 --- a/src/container/listCustomNavbar/index.tsx +++ b/src/container/listCustomNavbar/index.tsx @@ -7,14 +7,13 @@ 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?: { showInput: boolean; - inputLeftIcon: string; + inputLeftIcon?: string; iconPath?: string; - leftIconClick: () => void; + leftIconClick?: () => void; }; } @@ -29,10 +28,12 @@ const ListHeader = (props: IProps) => { getLocationLoading, statusNavbarHeightInfo, } = useGlobalState(); - const { gamesNum, searchValue, isShowInputCustomerNavBar } = useListState(); - const { navbarHeight } = statusNavbarHeightInfo; + const { gamesNum, searchValue } = useListState(); + const { navBarHeight } = statusNavbarHeightInfo; - const { city,district } = useUserInfo() + const userInfo = useUserInfo() + const city = (userInfo as any)?.city || '' + const district = (userInfo as any)?.district || '' console.log("useUserInfo",city,district ) @@ -67,23 +68,17 @@ const ListHeader = (props: IProps) => { }; const navbarStyle = { - height: `${navbarHeight}px`, - paddingTop: `4px`, + height: `${navBarHeight}px`, }; - const showInputNavBar = useMemo(() => { - return isShowInputCustomerNavBar || showInput; - }, [isShowInputCustomerNavBar, showInput]); - - console.log("===showInputNavBar",showInputNavBar) return ( {/* 首页logo 导航*/}