diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts index 8a0a1e9..f5f9544 100644 --- a/src/tabbar/config.ts +++ b/src/tabbar/config.ts @@ -46,13 +46,16 @@ export const nativeTabbarList: NativeTabBarItem[] = [ }, ] +// badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改) +export type CustomTabBarItemBadge = number | 'dot' + export interface CustomTabBarItem { text: string pagePath: string iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式,需要配置2张图 icon: any // 其实是 string 类型,这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行) iconActive?: string // 只有在 image 模式下才需要,传递的是高亮的图片(PS: 不建议用 image 模式) - badge?: number | 'dot' // badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改) + badge?: CustomTabBarItemBadge isBulge?: boolean // 是否是中间的鼓包tabbarItem } // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置 diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue index eaaf36b..f8b5ce3 100644 --- a/src/tabbar/index.vue +++ b/src/tabbar/index.vue @@ -110,7 +110,7 @@ function getImageByIndex(index: number, item: CustomTabBarItem) { diff --git a/src/tabbar/store.ts b/src/tabbar/store.ts index 7ac71db..346769c 100644 --- a/src/tabbar/store.ts +++ b/src/tabbar/store.ts @@ -1,4 +1,4 @@ -import type { CustomTabBarItem } from './config' +import type { CustomTabBarItem, CustomTabBarItemBadge } from './config' import { tabbarList as _tabbarList, customTabbarEnable } from './config' // TODO 1/2: 中间的鼓包tabbarItem的开关 @@ -35,6 +35,9 @@ const tabbarStore = reactive({ this.curIdx = idx uni.setStorageSync('app-tabbar-index', idx) }, + setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) { + tabbarList[idx].badge = badge + }, setAutoCurIdx(path: string) { const index = tabbarList.findIndex(item => item.pagePath === path) console.log('index:', index, path)