💌 所属专栏：【微信小程序开发教程】
😀 作者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
文章目录
前言一、全局配置 -- tabBar1、什么是 tabBar2、tabBar 的 6 个组成部分3、tabBar 节点的配置项 二、配置 tabBar1. 需求描述2. 实现步骤 总结前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第17篇文章;
今天开始学习微信小程序的第九天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、全局配置 – tabBar
前面已经学习完了全局配置–window，通过栗子了解到如何修改导航栏、下拉刷新和上拉触底。接下来就来讲解一下全局配置另外一个配置项–tabBar。话不多说，让我们原文再续，书接上回吧。
1、什么是 tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
底部 tabBar
顶部 tabBar
注意： tabBar中只能配置最少 2 个、最多 5 个 tab 页签，当渲染顶部 tabBar 时，不显示 icon，只显示文本
2、tabBar 的 6 个组成部分
接下来将对 tabBar 的 6 个部分进行学习,如下图所示，：
backgroundColor：tabBar 的背景色；selectedIconPath：选中时的图片路径；borderStyle：tabBar 上边框的颜色；iconPath：未选中时的图片路径；selectedColor：tab 上的文字选中时的颜色；color：tab 上文字的默认（未选中）颜色
3、tabBar 节点的配置项
接下来介绍 tabBar 的基本属性，在 官方文档 中，除了 borderStyle，position 属性之外，其他都是必填属性，不过只是为了做测试的话，只有 list 属性是必填的，如下表所示：
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
如果在小程序中配置tabBar效果，需要打开app.json文件，创建与pages和window同级的节点，在里面添加需要的属性，具体代码如下所示：
app.json
{"tabBar": {"list": [{"pagePath": "pages/cshPageTab/cshPageTab","text": "Tab"},{"pagePath": "pages/cshPageButton/cshPageButton","text": "Button"},{"pagePath": "pages/cshPageData/cshPageData","text": "Data"}]},}
创建了三个tab进行显示，并没有对其他属性进行设置，比较简洁，来看一下实际显示效果：
二、配置 tabBar
前面简单的配置tabBar，成功实现跳转，但是样式比较简陋。接下来完整配置一下 tabBar。
1. 需求描述
根据前面的栗子，在此基础对tabBar进行优化成以下页面。
2. 实现步骤
在实际开发过程中，完成配置tabBar可分为三步：
Step 1、拷贝图标资源
把下载好的images资源，拷贝到小程序项目根目录中，将需要用到的小图标分为 3 组，每组两个，其中：
（1）图片名称中包含-active的是选中之后的图标。
（2）图片名称中不包含 -active的是默认图标。
如下图所示：
Step 2、新建 3 个对应的 tab 页面
通过app.json 文件的pages节点，快速新建 3 个对应的 tab 页面，这里为了方便，使用前面栗子的三个页面，示例代码如下：
app.json
{"pages":["pages/cshPageTab/cshPageTab","pages/cshPageData/cshPageData","pages/cshPageButton/cshPageButton","pages/index/index","pages/logs/logs"],}
其中，cshPageTab是首页，cshPageData是消息页面，cshPageButton是联系我们页面。
注意：tab页签对应页面必须放在 pages 页面数组最开始的位置，不能往后放，否则无法生效。
Step 3、配置 tabBar 选项
首先打开app.json配置文件，和pages、window平级，新增tabBar节点，其次tabBar节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象，最后在list数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：
（1）pagePath指定当前 tab 对应的页面路径【必填】
（2）text指定当前 tab 上按钮的文字【必填】
（3）iconPath指定当前 tab 未选中时候的图片路径【可选】
（4）selectedIconPath指定当前 tab 被选中后高亮的图片路径【可选】
为了页面的美观性，这四个都要进行设置。具体代码如下所示：
app.json
{"tabBar": {"list": [{"pagePath": "pages/cshPageTab/cshPageTab","text": "Tab","iconPath": "/images/home.png","selectedIconPath": "/images/home-active.png"},{"pagePath": "pages/cshPageButton/cshPageButton","text": "Button","iconPath": "/images/message.png","selectedIconPath": "/images/message-active.png"},{"pagePath": "pages/cshPageData/cshPageData","text": "Data","iconPath": "/images/contact.png","selectedIconPath": "/images/contact-active.png"}]},}
到这里就完成完整的 tabBar 配置，来看下实际效果：
总结
感谢观看，这里就是全局配置 – tabBar的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
😀 【LeetCode题解（持续更新中）】🚝 【Java Web项目构建过程】💛 【微信小程序开发教程】⚽ 【JavaScript随手笔记】🤩 【大数据学习笔记（华为云）】🦄 【程序错误解决方法（建议收藏）】🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！
