gxt_app/components/custom-tabbar/custom-tabbar.uvue

<template>
    <view class="custom-tabbar">
        <view v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTabClick(index)">
            <image class="tab-icon" :src="currentIndex == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
            <text :class="['tab-text', currentIndex == index ? 'tab-text-active' : '']">
                {{ item.text }}
            </text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'

    // Props
    type Props = {
        current?: number
    }

    const props = withDefaults(defineProps<Props>(), {
        current: 0
    })

    // Tab 列表配置
    type TabItem = {
        pagePath: string
        text: string
        iconPath: string
        selectedIconPath: string
    }

    const tabList: TabItem[] = [
        {
            pagePath: '/pages/index/index',
            text: '首页',
            iconPath: '/static/images/custom-tabbar/11.png',
            selectedIconPath: '/static/images/custom-tabbar/22.png'
        },
        {
            pagePath: '/pages/order/index',
            text: '工单',
            iconPath: '/static/images/custom-tabbar/33.png',
            selectedIconPath: '/static/images/custom-tabbar/44.png'
        },
		{
		    pagePath: '/pages/worktime/index',
		    text: '工时',
		    iconPath: '/static/images/custom-tabbar/77.png',
		    selectedIconPath: '/static/images/custom-tabbar/88.png'
		},
		{
		    pagePath: '/pages/score/index',
		    text: '工分',
		    iconPath: '/static/images/custom-tabbar/55.png',
		    selectedIconPath: '/static/images/custom-tabbar/66.png'
		}
    ]

    // 当前选中索引
    const currentIndex = ref<number>(props.current)

    // Tab 点击事件
    const handleTabClick = (index: number): void => {
        if (index == currentIndex.value) {
            return
        }
        currentIndex.value = index
        const item = tabList[index]
        uni.redirectTo({
            url: item.pagePath
        })
    }
</script>

<style lang="scss">
    .custom-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: 150rpx;
        background-color: #ffffff;
        border-top: 1rpx solid #e5e5e5;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tab {
        &-item {
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        &-icon {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 8rpx;
        }

        &-text {
            font-size: 24rpx;
            color: #666666;

            &-active {
                color: #0081ff;
            }
        }
    }
</style>