简介：uniapp自定义tabBar样式，附有vue2/3两种写法，支持h5/app/微信小程序

效果图：

第一步：配置信息

第二步：自定义tabBar文件

html代码：

<template>
    <view class="tabbar-container">
        <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
            @click="changeItem(item)">
            <view class="item-top">
                <image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
            </view>
            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>

css代码：

 <style>
    view {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .tabbar-container {
        position: fixed;
        bottom: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        width: 726rpx;
        height: 110rpx;
        /* box-shadow: 0 0 5px    #8d6c36; */
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 5rpx 0;
        color: #8d6c36;
        background-color: #f3d9a6;
    }

    .tabbar-container .tabbar-item {
        width: 20%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .tabbar-container .item-active {
        color: #6b3d01;
    }

    .tabbar-container .center-item {
        display: block;
        position: relative;
    }

    .tabbar-container .tabbar-item .item-top {
        width: 70rpx;
        height: 70rpx;
        padding: 10rpx;
    }

    .tabbar-container .center-item .item-top {
        flex-shrink: 0;
        width: 140rpx;
        height: 140rpx;
        padding: 20rpx;
        position: absolute;
        top: -70rpx;
        /* left: calc(50% - 50rpx); */
        border-radius: 50%;
        /* box-shadow: 0 0 5px #999; */
        background-color: #f3d9a6;
    }

    .tabbar-container .tabbar-item .item-top image {
        width: 50rpx;
        height: 50rpx;
    }

    .tabbar-container .center-item .item-top image {
        width: 100rpx;
        height: 100rpx;
    }

    .tabbar-container .tabbar-item .item-bottom {
        font-size: 28rpx;
        width: 100%;
    }

    .tabbar-container .center-item .item-bottom {
        position: absolute;
        bottom: 0;
    }
</style>

js代码（vue2写法） :

<script>
    export default {
        props: {
            currentPage: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                currentItem: 0,
                tabbarList: [{
                        id: 0,
                        path: '/pages/index/index',
                        icon: "/static/tabbar/home.png",
                        selectIcon: "/static/tabbar/home_o.png",
                        text: '首页',
                        centerItem: false
                    },
                    {
                        id: 1,
                        path: '/pages/enquiry/enquiry',
                        icon: "/static/tabbar/enquiry.png",
                        selectIcon: "/static/tabbar/enquiry.png",
                        text: '问询',
                        centerItem: true
                    },
                    {
                        id: 2,
                        path: '/pages/my/my',
                        icon: "/static/tabbar/mine.png",
                        selectIcon: "/static/tabbar/mine_o.png",
                        text: '我的',
                        centerItem: false
                    }
                ]
            };
        },
        mounted() {
            this.currentItem = this.currentPage;
            // 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
            if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
                uni.hideTabBar()
            }
        },
        methods: {
            changeItem(item) {
                uni.switchTab({
                    url: item.path
                });
            }
        }
    };
</script>

vue3写法：

<script setup>
    import {
        defineProps,
        onMounted,
        ref
    } from "vue"
    const props = defineProps({
        currentPage: {
            type: Number,
            default: 0
        }
    })
    const currentItem = ref(0);
    const tabbarList = ref([{
            id: 0,
            path: '/pages/index/index',
            icon: '/static/tabbar/home.png',
            selectIcon: '/static/tabbar/home_o.png',
            text: '首页',
            centerItem: false
        },
        {
            id: 1,
            path: '/pages/enquiry/enquiry',
            icon: '/static/tabbar/enquiry.png',
            selectIcon: '/static/tabbar/enquiry.png',
            text: '问询',
            centerItem: true
        },
        {
            id: 2,
            path: '/pages/my/my',
            icon: '/static/tabbar/mine.png',
            selectIcon: '/static/tabbar/mine_o.png',
            text: '我的',
            centerItem: false
        }
    ]);

    function changeItem(item) {
        uni.switchTab({
            url: item.path
        });
    }

    onMounted(() => {
        currentItem.value = props.currentPage;
        // 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
        if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
            uni.hideTabBar()
        }
    });
</script>

 第三步：所有的tabbar页面引入自定义tabbar

index.vue:

<template>
    <view class="content">
        <zdyTabbar :current-page="0" />
    </view>
</template>

<script setup>
    import zdyTabbar from "/components/zdy-tabbar.vue";
</script>

<style>
</style>

到这里就基本完成了，但需要注意的是,在实际各端的测试中，当首次切换tabbar时会出现闪烁的问题，尤其是在h5/app端，还会出现原生tabbar的闪烁。若各位大佬有解决方案，还请留言，请教一二

转载自CSDN-专业IT技术社区

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_52992456/article/details/140460733