diff --git a/src/pages/index/Banner.tsx b/src/pages/index/Banner.tsx index 7cc44fc..b43eed0 100644 --- a/src/pages/index/Banner.tsx +++ b/src/pages/index/Banner.tsx @@ -98,7 +98,7 @@ const MyPage = () => { return ( {/* 左侧轮播图区域 */} - + { autoPlay duration={3000} style={{ - height: `${carouselHeight}px`, - touchAction: 'pan-y' + height: `${carouselHeight}px` }} + disableTouch={false} + touchAngle={"45"} // 关键修改:设置触摸角度阈值 > {carouselData && carouselData?.imageList?.map((img, index) => ( @@ -139,7 +140,7 @@ const MyPage = () => { }}> { hotToday?.imageList?.map(item => ( - + { ) } -export default MyPage - +export default MyPage \ No newline at end of file diff --git a/src/pages/index/Header.scss b/src/pages/index/Header.scss index d206e3b..e79ce78 100644 --- a/src/pages/index/Header.scss +++ b/src/pages/index/Header.scss @@ -14,3 +14,10 @@ position: absolute; z-index: 0; } + +/* 吸顶状态下的样式 */ +.nutui-sticky--fixed { + .header-bg { + height: 100%; + } +} \ No newline at end of file diff --git a/src/pages/index/Header.tsx b/src/pages/index/Header.tsx index ed3b418..aa3d897 100644 --- a/src/pages/index/Header.tsx +++ b/src/pages/index/Header.tsx @@ -1,6 +1,6 @@ import {useEffect, useState} from "react"; import Taro from '@tarojs/taro'; -import {Button, Space} from '@nutui/nutui-react-taro' +import {Button, Space, Sticky} from '@nutui/nutui-react-taro' import {TriangleDown} from '@nutui/icons-react-taro' import {Avatar, NavBar} from '@nutui/nutui-react-taro' import {getUserInfo, getWxOpenId} from "@/api/layout"; @@ -22,6 +22,7 @@ const Header = (props: any) => { const [IsLogin, setIsLogin] = useState(true) const [statusBarHeight, setStatusBarHeight] = useState() + const [stickyStatus, setStickyStatus] = useState(false) const reload = async () => { Taro.getSystemInfo({ @@ -166,53 +167,76 @@ const Header = (props: any) => { }) } + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + console.log('Header 粘性状态:', isSticky ? '已固定' : '取消固定') + } + + // 获取小程序系统信息 + const getSystemInfo = () => { + const systemInfo = Taro.getSystemInfoSync() + // 状态栏高度 + 导航栏高度 (一般为44px) + return (systemInfo.statusBarHeight || 0) + 44 + } + useEffect(() => { reload().then() }, []) return ( <> - - {/* 只在非吸顶状态下显示搜索框 */} - {!props.stickyStatus && } - - { + zIndex: 1000, + backgroundColor: stickyStatus ? '#03605c' : 'transparent', + transition: 'background-color 0.3s ease', }} - left={ - !IsLogin ? ( - - - - ) : ( - - - {getWebsiteName()} - - - )}> - {/**/} - + > + + {/* 只在非吸顶状态下显示搜索框 */} + {!stickyStatus && } + + { + }} + left={ + !IsLogin ? ( + + + + ) : ( + + + {getWebsiteName()} + + + )}> + {/**/} + + ) } diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 20ceee9..bb63e06 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -18,3 +18,29 @@ page { height: 70px; } } + +/* 轮播图容器样式,确保不阻止页面滚动 */ +.banner-swiper-container { + touch-action: pan-y !important; + + .nut-swiper { + touch-action: pan-y !important; + pointer-events: none; // 关键修改:禁用Swiper的指针事件 + + .nut-swiper-item { + touch-action: pan-y !important; + pointer-events: none; // 关键修改:禁用Swiper Item的指针事件 + + image { + pointer-events: auto; // 重新启用图片的指针事件,以便点击功能正常 + } + } + } +} + +/* 吸顶状态下的样式 */ +.nutui-sticky--fixed { + .header-bg { + height: 100%; + } +} \ No newline at end of file diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 0d20808..3f33d9a 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -4,19 +4,16 @@ import Taro from '@tarojs/taro'; import {useShareAppMessage} from "@tarojs/taro" import {useEffect, useState} from "react"; import {getShopInfo} from "@/api/layout"; -import {Sticky} from '@nutui/nutui-react-taro' import Menu from "./Menu"; import Banner from "./Banner"; import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite"; import './index.scss' -// import GoodsList from "./GoodsList"; - function Home() { // 吸顶状态 // const [stickyStatus, setStickyStatus] = useState(false) // Tabs粘性状态 - const [tabsStickyStatus, setTabsStickyStatus] = useState(false) + const [_, setTabsStickyStatus] = useState(false) useShareAppMessage(() => { // 获取当前用户ID,用于生成邀请链接 @@ -157,20 +154,13 @@ function Home() { return ( <> - {/* Header区域 - 根据Tabs粘性状态决定是否固定 */} - {tabsStickyStatus ? ( - -
- - ) : ( -
- )} + {/* Header区域 - 现在由Header组件内部处理吸顶逻辑 */} +
- {/**/}
) diff --git a/src/pages/order/order.scss b/src/pages/order/order.scss deleted file mode 100644 index bec4fb5..0000000 --- a/src/pages/order/order.scss +++ /dev/null @@ -1,4 +0,0 @@ -// 订单页面样式 -.order-page { - // 订单相关样式 -}