refactor(tabbar): 调整tabbar策略编号和逻辑
更新tabbar策略编号定义和相关的条件判断逻辑,使编号更符合实际功能顺序 同步修改文档说明和缓存判断条件
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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` 显示;常用语临时活动页。
|
||||
|
||||
|
||||
> 注意:花里胡哨的效果需要自己实现,本模版不提供。
|
||||
|
||||
@@ -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==3 时,tabbarList 不生效
|
||||
// selectedTabbarStrategy==1 时,需要填 iconPath 和 selectedIconPath
|
||||
// selectedTabbarStrategy==2 or 3 时,需要填 icon 和 iconType
|
||||
// selectedTabbarStrategy==0 时,tabbarList 不生效
|
||||
export const tabbarList = [
|
||||
{
|
||||
iconPath: 'static/tabbar/home.png',
|
||||
@@ -46,8 +46,8 @@ export const tabbarList = [
|
||||
// },
|
||||
]
|
||||
|
||||
// 0 和 1 时,需要tabbar缓存
|
||||
export const cacheTabbarEnable = selectedTabbarStrategy < 2
|
||||
// 1 和 2 时,需要tabbar缓存
|
||||
export const cacheTabbarEnable = selectedTabbarStrategy === 1 || selectedTabbarStrategy === 2
|
||||
|
||||
const _tabbar = {
|
||||
color: '#999999',
|
||||
|
||||
Reference in New Issue
Block a user