微信小程序自定义 tabBar 实现方案
一、背景与需求
微信小程序原生 tabBar 虽然简单易用，但存在明显限制：
- 不支持中间'+'号等凸起按钮
- 图标和文字样式无法高度自定义（如选中态动画）
- 无法动态隐藏/显示 tabBar
- 不能嵌入徽标（Badge）、红点等业务元素
解决方案：使用自定义 tabBar！
本文将带你从零实现一个支持中间凸起按钮、带动画、可扩展的自定义 tabBar，并封装为通用组件。
二、功能特性
- 底部 5 个 tab（中间为'+'发布按钮）
- 点击 tab 平滑切换页面
- 中间按钮跳转独立功能页（如发布内容）
- 支持徽标、选中高亮、图标切换
三、实现思路
由于小程序页面是全屏渲染，我们无法像 H5 那样用 fixed 布局直接覆盖原生 tabBar。
正确做法：
- 关闭原生 tabBar（
app.json中不配置tabBar） - 每个页面底部手动引入自定义 tabBar 组件
- 通过
wx.switchTab或wx.navigateTo模拟 tab 切换
⚠️ 注意：自定义 tabBar 不是全局组件，需在每个 tab 页面中手动引入！
四、第一步：创建自定义 tabBar 组件
1. 目录结构
components/
└── custom-tab-bar/
├── custom-tab-bar.js
├── custom-tab-bar.json
├── custom-tab-bar.wxml
└── custom-tab-bar.wxss
2. 配置组件（custom-tab-bar.json）
{
"component": true,
"usingComponents": {}
}
3. 定义数据与方法（custom-tab-bar.js）
// components/custom-tab-bar/custom-tab-bar.js
Component({
properties: {
current: {
: ,
:
}
},
: {
: [
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : },
{ : , : , : , : }
]
},
: {
() {
{ index } = e..;
item = ..[index];
(item.) {
wx.({ : });
;
}
wx.({ : item. });
.(, { index });
}
}
});
