小程序，全局配置-案例：配置 tabBar（一）

悠然若梦

已于 2023-09-29 09:44:00 修改

阅读量512

点赞数

分类专栏：小程序文章标签：小程序 windows

于 2023-09-29 09:30:34 首次发布

本文链接：https://blog.csdn.net/qq_46099629/article/details/133409639

版权

小程序专栏收录该内容

9 篇文章

订阅专栏

全局配置-案例：配置 tabBar

本案例将在小程序中实现底部tabBar，包含三个tab：首页、消息、联系我们。根据需求，我们将使用提供的小图标资源来配置tabBar，选中后图标变亮。下面详细介绍三个步骤。

1.步骤1- 拷贝图标资源

将资料目录中的 images 文件夹，拷贝到小程序项目根目录中。将需要用到的小图标分为 3 组，每组两个，其中：图片名称中包含 -active 的是选中之后的图标，图片名称中不包含 -active 的是默认图标。
在这里插入图片描述

2.步骤2- 新建 3 个对应的 tab 页面

通过 app.json 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {...},
  "tabBar": {...}
}

其中，“pages/home/home” 是首页，“pages/message/message” 是消息页面，“pages/contact/contact” 是联系我们页面。

3.步骤3-配置 tabBar 选项

① 打开 app.json 配置文件，并在 pages、window 平级下新增 tabBar 节点。

② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象。

③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

pagePath 指定当前 tab 对应的页面路径【必填】
text 指定当前 tab 上按钮的文字【必填】
iconPath 指定当前 tab 未选中时的图片路径【可选】
selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

示例代码如下：

"tabBar":{
    "position": "bottom",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#999999",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text":"首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text":"联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  }