From edbccb36b34128be425cf45f75d8c6d0bc7e1256 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Mon, 4 Aug 2025 14:01:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(tabbar):=20=E6=9B=B4=E6=96=B0=E5=9B=BE?=
=?UTF-8?q?=E6=A0=87=E9=85=8D=E7=BD=AE=E5=92=8C=E6=A0=B7=E5=BC=8F=E5=A4=84?=
=?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 将首页图标从UI库图标改为本地图片
- 调整tabbar图片样式类写法
- 移除首页页面中的示例代码
- 更新tabbar配置类型和注释说明
---
src/pages.json | 4 ++--
src/pages/index/index.vue | 4 ++--
src/tabbar/config.ts | 28 +++++++++++++++++-----------
src/tabbar/index.vue | 2 +-
4 files changed, 22 insertions(+), 16 deletions(-)
diff --git a/src/pages.json b/src/pages.json
index 565164d..945fb03 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -30,8 +30,8 @@
"selectedIconPath": "static/tabbar/homeHL.png",
"pagePath": "pages/index/index",
"text": "首页",
- "icon": "home",
- "iconType": "uiLib"
+ "icon": "/static/tabbar/home.png",
+ "iconType": "local"
},
{
"iconPath": "static/tabbar/example.png",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 272378b..c382766 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -51,7 +51,7 @@ console.log('index')
-
+
diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index 3b2a0a5..556b7bd 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -2,7 +2,7 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
type FgTabBarItem = TabBar['list'][0] & {
icon: string
- iconType: 'uiLib' | 'unocss' | 'iconfont'
+ iconType: 'uiLib' | 'unocss' | 'iconfont' | 'local'
}
/**
@@ -26,7 +26,7 @@ export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
// TODO：2. 更新下面的tabbar配置
// selectedTabbarStrategy==NATIVE_TABBAR(1) 时，需要填 iconPath 和 selectedIconPath
-// selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 icon 和 iconType
+// selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时，需要填 iconType 和 icon
// selectedTabbarStrategy==NO_TABBAR(0) 时，tabbarList 不生效
export const tabbarList: FgTabBarItem[] = [
{
@@ -34,33 +34,39 @@ export const tabbarList: FgTabBarItem[] = [
selectedIconPath: 'static/tabbar/homeHL.png',
pagePath: 'pages/index/index',
text: '首页',
- icon: 'home',
// 选用 UI 框架自带的 icon 时，iconType 为 uiLib
+ // 需要自行替换vue代码中的图标代码
iconType: 'uiLib',
+ icon: 'home',
},
{
iconPath: 'static/tabbar/example.png',
selectedIconPath: 'static/tabbar/exampleHL.png',
pagePath: 'pages/about/about',
text: '关于',
- icon: 'i-carbon-code',
// 注意 unocss 图标需要如下处理：（二选一）
// 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行）
// 2）配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
+ icon: 'i-carbon-code',
},
// {
- // pagePath: 'pages/my/index',
- // text: '我的',
- // icon: '/static/logo.svg',
- // iconType: 'local',
- // },
- // {
// pagePath: 'pages/mine/index',
// text: '我的',
// // 注意 iconfont 图标需要额外加上 'iconfont'，如下
- // icon: 'iconfont icon-my',
// iconType: 'iconfont',
+ // icon: 'iconfont icon-my',
+ // },
+ // {
+ // iconPath: 'static/tabbar/home.png',
+ // selectedIconPath: 'static/tabbar/homeHL.png',
+ // pagePath: 'pages/index/index',
+ // text: '首页',
+ // // 使用 ‘local’时，需要配置 icon + iconActive 2张图片（不推荐）
+ // // 既然已经用了自定义tabbar了，就不建议用图片了，所以不推荐
+ // iconType: 'local',
+ // icon: '/static/tabbar/home.png',
+ // iconActive: '/static/tabbar/homeHL.png',
// },
]
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index ff96e7e..e924d33 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -55,7 +55,7 @@ onLoad(() => {
-
+