一、前言
微信小程序原生的 tabBar 提供了底部导航栏的基础功能，但其样式和交互受限，难以满足日益增长的 UI 设计需求。因此，越来越多的小程序项目选择使用 自定义 tabBar 来实现更灵活、更美观的底部导航。
本文介绍如何实现一个完整的微信小程序自定义 tabBar，包括结构设计、动态切换页面、图标与文字高亮状态管理、样式美化与响应式适配、页面跳转逻辑处理及完整代码示例。
二、为什么需要自定义 tabBar？
| 原生 tabBar 局限 | 自定义 tabBar 优势 |
|---|---|
| 样式固定，无法修改图标大小、颜色等 | 可自由定制样式 |
| 最多只能配置 5 个 tab 页 | 灵活扩展，可做横向滚动 |
| 不支持中间凸起按钮 | 支持自定义布局 |
| 难以集成动态数据 | 可绑定数据、响应事件 |
三、项目目标
我们将实现一个类似美团风格的自定义 tabBar，包含以下功能模块：
| 模块 | 功能描述 |
|---|---|
| 底部导航栏 | 包含首页、分类、购物车、我的 四个 tab |
| 图标 + 文字 | 每个 tab 显示图标与文字 |
| 高亮状态切换 | 当前 tab 图标与文字变色 |
| 页面切换 | 点击 tab 切换对应页面内容 |
| 样式统一管理 | 使用公共样式文件控制主题 |
四、项目结构说明
text
project/
├── app.js
├── app.json
├── app.wxss
├── components/
│ └── custom-tab-bar/
│ ├── tab-bar.js
│ ├── tab-bar.json
│ ├── tab-bar.wxml
│ └── tab-bar.wxss
├── pages/
│ ├── index/
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── category/
│ ├── cart/
│ └── user/
└── utils/
我们通过封装一个组件 custom-tab-bar 实现底部导航栏，并在主页中调用该组件。
五、自定义 tabBar 组件实现
1. 创建组件目录
text
components/custom-tab-bar/
├── tab-bar.js
├── tab-bar.json
├── tab-bar.wxml
└── tab-bar.wxss
2. tab-bar.json（组件配置）
{
"component": true
