前言

本文分享如何在uniapp vue3 实现自定义微信小程序 tabBar。

配置信息

在 pages.json 中添加 tabBar 的相关配置，例如

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "首页"  
      }  
    },  
    {  
      "path": "pages/mine/index",  
      "style": {  
        "navigationBarTitleText": "我的"  
      }  
    }  
  ],  
  "tabBar": {  
    "custom": true,  
    "color": "#7A7E83",  
    "selectedColor": "#3cc51f",  
    "borderStyle": "black",  
    "backgroundColor": "#ffffff",  
    "list": [  
      {  
        "pagePath": "pages/index/index",  
        "iconPath": "static/icon_component.png",  
        "selectedIconPath": "static/icon_component_HL.png",  
        "text": "首页"  
      },  
      {  
        "pagePath": "pages/mine/index",  
        "iconPath": "static/icon_API.png",  
        "selectedIconPath": "static/icon_API_HL.png",  
        "text": "我的"  
      }  
    ]  
  }  
}

添加 tabBar 代码文件

在根目录添加 custom-tab-bar 文件夹，下面包含微信小程序原生文件

编写 tabBar 代码

这一步需要获取自定义 tabBar 组件实例，通过示例来更新选中的 tab，微信小程序可以通过 this 操作，uniapp 也支持直接操作微信小程序组件示例，如下代码

<template>  
  <view>  
    <text>首页</text>  
  </view>  
</template>  

<script setup>  
import { getCurrentInstance } from "vue";  
import { onShow } from "@dcloudio/uni-app";  

const instance = getCurrentInstance();  

onShow(() => {  
  const tabBar = instance?.proxy?.$scope?.getTabBar?.();  // 获取组件示例函数返回值  
  if (tabBar) {  
    tabBar.setData({  
      selected: 0,  
    });  
  }  
});  
</script>

其他 tab 页同理

示例项目

参考附件