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 { 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,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user