refactor(tabbar): 切换为原生tabbar并清理自定义tabbar相关代码
移除自定义tabbar的配置和代码,改为使用原生tabbar实现 清理未使用的http请求代码和TODO注释 更新相关配置文件和组件逻辑
This commit is contained in:
@@ -15,7 +15,7 @@
|
||||
}
|
||||
},
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"custom": false,
|
||||
"color": "#999999",
|
||||
"selectedColor": "#018d71",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
|
||||
@@ -20,7 +20,7 @@ export const TABBAR_MAP = {
|
||||
// 如果是使用 NO_TABBAR(0),nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
|
||||
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarList,customTabbarList 不生效
|
||||
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 customTabbarList,nativeTabbarList 不生效
|
||||
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: '首页',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user