diff --git a/src/app.ts b/src/app.ts index 8284745..7701b4a 100644 --- a/src/app.ts +++ b/src/app.ts @@ -38,6 +38,8 @@ function App(props: { children: any; }) { }; // 可以使用所有的 React Hooks useEffect(() => { + // 设置主题 + handleTheme() // Taro.getSetting:获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 Taro.getSetting({ success: (res) => { @@ -102,7 +104,6 @@ function App(props: { children: any; }) { // 对应 onHide useDidHide(() => { - handleTheme() }) return props.children diff --git a/src/pages/index/BestSellers.tsx b/src/pages/index/BestSellers.tsx index c06d0e7..1965f64 100644 --- a/src/pages/index/BestSellers.tsx +++ b/src/pages/index/BestSellers.tsx @@ -1,15 +1,16 @@ import {useEffect, useState} from "react"; -import {Image, Tabs, Empty} from '@nutui/nutui-react-taro' +import {Image, Tabs, Empty, Sticky} from '@nutui/nutui-react-taro' import {Share} from '@nutui/icons-react-taro' import {View, Text} from '@tarojs/components'; import Taro from "@tarojs/taro"; import {ShopGoods} from "@/api/shop/shopGoods/model"; import {pageShopGoods} from "@/api/shop/shopGoods"; -const BestSellers = () => { +const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => { const [tab1value, setTab1value] = useState('0') const [list, setList] = useState([]) const [goods, setGoods] = useState() + const [stickyStatus, setStickyStatus] = useState(false) const reload = () => { pageShopGoods({}).then(res => { @@ -48,37 +49,62 @@ const BestSellers = () => { }); } + // 处理粘性布局状态变化 + const onStickyChange = (isSticky: boolean) => { + setStickyStatus(isSticky) + // 通知父组件粘性状态变化 + props.onStickyChange?.(isSticky) + console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定') + } + + // 获取小程序系统信息 + const getSystemInfo = () => { + const systemInfo = Taro.getSystemInfoSync() + // 状态栏高度 + 导航栏高度 (一般为44px) + return (systemInfo.statusBarHeight || 0) + 44 + } + useEffect(() => { reload() }, []) - // 注意:不在这里配置分享,避免与首页分享冲突 - // 商品分享应该在商品详情页处理,首页分享应该分享首页本身 - return ( <> - {/* Tabs切换组件 */} - { - setTab1value(value) - }} + {/* Tabs粘性布局组件 */} + - - - - - - - + { + setTab1value(value) + }} + style={{ + backgroundColor: 'transparent', + paddingTop: stickyStatus ? '8px' : '0', + paddingBottom: stickyStatus ? '8px' : '0', + }} + activeType="smile" + > + + + + + + + + - + {/* 今日主推 */} {tab1value == '0' && list?.map((item, index) => { return ( diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 3aee534..7547bec 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -15,6 +15,8 @@ import './index.scss' function Home() { // 吸顶状态 const [stickyStatus, setStickyStatus] = useState(false) + // Tabs粘性状态 + const [tabsStickyStatus, setTabsStickyStatus] = useState(false) useShareAppMessage(() => { // 获取当前用户ID,用于生成邀请链接 @@ -85,6 +87,11 @@ function Home() { } } + // 处理Tabs粘性状态变化 + const handleTabsStickyChange = (isSticky: boolean) => { + setTabsStickyStatus(isSticky) + } + const reload = () => { }; @@ -150,13 +157,19 @@ function Home() { return ( <> - onSticky(arguments)}> -
- + {/* Header区域 - 根据Tabs粘性状态决定是否固定 */} + {tabsStickyStatus ? ( + +
+ + ) : ( +
+ )} +
- + {/**/}