From c2d41bf1bebcd259bb1af4012a43a13c1b8941a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=A7=E6=A3=AE?= Date: Fri, 7 Nov 2025 11:11:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=9A=E5=8A=A1?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/app.config.ts | 23 ++++++++++- app/components/business/bizcard.tsx | 7 ++-- app/components/layout/Layout.tsx | 12 ++++-- app/custom-tab-bar/index.config.ts | 3 ++ app/custom-tab-bar/index.css | 25 ++++++++++++ app/custom-tab-bar/index.tsx | 63 +++++++++++++++++++++++++++++ app/model/tabbar.model.ts | 13 ++++++ app/pages/cpage/index.config.ts | 6 +++ app/pages/cpage/index.tsx | 15 +++++++ app/pages/index/hooks.ts | 16 +++++++- app/pages/index/index.config.ts | 1 + app/pages/index/index.tsx | 43 +++++++++----------- app/pages/user/index.config.ts | 6 +++ app/pages/user/index.tsx | 10 +++++ app/styles/tailwind.basic.css | 9 +++++ 15 files changed, 218 insertions(+), 34 deletions(-) create mode 100644 app/custom-tab-bar/index.config.ts create mode 100644 app/custom-tab-bar/index.css create mode 100644 app/custom-tab-bar/index.tsx create mode 100644 app/model/tabbar.model.ts create mode 100644 app/pages/cpage/index.config.ts create mode 100644 app/pages/cpage/index.tsx create mode 100644 app/pages/user/index.config.ts create mode 100644 app/pages/user/index.tsx diff --git a/app/app.config.ts b/app/app.config.ts index 9353656..834dbaf 100644 --- a/app/app.config.ts +++ b/app/app.config.ts @@ -1,5 +1,26 @@ export default defineAppConfig({ - pages: ["pages/index/index"], + pages: [ + "pages/index/index", + "pages/user/index", + "pages/cpage/index" + ], + tabBar: { + custom: true, + list: [ + { + pagePath: "pages/index/index", + text: "首页", + }, + { + pagePath: "pages/cpage/index", + text: "自定义页面", + }, + { + pagePath: "pages/user/index", + text: "我的", + }, + ], + }, window: { backgroundTextStyle: "light", navigationBarBackgroundColor: "#fff", diff --git a/app/components/business/bizcard.tsx b/app/components/business/bizcard.tsx index 4367eea..f455d8e 100644 --- a/app/components/business/bizcard.tsx +++ b/app/components/business/bizcard.tsx @@ -7,6 +7,7 @@ * 4. 图片背景风格 * ========================================= **/ + import { View, Text } from "@tarojs/components"; import { memo } from "react"; @@ -23,17 +24,17 @@ export const BizCardTpl_01 = memo(({ userInfo }: BizCardProps) => { ); }); -export const BizCardTpl_02 = memo(() => { +export const BizCardTpl02 = memo(() => { return ( - Card Title + Card Title2 ); }); export const BizCardTpl_03 = memo(() => { return ( - + Card Title ); diff --git a/app/components/layout/Layout.tsx b/app/components/layout/Layout.tsx index a4e8bfe..14188aa 100644 --- a/app/components/layout/Layout.tsx +++ b/app/components/layout/Layout.tsx @@ -109,12 +109,16 @@ const LayoutContainer = memo( }, ); +interface LayoutFooterProps { + className?: string; +} + // 自定义页脚 底部安全区，暂时未适配 Android -const LayoutFooter = memo(({ children }: PropsWithChildren) => { +const LayoutFooter = memo(({ className, children }: PropsWithChildren) => { return ( - - {children} - + + {children} + ); }); diff --git a/app/custom-tab-bar/index.config.ts b/app/custom-tab-bar/index.config.ts new file mode 100644 index 0000000..172c622 --- /dev/null +++ b/app/custom-tab-bar/index.config.ts @@ -0,0 +1,3 @@ +export default { + "component": true +} \ No newline at end of file diff --git a/app/custom-tab-bar/index.css b/app/custom-tab-bar/index.css new file mode 100644 index 0000000..1e45f3f --- /dev/null +++ b/app/custom-tab-bar/index.css @@ -0,0 +1,25 @@ +.footer_bg{ + background-color: #fff; +} + +.footer_box{ + display: flex; + padding-top: 24px; + align-items: center; + +} +.footer_box .item{ + flex: 1 1 auto; + text-align: center; +} + +.active_text{ + color: #03c160; +} +.text{ + color: #1e2028; +} +.safe_bottom{ + height: env(safe-area-inset-bottom); + height: constant(safe-area-inset-bottom); +} \ No newline at end of file diff --git a/app/custom-tab-bar/index.tsx b/app/custom-tab-bar/index.tsx new file mode 100644 index 0000000..45161a7 --- /dev/null +++ b/app/custom-tab-bar/index.tsx @@ -0,0 +1,63 @@ +import { CoverView } from "@tarojs/components"; +import Taro from "@tarojs/taro"; +import {clsx} from "clsx"; +import { useRecoilState, useSetRecoilState } from "recoil"; +import { tabbarModel, tabbarParamModel } from "@/model/tabbar.model"; +import { throttle } from "@tarojs/runtime"; + +import './index.css'; + +const CustomTabBar = () => { + const [active, setActive] = useRecoilState(tabbarModel); + + const setParam = useSetRecoilState(tabbarParamModel); + const handlerClick = throttle((index: number) => { + if (active == index) return; + console.log(index, "触发次数"); + setActive(index); + switch (index) { + case 1: + Taro.switchTab({ + url: '/pages/index/index', + }) + break; + case 2: + setParam("自定义页面产品") + Taro.switchTab({ + url: '/pages/cpage/index', + }) + break; + case 3: + setParam("自定义页面案例") + Taro.switchTab({ + url: '/pages/cpage/index', + }) + break; + case 4: + Taro.switchTab({ + url: '/pages/user/index', + }) + break; + default: + break; + } + }, 1000) + + return ( + + + handlerClick(1)}>首页 + handlerClick(2)}>产品 + handlerClick(3)}>案例 + handlerClick(4)}>我的 + + + + ); +} + +CustomTabBar.options = { + addGlobalClass: true, +} + +export default CustomTabBar; \ No newline at end of file diff --git a/app/model/tabbar.model.ts b/app/model/tabbar.model.ts new file mode 100644 index 0000000..2b30a4a --- /dev/null +++ b/app/model/tabbar.model.ts @@ -0,0 +1,13 @@ +import { atom } from "recoil"; + + +// 自定义tabbar状态 +export const tabbarModel = atom({ + key:"tabbarModel", + default:1 +}) +// 自定义tabbar携带参数 +export const tabbarParamModel = atom({ + key:"tabbarParamModel", + default:"" +}) \ No newline at end of file diff --git a/app/pages/cpage/index.config.ts b/app/pages/cpage/index.config.ts new file mode 100644 index 0000000..225c168 --- /dev/null +++ b/app/pages/cpage/index.config.ts @@ -0,0 +1,6 @@ +export default definePageConfig({ + navigationBarTitleText: "首页", + disableScroll: true, + navigationBarTextStyle: "white", + usingComponents:{} +}); diff --git a/app/pages/cpage/index.tsx b/app/pages/cpage/index.tsx new file mode 100644 index 0000000..ce8cc30 --- /dev/null +++ b/app/pages/cpage/index.tsx @@ -0,0 +1,15 @@ +import { tabbarParamModel } from "@/model/tabbar.model"; +import { View, Text } from "@tarojs/components"; +import { useRecoilValue } from "recoil"; + + +export default function CPageIndex() { + + const param = useRecoilValue(tabbarParamModel); + + return ( + + {param} + + ); +} \ No newline at end of file diff --git a/app/pages/index/hooks.ts b/app/pages/index/hooks.ts index 7f9b1aa..427bba8 100644 --- a/app/pages/index/hooks.ts +++ b/app/pages/index/hooks.ts @@ -1,3 +1,4 @@ +import { useRefresherConfig } from "@/components/layout"; import Taro from "@tarojs/taro"; import { useState } from "react"; @@ -5,7 +6,7 @@ import { useState } from "react"; export const usePageContent = () => { const [pageContent, setPageContent] = useState(""); const [pageLoading, setPageLoading] = useState(true); - + console.log("执行次数") const loadPageContent = async (code: string) => { try { console.log("Page content loaded:", code); @@ -23,5 +24,16 @@ export const usePageContent = () => { } }; - return { pageLoading, pageContent, loadPageContent }; + // 下拉刷新 + const refresherConfig = useRefresherConfig({ + refresherEnabled: true, + refresherBackground: "#000", + refresherDefaultStyle: "white", + refresherThreshold: 50, + onRefresherRefresh: (event) => { + console.log("触发下拉刷新", event); + }, + }); + + return { pageLoading, pageContent, refresherConfig, loadPageContent }; }; diff --git a/app/pages/index/index.config.ts b/app/pages/index/index.config.ts index b530ea3..225c168 100644 --- a/app/pages/index/index.config.ts +++ b/app/pages/index/index.config.ts @@ -2,4 +2,5 @@ export default definePageConfig({ navigationBarTitleText: "首页", disableScroll: true, navigationBarTextStyle: "white", + usingComponents:{} }); diff --git a/app/pages/index/index.tsx b/app/pages/index/index.tsx index fabc442..2c39365 100644 --- a/app/pages/index/index.tsx +++ b/app/pages/index/index.tsx @@ -1,49 +1,44 @@ import Layout from "@/components/layout/Layout"; import { View } from "@tarojs/components"; -import { useDidShow } from "@tarojs/taro"; -import { useRefresherConfig } from "@/components/layout"; -import React, { Suspense } from "react"; +import Taro, { useDidShow } from "@tarojs/taro"; +import React from "react"; import { usePageContent } from "./hooks"; const BizCardTpl02 = React.lazy(() => import("@/components/business").then((module) => ({ - default: module.BizCardTpl_02, + default: module.BizCardTpl02, })), ); export default function Index() { - const { pageLoading, pageContent, loadPageContent } = usePageContent(); - - // 下拉刷新 - const refresherConfig = useRefresherConfig({ - refresherEnabled: true, - refresherBackground: "#000", - refresherDefaultStyle: "white", - refresherThreshold: 50, - onRefresherRefresh: (event) => { - console.log("触发下拉刷新", event); - }, - }); + const { pageLoading, pageContent, refresherConfig, loadPageContent } = usePageContent(); useDidShow(async () => { await loadPageContent("测试身份编码"); + Taro.switchTab({ url: "/pages/index/index" }); console.log("Page shown."); }); - + return ( - 测试导航栏 + {pageContent} - 加载中}> - + - - + + - 测试页脚 + {/* + + 首页 + 产品 + 案例 + 我的 + + */} ); } diff --git a/app/pages/user/index.config.ts b/app/pages/user/index.config.ts new file mode 100644 index 0000000..225c168 --- /dev/null +++ b/app/pages/user/index.config.ts @@ -0,0 +1,6 @@ +export default definePageConfig({ + navigationBarTitleText: "首页", + disableScroll: true, + navigationBarTextStyle: "white", + usingComponents:{} +}); diff --git a/app/pages/user/index.tsx b/app/pages/user/index.tsx new file mode 100644 index 0000000..e552f53 --- /dev/null +++ b/app/pages/user/index.tsx @@ -0,0 +1,10 @@ +import { View, Text } from "@tarojs/components"; + + +export default function UserIndex() { + return ( + + UserIndex + + ); +} \ No newline at end of file diff --git a/app/styles/tailwind.basic.css b/app/styles/tailwind.basic.css index 50d2f0c..99b2d2a 100644 --- a/app/styles/tailwind.basic.css +++ b/app/styles/tailwind.basic.css @@ -1,5 +1,14 @@ @import "weapp-tailwindcss"; + +@theme inline { + --color-primary: #03c160; /* 主要颜色 */ + --color-bg-white: #ffffff; /* 白色背景 */ + --color-bg-gray: #F8F9FA; /* 背景颜色 */ + --color-title: #1e2028; /* 标题颜色 */ + --color-text: #6e7382; /* 文本颜色 */ +} + @layer utilities { .safe_bottom { height: env(safe-area-inset-bottom);