uniapp小程序实现自定义tabbar_uniapp 小程序自定义tabbar

先在项目公共组件中创建文件

组件代码

<template>
    <view class="tab_bar">
        <view class="tabbarBox">
 
            <view class="handleBox" v-for="(item, index) in tabBarList" :key="index" @click="goPages(item.pagePath, index)">
                <view class="menuBox">
                    <image class="img" :src="selectIndex === index ? item.selectedIconPath : item.iconPath"></image>
                    <text class="menuBoxText" :class="index === selectIndex ? 'TextColor' : 'Text'">{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
    selectIndex: {
        type: Number,
 
    }
})
// iconPath 没选择图标
// selectedIconPath 选中时的图标
const tabBarList = [
    {
        pagePath: "/pages/home/index",
        iconPath: "/static/icon_main_tab_home.png",
        selectedIconPath: "/static/icon_main_tab_home_selected.png",
        text: "首页"
    }, {
        pagePath: "/pages/activity/index",
        iconPath: "/static/icon_main_tab_benefit.png",
        selectedIconPath: "/static/icon_main_tab_benefit_selected.png",
        text: "福利"
    },
    {
        pagePath: "/pages/card/index",
        iconPath: "/static/icon_main_tab_mid.png",
        selectedIconPath: "/static/icon_main_tab_mid.png",
        text: "抽卡机"
    },
    {
        pagePath: "/pages/cabinet/index",
        iconPath: "/static/icon_main_tab_cabinet.png",
        selectedIconPath: "/static/icon_main_tab_cabinet_selected.png",
        text: "盒柜"
    },
    {
        pagePath: "/pages/profile/index",
        iconPath: "/static/icon_main_tab_profile.png",
        selectedIconPath: "/static/icon_main_tab_profile_selected.png",
        text: "我的"
    }
 
];
 
const goPages = (pagePath: string, index: number) => {
    if (index !== props.selectIndex) {
        uni.switchTab({
            url: pagePath
        });
    }
}
</script>
  
<style lang="scss" scoped>
.tab_bar {
    width: 100vw;
    bottom: 0;
    position: fixed;
    background-color: #fff;
       // 自动计算底部安全距离
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
 
    .tabbarBox {
        padding: 18rpx 16rpx 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
 
        .handleBox {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
 
            .menuBox {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
 
                .img {
                    width: 66rpx;
                    height: 66rpx;
                }
            }
        }
    }
 
    .tabbarBoxImg {
        width: 100%;
        height: 62rpx;
        position: absolute;
        top: -52rpx;
        left: 0;
    }
}
 
.Text {
    font-size: 20rpx;
    text-align: center;
    color: #9da5b3;
    font-weight: 600;
    letter-spacing: 6rpx;
    padding-left: 6rpx;
    box-sizing: border-box;
}
 
.TextColor {
    @extend .Text;
    color: #000;
}
 
 
.tabbarBox {
    :nth-child(3) .menuBoxText {
        color: #000000 !important;
        font-size: 26rpx;
 
    }
 
    :nth-child(3) .img {
        width: 140rpx !important;
        height: 140rpx !important;
        margin-top: -78rpx;
    }
}
</style>

在需要用的组件中直接引入使用并传入下标

手动隐藏原生tabbar

实现效果