uniapp实现自定义tabBar底部导航栏（中间凸起样式）

简介：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 {