微信小程序开发入门：TabBar导航栏配置指南

发布日期：2025-09-20 16:54:57 浏览次数： 811 来源：柒柒知道

推荐语

微信小程序开发必备技能：手把手教你配置TabBar导航栏，提升用户体验！

核心内容：
1. TabBar的定义与基本特性
2. 详细配置步骤与代码示例
3. 真机预览与样式优化建议

小优网站建设顾问

专业来源于二十年的积累，用心让我们做到更好!

认识点击蓝字关注我们

创作不易，希望每一位打开这篇文章的宝宝都能点个关注，感谢支持！

通过前几期的学习，我们已经学会了增加和删除小程序页面，今天我们来学习一个新的知识点——TabBar。

一.TabBar是什么

TabBar是微信小程序中底部或顶部的固定导航栏，类似于网页的菜单栏，用户可点击TabBar可以在不同页面之间快速切换。其形状如下所示。

绝大多数小程序TabBar都是位于小程序页面的底部，但可以设置位于顶部，且在每个TabBar页面都会显示，非TabBar页面则不显示。

微信对TabBar数量有着严格的限制，只能是2到5个。

每个TabBar通常由图标和文字组成，且图标在上，文字在下，但TabBar位于顶部时只显示文字不显示图标。

二.设置TabBar列表

我们使用“JS-基础模板”新建一个小程序页面，在app.json文件中，在与pages平级的的位置增加tabBar，tabBar的页面路径、文字、图标等信息需要在其list数组中配置，我们先来为首页和日志页面配置两个tabBar，至少需要配置页面路径pagePath和文字text。

{  "pages": [  //...省略pages配置...  ],  "tabBar": {    "list": [      {        "pagePath": "pages/index/index",         "text": "首页"      },      {        "pagePath": "pages/logs/logs",        "text": "日志"      }    ]  },  "window": {  //...省略window配置...  }}

我们在开发者工具模拟器预览，页面效果如下：

默认配置下tabBar的文本在选中状态是绿色，非选中状态是黑色。

在模拟器中显示的文本较小，但真机显示的文本就比较大，TabBar样式在模拟器和真机上显示效果存在差异，我们开发的时候最好用真机进行预览。

我们可以增加一个页面，并增加为tabBar，如tool。

这样就有三个tabBar，这是开发中比较常见的数量。

模拟器预览效果：

如果我们需要增加图标，可以配置未选中时的图片路径iconPath和选中时的图片路径selectedIconPath。

但图标路径不支持网络路径，我们只能把图标放在小程序项目中，推荐放在images目录。

接下来我们来到代码中修改

"tabBar": {    "list": [      {        "pagePath": "pages/index/index",         "text": "首页",        "iconPath": "images/index.png",        "selectedIconPath": "images/index-active.png"      },      {        "pagePath": "pages/logs/logs",        "text": "日志",        "iconPath": "images/log.png",        "selectedIconPath": "images/log-active.png"      },      {        "pagePath": "pages/tool/tool",        "text": "工具",        "iconPath": "images/tool.png",        "selectedIconPath": "images/tool-active.png"      }    ]  },

模拟器预览效果如下：

三.TabBar更多配置项

tabBar还支持更多配置，如修改未选中时文本颜色color和选中时文本颜色selectedColor，我们只需要在tabBar中与list平级的位置增加这两个属性：

"tabBar": {    "color": "#7A7E83",    "selectedColor": "#3cc51f",    //在与list平级的位置增加 }

如果修改tabBar背景色，可以配置backgroundColor属性：

"tabBar": {    "backgroundColor": "#7A7E83",    //在与list平级的位置证据 }

我们还可以把tabBar位置调整到顶部

"tabBar": {    "position": "top",    //在与list平级的位置增加 }

四.自定义TabBar

如果有特殊需求，还可以自定义tabBar。但自定义操作比较复杂，不建议新手去尝试。

首先在app.json中的 tabBar项开启自定义配置

{  "tabBar": {    "custom": true,    //...更多配置省略...}

然后在根目录创建一个custom-tab-bar的文件夹（此名称固定不可更改），并创建4个组件文件（index.js, index.json, index.wxml, index.wxss）。

然后需要在index.json声明这是一个自定义组件

{  "component": true,  "usingComponents": {}}

最后我们按照自定义组件的方式去编写index.js, index.wxml, index.wxss即可，感兴趣的可以试试。

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。

优网知识库

探索行业前沿，共享知识宝库

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

优网知识库

探索行业前沿，共享知识宝库

​​微信小程序开发入门：TabBar导航栏配置指南

企微云

客户池

微信小名片

网站建设

优网科技

小名片

53AI

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

微信小程序开发入门：TabBar导航栏配置指南