【微信小程序_12_全局配置之 tabBar】

摘要：本文介绍了微信小程序中的 tabBar，包括其定义、组成部分、节点配置项和每个 tab 项的配置选项。还通过案例详细说明了配置 tabBar 的步骤，如拷贝图标资源、新建 tab 页面和配置 tabBar 选项等。tabBar 可实现多页面快速切换，合理配置能提升用户体验。

一、tabBar 简介

1.定义

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常分为底部 tabBar 和顶部 tabBar。
注意：tabBar 中只能配置最少 2 个、最多 5 个 tab 页签。当渲染顶部 tabBar 时，不显示 icon，只显示文本

二、tabBar 的组成部分

1.组成部分

• backgroundColor：tabBar 的背景色。
• selectedIconPath：选中时的图片路径。
• borderStyle：tabBar 上边框的颜色。
• iconPath：未选中时的图片路径。
• selectedColor：tab 上的文字选中时的颜色。
• color：tab 上文字的默认（未选中）颜色。

三、tabBar 节点的配置项

1.属性说明：

• position：tabBar 的位置，仅支持 “bottom”/“top”，非必填，默认值为 “bottom”。
• borderStyle：tabBar 上边框的颜色，仅支持 “black”/“white”，非必填。
• color：tab 上文字的默认（未选中）颜色，非必填。
• selectedColor：tab 上的文字选中时的颜色，非必填。
• backgroundColor：tabBar 的背景色，非必填。
• list：Array 类型，必填，tab 页签的列表，最少 2 个、最