refactor(tabbar): 重构底部导航栏配置及逻辑

将底部导航栏配置从 pages.config.ts 移动到单独的文件中
添加 CUSTOM_TABBAR_ENABLE 开关控制自定义导航栏行为
优化导航栏切换逻辑,根据开关选择不同跳转方式
This commit is contained in:
feige996 2025-06-21 12:54:52 +08:00
parent 13ebc5aacc
commit 91faa0f301
3 changed files with 35 additions and 31 deletions

View File

@ -1,5 +1,5 @@
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages' import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
import { tabbarList, midButton } from './src/components/fg-tabbar/tabbarList' import { tabBar } from './src/components/fg-tabbar/tabbarList'
export default defineUniPages({ export default defineUniPages({
globalStyle: { globalStyle: {
@ -18,19 +18,5 @@ export default defineUniPages({
'z-paging/components/z-paging$1/z-paging$1.vue', 'z-paging/components/z-paging$1/z-paging$1.vue',
}, },
}, },
// 如果不需要tabBar直接把下面的tabbar删除或者注释掉即可 tabBar: tabBar as any,
tabBar: {
// custom: true,
color: '#999999',
selectedColor: '#018d71',
backgroundColor: '#F8F8F8',
borderStyle: 'black',
height: '50px',
fontSize: '10px',
iconWidth: '24px',
spacing: '3px',
list: tabbarList as any,
// midButton 仅App和H5支持
midButton: midButton,
},
}) })

View File

@ -35,22 +35,24 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// unocss icon import { tabbarList as _tabBarList, CUSTOM_TABBAR_ENABLE } from './tabbarList'
// i-carbon-code
import { tabBarList as _tabBarList } from '@/utils/index'
import { tabbarStore } from './tabbar' import { tabbarStore } from './tabbar'
import {} from './tabbarList'
/** tabbarList 里面的 path 从 pages.config.ts 得到 */ /** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` })) const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` }))
function selectTabBar({ value: index }: { value: number }) { function selectTabBar({ value: index }: { value: number }) {
const url = tabbarList[index].path const url = tabbarList[index].path
tabbarStore.setCurIdx(index) tabbarStore.setCurIdx(index)
if (CUSTOM_TABBAR_ENABLE) {
uni.navigateTo({ url })
} else {
uni.switchTab({ url }) uni.switchTab({ url })
}
} }
onLoad(() => { onLoad(() => {
// tabBar 2 tabBar // tabBar 2 tabBar
// #ifdef APP-PLUS | H5 !CUSTOM_TABBAR_ENABLE &&
uni.hideTabBar({ uni.hideTabBar({
fail(err) { fail(err) {
console.log('hideTabBar fail: ', err) console.log('hideTabBar fail: ', err)
@ -59,6 +61,5 @@ onLoad(() => {
console.log('hideTabBar success: ', res) console.log('hideTabBar success: ', res)
}, },
}) })
// #endif
}) })
</script> </script>

View File

@ -31,3 +31,20 @@ export const midButton = {
iconPath: '/static/logo.svg', iconPath: '/static/logo.svg',
text: '发布', text: '发布',
} }
const _tabbar = {
color: '#999999',
selectedColor: '#018d71',
backgroundColor: '#F8F8F8',
borderStyle: 'black',
height: '50px',
fontSize: '10px',
iconWidth: '24px',
spacing: '3px',
list: tabbarList as any,
// midButton 仅App和H5支持
midButton: midButton,
}
export const CUSTOM_TABBAR_ENABLE = false
export const tabBar = CUSTOM_TABBAR_ENABLE ? undefined : _tabbar