From 80985805e034cbaa8b5cfdf736a9b5be2ada5fde Mon Sep 17 00:00:00 2001 From: feige996 <1020102647@qq.com> Date: Mon, 4 Aug 2025 18:19:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E6=B7=BB=E5=8A=A0=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=A0=87=E6=94=AF=E6=8C=81=E5=B9=B6=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在tabbar组件中添加对本地图标类型的支持 - 更新README文档，增加tabbar策略说明 - 调整pages.json配置，将首页图标改为本地类型 - 完善配置文件的TODO注释说明 --- src/tabbar/README.md | 17 +++++++++++------ src/tabbar/config.ts | 6 +++--- src/tabbar/index.vue | 7 +++++++ 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 95e24b2..15a9427 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -1,5 +1,7 @@ # tabbar 说明 +## tabbar 4种策略 + `tabbar` 分为 `4 种` 情况： - 0 `无 tabbar`，只有一个页面入口，底部无 `tabbar` 显示；常用语临时活动页。 @@ -16,12 +18,15 @@ > 注意：花里胡哨的效果需要自己实现，本模版不提供。 -## 配置说明 +## tabbar 配置说明 -- 如果使用的是原生tabbar, 则每个 item 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。 -- 如果使用的是自定义tabbar, 则每个 item 需要配置 `path`、`text`、`icon` 、`iconType` 等属性。 +- 如果使用的是原生tabbar, 则每个 `item` 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。 +- 如果使用的是自定义tabbar, 则每个 `item` 需要配置 `path`、`text`、`icon` 、`iconType` 等属性（如果是local还需要配置2种图片）。 -## 如果是自定义tabbar, 且通过接口拿到tabbar列表 -则，需要跟原生tabbar的path对应上即可。 +## 接口拿到tabbar列表怎么处理？ -另外，如果用的是 Unocss 图标，还需要在 `uno.config.ts` 的 `safelist` 中添加图标名称。 \ No newline at end of file +首先，接口的配置需要跟原生tabbar的 `path` 对应上。 + +然后，可以直接在 `index.vue` 文件请求接口拿到 `tabbarList`，然后赋值给 `tabbarList` 即可。 + +最后，如果用的是 `unocss` 图标，还需要在 `uno.config.ts` 的 `safelist` 中添加图标名称。 \ No newline at end of file diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts index c706139..0053994 100644 --- a/src/tabbar/config.ts +++ b/src/tabbar/config.ts @@ -21,10 +21,10 @@ export const TABBAR_MAP = { CUSTOM_TABBAR_WITHOUT_CACHE: 3, } -// TODO：1. 通过这里切换使用tabbar的策略 +// TODO: 1/3. 通过这里切换使用tabbar的策略 export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR -// TODO：2. 更新下面的tabbar配置 +// TODO: 2/3. 更新下面的tabbar配置 // selectedTabbarStrategy==NATIVE_TABBAR(1) 时，需要填 iconPath 和 selectedIconPath // selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 iconType 和 icon // selectedTabbarStrategy==NO_TABBAR(0) 时，tabbarList 不生效 @@ -46,7 +46,7 @@ export const tabbarList: FgTabBarItem[] = [ // pagePath: 'pages/index/index', // text: '首页', // // 选用 UI 框架自带的 icon 时，iconType 为 uiLib - // // 需要自行替换vue代码中的图标代码，需要查看相关UI库的图标代码 + // // TODO: 3/3. 需要自行替换vue代码中的图标代码，具体代码在 `tabbar/index.vue` 62行 // // 如： (https://wot-design-uni.cn/component/icon.html) // // 如： (https://www.uvui.cn/components/icon.html) // // 如： (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue index 1a6168f..58d76d4 100644 --- a/src/tabbar/index.vue +++ b/src/tabbar/index.vue @@ -43,6 +43,10 @@ const inactiveColor = '#666' function getColorByIndex(index: number) { return tabbarStore.curIdx === index ? activeColor : inactiveColor } + +function getImageByIndex(index: number, item: { iconActive: string, icon: string }) { + return tabbarStore.curIdx === index ? item.iconActive : item.icon +}