client-app/components/tabbar/index.vue

<template>
    <view class="hc-tabbar-box">
        <view class="hc-tabbar">
            <template v-for="item in tabbar" :key="item.path">
                <view class="item" :class="tabKey === item.path ? 'cur':''" @click="itemClick(item)">
                    <view class="icon-box">
                        <view class="icon">
                            <text :class="item.icon"/>
                        </view>
                    </view>
                    <view class="name">{{ item.name }}</view>
                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {onShow} from '@dcloudio/uni-app'

const tabKey = ref('pages/index/index')
const tabbar = [
    {path: 'pages/index/index', name: '应用主页', icon: 'i-material-symbols-gamepad-rounded'},
    {path: 'pages/task/index', name: '任务消息', icon: 'i-ooui-message'},
    {path: 'pages/my/index', name: '我的', icon: 'i-material-symbols-person'},
];
const itemClick = ({path}) => {
    tabKey.value = path;
    uni.switchTab({
        url: '/' + path,
    })
}

//渲染完成
onMounted(() => {
    setTabbarData();
})

const setTabbarData = () => {
    uni.hideTabBar({
        animation: false
    });
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1]
    tabbar.forEach(({path}) => {
        if (path === currentPage.route) {
            tabKey.value = path;
        }
    })
}

onShow(() => {
    setTabbarData();
})
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>