<script lang="ts" setup>
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const { activeTabbar, getTabbarItemValue, setTabbarItemActive, tabbarList } = useTabbar()
|
|
function handleTabbarChange({ value }: { value: string }) {
|
setTabbarItemActive(value)
|
router.pushTab({ name: value })
|
}
|
|
onMounted(() => {
|
// #ifdef APP
|
uni.hideTabBar()
|
// #endif
|
nextTick(() => {
|
if (route.name && route.name !== activeTabbar.value.name) {
|
setTabbarItemActive(route.name)
|
}
|
})
|
})
|
</script>
|
|
<script lang="ts">
|
export default {
|
options: {
|
addGlobalClass: true,
|
virtualHost: true,
|
styleIsolation: 'shared',
|
},
|
}
|
</script>
|
|
<template>
|
<slot />
|
<wd-gap safe-area-bottom height="var(--wot-tabbar-height, 50px)" />
|
<wd-tabbar
|
:model-value="activeTabbar.name" active-color="#0068FF" inactive-color="#1A1A1A" bordered safe-area-inset-bottom fixed custom-class="custom-tabbar-bg"
|
@change="handleTabbarChange"
|
>
|
<wd-tabbar-item
|
v-for="(item, index) in tabbarList" :key="index" :name="item.name"
|
:value="getTabbarItemValue(item.name)" :title="item.title"
|
>
|
<template #icon="{ active }">
|
<image class="h-[44rpx] w-[44rpx]" :src="active ? item.activeIcon : item.inactiveIcon" mode="aspectFit" />
|
</template>
|
</wd-tabbar-item>
|
</wd-tabbar>
|
</template>
|
|
<style lang="scss">
|
.custom-tabbar-bg {
|
border-radius: 20rpx 20rpx 0 0;
|
overflow: hidden;
|
border-top: 2rpx solid var(--wot-color-border-light);
|
}
|
</style>
|
