fix(tabbar): 修复图片模式下高亮图标属性名错误并更新文档

将 activeIcon 属性名统一改为 iconActive 以保持一致性
更新 README 文档,补充不同图标类型的配置说明
This commit is contained in:
feige996
2025-08-21 17:55:18 +08:00
parent 96f47f121c
commit ad2554079b
3 changed files with 50 additions and 4 deletions

View File

@@ -20,7 +20,7 @@ export const TABBAR_STRATEGY_MAP = {
// 如果是使用 NO_TABBAR(0)nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarListcustomTabbarList 不生效
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 customTabbarListnativeTabbarList 不生效
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.NATIVE_TABBAR
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
type NativeTabBarItem = TabBar['list'][number]
@@ -51,11 +51,12 @@ export interface CustomTabBarItem {
pagePath: string
iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式需要配置2张图
icon: any // 其实是 string 类型,这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
activeIcon?: string // 只有在 image 模式下才需要传递的是高亮的图片PS 不建议用 image 模式)
iconActive?: string // 只有在 image 模式下才需要传递的是高亮的图片PS 不建议用 image 模式)
badge?: number | 'dot' // badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改)
isBulge?: boolean // 是否是中间的鼓包tabbarItem
}
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
// 如果需要配置鼓包,需要在 'tabbar/store.ts' 里面设置,最后在 `tabbar/index.vue` 里面更改鼓包的图片
export const customTabbarList: CustomTabBarItem[] = [
{
text: '首页',