先上关键词，方便大家搜索

• uniapp自定义tabbar，中间凸起（微信小程序）
• vue3 vite tabBar uniapp
• 微信小程序自定义Tabbar（uniapp）

先配置page.json,这里配置了两套Tabbar，一个给微信小程序使用，一个给别的平台使用

// #ifdef MP-WEIXIN
    "tabBar": {
        "selectedColor": "#47A1FF",
        "custom": true,
        "list": [{
                "pagePath": "pages/index/index",
                "text": "抢单大厅",
                "iconPath": "/static/index-light.png",
                "selectedIconPath": "/static/index.png"
            },
            {
                "pagePath": "pages/worker/worker",
                "text": "工作台",
                "iconPath": "/static/menu.png",
                "selectedIconPath": "/static/menu.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "/static/mine-light.png",
                "selectedIconPath": "/static/mine.png"

            }
        ]
    },
    //  #endif
    // #ifndef MP-WEIXIN
    "tabBar": {
        "selectedColor": "#47A1FF",
        "backgroundColor": "#fff",
        "midButton": {
            "pagePath": "pages/worker/worker",
            "text": "工作台",
            "iconPath": "/static/menu.png",
            "selectedIconPath": "/static/menu.png"
        },
        "list": [{
                "pagePath": "pages/index/index",
                "text": "抢单大厅",
                "iconPath": "/static/index-light.png",
                "selectedIconPath": "/static/index.png"
            },
            {
                "pagePath": "pages/worker/worker",
                "text": "工作台",
                "iconPath": "/static/menu.png",
                "selectedIconPath": "/static/menu.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "/static/mine-light.png",
                "selectedIconPath": "/static/mine.png"

            }
        ]
    },
    //  #endif

在微信小程序的官方文档中找到微信的自定义Tabbar示例，代码在文档里最下方

• 直接点击在开发者工具中预览效果就可以打开微信开发者工具了
  小程序开发文档

• 将示例中的组件原封不动复制到项目根目录下，打包的时候会自己打进去

  
  如图所示
• 将移过去的组件内容改成自己的，js中list 的内容就是在page.json中配置的tabbar的内容了，这样组件已经可以显示了

注意以下问题

• 点击切换时已经可以出效果了，但是菜单的选中状态需要点两次才能正常选中
• 在vue2中我们能使用生命周期解决这个问题，在vue3中我们也能使用生命周期，不过需要引入
• 代码如下所示，条件编译只在微信小程序生效

// #ifdef MP-WEIXIN 
import  {onShow}  from "@dcloudio/uni-app"
onShow(()=>{
    const curPages = getCurrentPages()[0];  // 获取当前页面实例
    if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {  
        curPages.getTabBar().setData({  
            selected: 2   // 表示当前菜单的索引，该值在不同的页面表示不同
        });  
    }
})
// #endif

• 在每个使用tabbar 的页面都要添加该配置哦
• vue2的自己百度，能搜到很多解决方法