refactor(tabbar): 切换为原生tabbar并清理自定义tabbar相关代码

移除自定义tabbar的配置和代码,改为使用原生tabbar实现
清理未使用的http请求代码和TODO注释
更新相关配置文件和组件逻辑
This commit is contained in:
feige996
2025-08-17 14:24:16 +08:00
parent ce2421a73c
commit 477edaea1a
3 changed files with 7 additions and 11 deletions

View File

@@ -15,7 +15,7 @@
}
},
"tabBar": {
"custom": true,
"custom": false,
"color": "#999999",
"selectedColor": "#018d71",
"backgroundColor": "#F8F8F8",

View File

@@ -20,7 +20,7 @@ export const TABBAR_MAP = {
// 如果是使用 NO_TABBAR(0)nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarListcustomTabbarList 不生效
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 customTabbarListnativeTabbarList 不生效
export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
type NativeTabBarItem = TabBar['list'][0]
// TODO: 2/3. 使用 NATIVE_TABBAR 时,更新下面的 tabbar 配置
@@ -48,7 +48,7 @@ interface CustomTabBarItem {
badge?: number | 'dot' // badge 显示一个数字或 小红点(样式可以直接在 tabbar/index.vue 里面修改)
isBulge?: boolean // 是否是中间的鼓包tabbarItem
}
// TODO: 2/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
export const customTabbarList: CustomTabBarItem[] = [
{
text: '首页',

View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
// 'i-carbon-code',
import { http } from '@/http/http'
import { tabbarList as _tabbarList, customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
import { tabbarStore } from './store'
@@ -11,14 +10,11 @@ defineOptions({
})
// #endif
// #region 接口获取tabbar demo
http.get('/foo').then((res) => {
console.log('接口获取tabbar demo', res)
})
// #endregion
// TODO 1/2: 中间的鼓包tabbarItem的开关
const BULGE_ENABLE = false
/**
* 中间的鼓包tabbarItem的点击事件
*/
function handleClickBulge() {
uni.showToast({
title: '点击了中间的鼓包tabbarItem',
@@ -94,7 +90,7 @@ function getImageByIndex(index: number, item: { iconActive?: string, icon: strin
<view v-if="item.isBulge" class="relative">
<!-- 中间一个鼓包tabbarItem的处理 -->
<view class="bulge">
<!-- TODO 2/2: 通常是一个图片或者icon点击触发业务逻辑 -->
<!-- TODO 2/2: 中间鼓包tabbarItem配置通常是一个图片或者icon点击触发业务逻辑 -->
<!-- 常见的是扫描按钮发布按钮更多按钮等 -->
<image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
</view>