首页 > 网页制作 >uniapp微信小程序自定义TabBar实现

uniapp微信小程序自定义TabBar实现

来源：互联网 2026-05-28 17:19:05

在 uniapp 与 Vue3 的生态里，自定义微信小程序的 tabBar 是一个常见但容易踩坑的技术点。微信官方文档虽然给出了基础指引，但真要落地到开发中，总有一些细节需要自己摸索。下面就把完整的实现流程拆开来讲，每一步都附上关键代码，希望能帮你少走弯路。配置 pages.json 先在 pag

在 uniapp 与 Vue3 的生态里，自定义微信小程序的 tabBar 是一个常见但容易踩坑的技术点。微信官方文档虽然给出了基础指引，但真要落地到开发中，总有一些细节需要自己摸索。下面就把完整的实现流程拆开来讲，每一步都附上关键代码，希望能帮你少走弯路。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

配置 pages.json

先在 pages.json 里把 tabBar 的骨架搭好。这里的配置和后端无关，纯粹是告诉小程序框架：我要用自定义的 tabBar，并且列出所有 tab 页面的路径、图标和文字。注意一个关键字段——custom 要设为 true，这是触发自定义 tabBar 的开关。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "na vigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/mine/index",
      "style": {
        "na vigationBarTitleText": "我的"
      }
    },
    {
      "path": "pages/detail/index",
      "style": {
        "na vigationBarTitleText": "详情"
      }
    }
  ],
  "globalStyle": {
    "na vigationBarTextStyle": "black",
    "na vigationBarTitleText": "uni-app",
    "na vigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "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": "我的"
      },
      {
        "pagePath": "pages/detail/index",
        "iconPath": "static/icon_API.png",
        "selectedIconPath": "static/icon_API_HL.png",
        "text": "详情"
      }
    ]
  }
}

这段代码里 list 数组就是 tab 项的完整定义，每个对象包含页面路径、图标路径和文字。注意图标的路径要写对，一般放在项目的 static 目录下。

添加 custom-tab-bar

接下来是核心操作：在项目根目录新建一个 custom-tab-bar 文件夹，里面按原生微信小程序的方式写组件。组件里最关键的逻辑在 index.js 中，它负责 tab 的点击切换和选中状态管理。

Component({
    data: {
        selected: 0,
        color: "#7A7E83",
        selectedColor: "#3cc51f",
        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: "接口"
        }, {
            pagePath: "/pages/detail/index",
            iconPath: "/static/icon_API.png",
            selectedIconPath: "/static/icon_API_HL.png",
            text: "详情"
        }]
    },
    attached() {},
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.path
            wx.switchTab({
                url
            })
            this.setData({
                selected: data.index
            })
        }
    }
})

注意：这里的 list 数组必须与 pages.json 中 tabBar 下的 list 一一对应，顺序不能乱。否则会出现页面跳转错乱的问题。另外，switchTab 方法里调用了微信原生 API wx.switchTab，这是自定义 tabBar 切换的标准做法。

添加页面

每个 tab 页面内都需要在 onShow 钩子中告诉自定义 tabBar：当前选中了哪个 tab。以首页为例，在 pages/index/index.vue 中写入下面代码：

<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) {
    // 这里的 `0` 对应具体的 tabbar 的下标
    tabBar.setData({
      selected: 0,
    });
  }
});
script>

核心逻辑是通过 getCurrentInstance().proxy.$scope.getTabBar() 拿到自定义 tabBar 组件实例，然后调用 setData 更新其 selected 数据。下标从 0 开始，和 list 中的顺序一一对应。其他 tab 页面也照此操作，把下标改成对应的索引值即可。

实现起来其实不复杂，核心就是三件事：配置 pages.json、编写原生组件、在每个页面里同步选中状态。对照着官方文档和这里的示例代码，很快就能跑起来。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述