refactor(tabbar): 调整tabbar策略编号和逻辑

更新tabbar策略编号定义和相关的条件判断逻辑,使编号更符合实际功能顺序
同步修改文档说明和缓存判断条件
This commit is contained in:
feige996
2025-06-25 15:42:22 +08:00
parent 0f2c5a9e02
commit 2eef641636
3 changed files with 17 additions and 16 deletions

View File

@@ -4,7 +4,7 @@ import { tabbarStore } from './tabbar'
import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy } from './tabbarList'
// @ts-expect-error 预知的判断
const customTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
const customTabbarEnable = selectedTabbarStrategy === 2 || selectedTabbarStrategy === 3
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
function selectTabBar({ value: index }: { value: number }) {
@@ -20,7 +20,7 @@ function selectTabBar({ value: index }: { value: number }) {
onLoad(() => {
// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
// @ts-expect-error 预知的判断
const hideRedundantTabbarEnable = selectedTabbarStrategy === 1
const hideRedundantTabbarEnable = selectedTabbarStrategy === 2
hideRedundantTabbarEnable
&& uni.hideTabBar({
fail(err) {

View File

@@ -2,15 +2,16 @@
`tabbar` 分为 `4 种` 情况:
- 0 `完全原生 tabbar`使用 `switchTab` 切换 tabbar`tabbar` 页面有缓存
- 0 ` tabbar`只有一个页面入口,底部无 `tabbar` 显示;常用语临时活动页
- 1 `原生 tabbar`,使用 `switchTab` 切换 tabbar`tabbar` 页面有缓存。
- 优势:原生自带的 tabbar最先渲染有缓存。
- 劣势:只能使用 2 组图片来切换选中和非选中状态,修改颜色只能重新换图片(或者用 iconfont
- 1 `自定义 tabbar`,使用 `switchTab` 切换 tabbar`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件,并隐藏了原生 `tabbar` 的显示。
- 2 `有缓存自定义 tabbar`,使用 `switchTab` 切换 tabbar`tabbar` 页面有缓存。使用了第三方 UI 库的 `tabbar` 组件,并隐藏了原生 `tabbar` 的显示。
- 优势:可以随意配置自己想要的 `svg icon`,切换字体颜色方便。有缓存。可以实现各种花里胡哨的动效等。
- 劣势:首次点击 tababr 会闪烁。
- 2 `自定义 tabbar`,使用 `navigateTo` 切换 `tabbar``tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。
- 3 `无缓存自定义 tabbar`,使用 `navigateTo` 切换 `tabbar``tabbar` 页面无缓存。使用了第三方 UI 库的 `tabbar` 组件。
- 优势:可以随意配置自己想要的 svg icon切换字体颜色方便。可以实现各种花里胡哨的动效等。
- 劣势:首次点击 `tababr` 会闪烁,无缓存。
- 3 `无 tabbar`,只有一个页面入口,底部无 `tabbar` 显示;常用语临时活动页。
> 注意:花里胡哨的效果需要自己实现,本模版不提供。

View File

@@ -1,19 +1,19 @@
/**
* tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
* 0: 'NATIVE_TABBAR' `完全原生 tabbar`
* 2: 'FULL_CUSTOM_TABBAR' `全自定义 tabbar`
* 1: 'HALF_CUSTOM_TABBAR' `半自定义 tabbar`
* 3: 'NO_TABBAR' `无 tabbar`
* 0: 'NO_TABBAR' `无 tabbar`
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
* 3: 'CUSTOM_TABBAR_NO_CACHE' `无缓存自定义 tabbar`
*
* 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致错误
*/
// TODO通过这里切换使用tabbar的策略
export const selectedTabbarStrategy = 0
export const selectedTabbarStrategy = 1
// selectedTabbarStrategy==0 时,需要填 iconPath 和 selectedIconPath
// selectedTabbarStrategy==1 or 2 时,需要填 icon 和 iconType
// selectedTabbarStrategy==3tabbarList 不生效
// selectedTabbarStrategy==1 时,需要填 iconPath 和 selectedIconPath
// selectedTabbarStrategy==2 or 3 时,需要填 icon 和 iconType
// selectedTabbarStrategy==0tabbarList 不生效
export const tabbarList = [
{
iconPath: 'static/tabbar/home.png',
@@ -46,8 +46,8 @@ export const tabbarList = [
// },
]
// 01需要tabbar缓存
export const cacheTabbarEnable = selectedTabbarStrategy < 2
// 12需要tabbar缓存
export const cacheTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
const _tabbar = {
color: '#999999',