diff --git a/src/tabbar/README.md b/src/tabbar/README.md index e4487b8..c2b89eb 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -31,3 +31,48 @@ - `store.ts` ,专门给 `自定义 tabbar` 提供状态管理,代码几乎不需要修改。 - `index.vue` ,专门给 `自定义 tabbar` 提供渲染逻辑,代码可以稍微修改,以符合自己的需求。 +## 自定义tabbar的不同类型的配置 + +- uniUi 图标 + + ```js + { + // ... 其他配置 + "iconType": "uniUi", + "icon": "home", + } + ``` +- unocss 图标 + + ```js + { + // ... 其他配置 + // 注意 unocss 图标需要如下处理:(二选一) + // 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行) + // 2)配置到 unocss.config.ts 的 safelist 中 + iconType: 'unocss', + icon: 'i-carbon-code', + } + ``` +- iconfont 图标 + + ```js + { + // ... 其他配置 + // 注意 iconfont 图标需要额外加上 'iconfont',如下 + iconType: 'iconfont', + icon: 'iconfont icon-my', + } + ``` +- image 本地图片 + + ```js + { + // ... 其他配置 + // 使用 ‘image’时,需要配置 icon + iconActive 2张图片(不推荐) + // 既然已经用了自定义tabbar了,就不建议用图片了,所以不推荐 + iconType: 'image', + icon: '/static/tabbar/home.png', + iconActive: '/static/tabbar/homeHL.png', + } + ``` diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts index d447273..0c15e6d 100644 --- a/src/tabbar/config.ts +++ b/src/tabbar/config.ts @@ -20,7 +20,7 @@ export const TABBAR_STRATEGY_MAP = { // 如果是使用 NO_TABBAR(0),nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管) // 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarList,customTabbarList 不生效 // 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 customTabbarList,nativeTabbarList 不生效 -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: '首页', diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue index 1a03138..eaaf36b 100644 --- a/src/tabbar/index.vue +++ b/src/tabbar/index.vue @@ -57,11 +57,11 @@ function getColorByIndex(index: number) { } function getImageByIndex(index: number, item: CustomTabBarItem) { - if (!item.activeIcon) { + if (!item.iconActive) { console.warn('image 模式下,需要配置 iconActive (高亮时的图片),否则无法切换高亮图片') return item.icon } - return tabbarStore.curIdx === index ? item.activeIcon : item.icon + return tabbarStore.curIdx === index ? item.iconActive : item.icon }