From 4e1ea8b6cba88b802ca7338161c51f5d42a17cf1 Mon Sep 17 00:00:00 2001 From: feige996 <1020102647@qq.com> Date: Fri, 15 Aug 2025 16:41:03 +0800 Subject: [PATCH] =?UTF-8?q?refactor(tabbar):=20=E5=B0=86=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E6=A0=87=E7=AD=BE=E6=A0=8F=E5=88=97=E8=A1=A8=E7=A7=BB?= =?UTF-8?q?=E8=87=B3=20store=20=E5=B9=B6=E9=87=8D=E6=9E=84=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将 customTabbarList 从 config.ts 移动到 store.ts 中定义 在 tabbarStore 中添加 tabbarList 状态 更新 index.vue 使用 store 中的 tabbarList 替代直接导入 --- src/tabbar/config.ts | 52 ------------------------------------------- src/tabbar/index.vue | 4 ++-- src/tabbar/store.ts | 53 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 54 deletions(-) diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts index 94c4020..eec829e 100644 --- a/src/tabbar/config.ts +++ b/src/tabbar/config.ts @@ -2,14 +2,6 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages' type NativeTabBarItem = TabBar['list'][0] -type CustomTabBarItem = (Pick & { - iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图 - icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行) - activeIcon?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式） - badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改） - isBulge?: boolean // 是否是中间的鼓包tabbarItem -}) - /** * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件 * 0: 'NO_TABBAR' `无 tabbar` @@ -49,50 +41,6 @@ export const nativeTabbarList: NativeTabBarItem[] = [ }, ] -// pagePath 是 nativeTabbarList 和 customTabbarList 的关联点，如果没有对应上，会有问题！！ -// 如果希望通过接口调用 customTabbarList，可以在 tabbar/index.vue 文件里面调用接口 -// 本文件因为需要提前编译生成 pages.json, 接口拦截还不生效，无法正常调用接口 -export const customTabbarList: CustomTabBarItem[] = [ - { - // text 和 pagePath 可以自己直接写，也可以通过索引从 nativeTabbarList 中获取 - text: '首页', - pagePath: 'pages/index/index', // pagePath 是两者的关联点 - // 本框架内置了 uniapp 官方UI库 （uni-ui)的图标库 - // 使用方式如： - // 图标列表地址：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html - iconType: 'uniUi', - icon: 'home', - // badge: 'dot', - }, - { - text: nativeTabbarList[1].text, - pagePath: nativeTabbarList[1].pagePath, // pagePath 是两者的关联点 - // 注意 unocss 图标需要如下处理：（二选一） - // 1）在fg-tabbar.vue页面上引入一下并注释掉（见tabbar/index.vue代码第2行） - // 2）配置到 unocss.config.ts 的 safelist 中 - iconType: 'unocss', - icon: 'i-carbon-code', - // badge: 10, - }, - - // { - // pagePath: 'pages/mine/index', - // text: '我的', - // // 注意 iconfont 图标需要额外加上 'iconfont'，如下 - // iconType: 'iconfont', - // icon: 'iconfont icon-my', - // }, - // { - // pagePath: 'pages/index/index', - // text: '首页', - // // 使用 ‘image’时，需要配置 icon + iconActive 2张图片（不推荐） - // // 既然已经用了自定义tabbar了，就不建议用图片了，所以不推荐 - // iconType: 'image', - // icon: '/static/tabbar/home.png', - // iconActive: '/static/tabbar/homeHL.png', - // }, -] - // NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时，需要tabbar缓存 /** 是否启用 tabbar 缓存 */ export const tabbarCacheEnable diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue index ba3884f..d9f1ee5 100644 --- a/src/tabbar/index.vue +++ b/src/tabbar/index.vue @@ -1,6 +1,6 @@