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

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

article 2025/1/1 12:07:27

全局配置 - 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"
    }]
  }