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