当前位置：首页 > news >正文

小程序配置文件 —— 14 全局配置 - tabbar配置

news 2025/6/23 21:52:38

全局配置 - tabBar配置

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换；可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面；

在这里插入图片描述
在上面图中，标注了一些 tabBar 常用的配置项：

borderStyle：用来控制 tab 栏上方的一条边线，控制边线是否需要进行演示或者隐藏；
backgroundColor：用来配置整条 tab 栏的背景色；
selectedColor：用来配置 tabBar 被激活时对应的文字颜色；
color：用来配置 tabBar 没有被激活时文字的颜色；
list：list 是一个数组，数组中每一项都是一个对象，在对象中可以配置 selectedIconPath、pagePath、iconPath、text；selectedIconPath 表示当对应的 tabBar 被激活时对应 icon 的路径，pagePath 表示当对应的 tabBar 被激活时需要跳转的页面路径，iconPath 用来配置当前 tabBar 没有被激活时对应 icon 的路径，text 用来定义每个 tabBar 对应的文字是什么；

注意事项：tab 按数组的顺序排序。list 配置最少配置 2 个，最多 5 个；可以通过官方文档：tabBar 配置项来学习进行相关配置；

打开微信开发者工具，选择根目录下的 app.json 文件，由于 tabBar 主要用于页面间的切换，这里我们现在 pages 字段中创建好对应的页面信息：
在这里插入图片描述
app.json 中的 tabBar 字段和 pages 字段是同级的，所以在 app.json 中添加这个字段：

"tabBar": {"selectedColor": "#f3514f","color": "#666","borderStyle":"black","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/assets/tabbar/index.png","selectedIconPath": "/assets/tabbar/index-active.png"},{"pagePath": "pages/cate/cate","text": "分类","iconPath": "/assets/tabbar/cate.png","selectedIconPath": "/assets/tabbar/cate-active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "/assets/tabbar/cart.png","selectedIconPath": "/assets/tabbar/cart-active.png"},{"pagePath": "pages/profile/profile","text": "我的","iconPath": "/assets/tabbar/profile.png","selectedIconPath": "/assets/tabbar/profile-active.png"}]}