167 lines
3.3 KiB
Vue
167 lines
3.3 KiB
Vue
<template>
|
||
<view class="tabbar-container" v-if="showTabbar">
|
||
<u-tabbar
|
||
:value="currentPath"
|
||
:fixed="true"
|
||
:placeholder="true"
|
||
:safeAreaInsetBottom="true"
|
||
:border="true"
|
||
:activeColor="activeColor"
|
||
:inactiveColor="inactiveColor"
|
||
:bgColor="bgColor"
|
||
@change="handleTabbarChange"
|
||
>
|
||
<u-tabbar-item
|
||
v-for="(item, index) in tabbarList"
|
||
:key="index"
|
||
:name="item.pagePath"
|
||
:text="item.text"
|
||
>
|
||
<template #active-icon>
|
||
<view class="custom-icon active">
|
||
<u-icon
|
||
:name="item.activeIcon || item.icon"
|
||
size="24"
|
||
:color="activeColor"
|
||
/>
|
||
</view>
|
||
</template>
|
||
<template #inactive-icon>
|
||
<view class="custom-icon">
|
||
<u-icon
|
||
:name="item.icon"
|
||
size="24"
|
||
:color="inactiveColor"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</u-tabbar-item>
|
||
</u-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
|
||
const props = defineProps({
|
||
path: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
// 底部导航配置
|
||
const tabbarList = ref([
|
||
{
|
||
pagePath: '/pages/index/menu',
|
||
text: '菜单',
|
||
icon: 'home',
|
||
activeIcon: 'home-fill'
|
||
},
|
||
{
|
||
pagePath: '/pages/index/user',
|
||
text: '我的',
|
||
icon: 'account',
|
||
activeIcon: 'account-fill'
|
||
}
|
||
])
|
||
|
||
// 颜色配置
|
||
const activeColor = '#0055A2'
|
||
const inactiveColor = '#999999'
|
||
const bgColor = '#ffffff'
|
||
|
||
// 当前路径
|
||
const currentPath = computed(() => {
|
||
return props.path || getCurrentPath()
|
||
})
|
||
|
||
// 是否显示tabbar
|
||
const showTabbar = computed(() => {
|
||
const currentRoute = getCurrentPath()
|
||
return tabbarList.value.some(item => item.pagePath === currentRoute)
|
||
})
|
||
|
||
// 获取当前页面路径
|
||
const getCurrentPath = () => {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 0) {
|
||
const currentPage = pages[pages.length - 1]
|
||
return '/' + currentPage.route
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 处理tabbar切换
|
||
const handleTabbarChange = (name) => {
|
||
if (name !== currentPath.value) {
|
||
uni.switchTab({
|
||
url: name,
|
||
fail: (error) => {
|
||
console.error('switchTab failed:', error)
|
||
// 如果switchTab失败，使用普通跳转
|
||
uni.navigateTo({
|
||
url: name,
|
||
fail: (navError) => {
|
||
console.error('navigateTo failed:', navError)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 隐藏原生tabBar
|
||
uni.hideTabBar({
|
||
animation: false
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabbar-container {
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
|
||
.custom-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
transition: transform 0.2s ease;
|
||
|
||
&.active {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
:deep(.u-tabbar) {
|
||
background-color: #ffffff;
|
||
border-top: 1px solid #ebedf0;
|
||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
.u-tabbar-item {
|
||
padding: 4px 0 8px;
|
||
|
||
&__text {
|
||
font-size: 10px;
|
||
margin-top: 4px;
|
||
font-weight: 500;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
&__icon {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 为不同主题色适配
|
||
:deep(.u-tabbar .u-tabbar-item--active .u-tabbar-item__text) {
|
||
color: #0055A2;
|
||
font-weight: 600;
|
||
}
|
||
</style> |