refactor(tabbar): 重构底部导航栏配置及逻辑
将底部导航栏配置从 pages.config.ts 移动到单独的文件中 添加 CUSTOM_TABBAR_ENABLE 开关控制自定义导航栏行为 优化导航栏切换逻辑,根据开关选择不同跳转方式
This commit is contained in:
parent
13ebc5aacc
commit
91faa0f301
@ -1,5 +1,5 @@
|
||||
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({
|
||||
globalStyle: {
|
||||
@ -18,19 +18,5 @@ export default defineUniPages({
|
||||
'z-paging/components/z-paging$1/z-paging$1.vue',
|
||||
},
|
||||
},
|
||||
// 如果不需要tabBar,直接把下面的tabbar删除或者注释掉即可
|
||||
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,
|
||||
},
|
||||
tabBar: tabBar as any,
|
||||
})
|
||||
|
@ -35,22 +35,24 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// unocss icon 默认不生效,需要在这里写一遍才能生效!注释掉也是生效的,但是必须要有!
|
||||
// i-carbon-code
|
||||
import { tabBarList as _tabBarList } from '@/utils/index'
|
||||
import { tabbarList as _tabBarList, CUSTOM_TABBAR_ENABLE } from './tabbarList'
|
||||
import { tabbarStore } from './tabbar'
|
||||
import {} from './tabbarList'
|
||||
|
||||
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
|
||||
const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` }))
|
||||
|
||||
function selectTabBar({ value: index }: { value: number }) {
|
||||
const url = tabbarList[index].path
|
||||
tabbarStore.setCurIdx(index)
|
||||
if (CUSTOM_TABBAR_ENABLE) {
|
||||
uni.navigateTo({ url })
|
||||
} else {
|
||||
uni.switchTab({ url })
|
||||
}
|
||||
}
|
||||
onLoad(() => {
|
||||
// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
|
||||
// #ifdef APP-PLUS | H5
|
||||
!CUSTOM_TABBAR_ENABLE &&
|
||||
uni.hideTabBar({
|
||||
fail(err) {
|
||||
console.log('hideTabBar fail: ', err)
|
||||
@ -59,6 +61,5 @@ onLoad(() => {
|
||||
console.log('hideTabBar success: ', res)
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
</script>
|
||||
|
@ -31,3 +31,20 @@ export const midButton = {
|
||||
iconPath: '/static/logo.svg',
|
||||
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
|
||||
|
Loading…
x
Reference in New Issue
Block a user