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

朱雀 2023-10-01 22:37 29阅读 0赞

**目录**

全局配置 - tabBar

1. 什么是 tabBar

2. tabBar 的 6 个组成部分

3. tabBar 节点的配置项

4. 每个 tab 项的配置选项

全局配置 - 案例：配置 tabBar

1. 需求描述

2. 实现步骤

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

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

5. 步骤3 - 配置 tabBar 选项

6. 完整的配置代码

--------------------

### **全局配置 - tabBar** ###

#### **1. 什么是 tabBar** ####

tabBar  是移动端应用常见的页面效果， 用于实现多页面

的快速切换 。小程序中通常将其分为：

*  底部 tabBar 
 *  顶部 tabBar

![28c130112012436390c9a5d10a1f77a3.png][]

注意：

*  tabBar中只能配置最少 2 个、最多 5 个 tab 页签 
 *  当渲染顶部 tabBar 时，不显示 icon，只显示文本

#### **2. tabBar 的 6 个组成部分** ####

![0a3bd0ed2b4c41558f14658e7e69d5e0.png][]

**① backgroundColor：tabBar 的背景色**

**② selectedIconPath：选中时的图片路径**

**③ borderStyle：tabBar 上边框的颜色**

**④ iconPath：未选中时的图片路径**

**⑤ selectedColor：tab 上的文字选中时的颜色**

**⑥ color：tab 上文字的默认（未选中）颜色**

#### **3. tabBar 节点的配置项**  ####

<table style="width:579px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>必填</strong></td> 
   <td><strong>默认值</strong></td> 
   <td style="width:330px;"><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>String</td> 
   <td>否</td> 
   <td>bottom</td> 
   <td style="width:330px;">tabBar 的位置，仅支持 bottom/top</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>String</td> 
   <td>否</td> 
   <td>black</td> 
   <td style="width:330px;">tabBar 上边框的颜色，仅支持 black/white</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td style="width:330px;">tab 上文字的默认（未选中）颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td style="width:330px;">tab 上的文字选中时的颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>否</td> 
   <td></td> 
   <td style="width:330px;">tabBar 的背景色</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>Array</td> 
   <td>是</td> 
   <td></td> 
   <td style="width:330px;"> 
    <div>
      tab 页签的列表， 
    </div> 
    <div>
      最少 2 个、最多 5 个 tab 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

#### **4. 每个 tab 项的配置选项** ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>必填</strong></td> 
   <td><strong>描述</strong></td> 
  </tr> 
  <tr> 
   <td>pagePath</td> 
   <td>String</td> 
   <td>是</td> 
   <td>页面路径，页面必须在 pages 中预先定义</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>是</td> 
   <td>tab 上显示的文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>未选中时的图标路径；当 postion 为 top 时，不显示 icon</td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>String</td> 
   <td>否</td> 
   <td>选中时的图标路径；当 postion 为 top 时，不显示 icon</td> 
  </tr> 
 </tbody> 
</table>

### **全局配置 - 案例：配置 tabBar**  ###

#### **1. 需求描述**  ####

根据素材中提供的小图标、 在小程序中配置如图所示的 tabBar 效果：

![70f213be1c6547b3a82b228dddbdfc98.png][]

![e1791fd8be204366828192e80b5808d5.png][]

![3a365b4eb33a4c17a01285c3e62fdf05.png][]

**素材：**  ![35f3270a39e44853a7455531d15277f8.png][] ![dc2d35d2388d47d5bd7413f83467f6bf.png][] ![09ef4ebc117a4d41aa083522a4c31ef3.png][] ![fd299c9aa0db4c5a93f8b6df14718c43.png][] ![141e6f4b688c41abbb43541b7f758deb.png][] ![46406029666f4d9ea6e817a5d614cef2.png][]

#### **2. 实现步骤**  ####

① 拷贝图标资源

② 新建 3 个对应的 tab 页面

③ 配置 tabBar 选项

#### **3. 步骤1 -** **拷贝图标资源**  ####

① 把资料目录中的  images  文件夹， 拷贝到小程序项目根目录中

② 将需要用到的小图标分为 3 组，每组两个，其中：

图片名称中 包含 -active  的是选中之后 的图标

图片名称中 不包含 -active  的是 默认图标

截图如下： ![904ec99f8b114b03b93ab126f6b6b7b4.png][]

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

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

![b03f69d34bdd46389892f371d3fd8b0d.png][]

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

#### **5. 步骤3 -** **配置 tabBar 选项**  ####

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

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

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

pagePath  指定当前  tab 对应的页面路径 【 必填 】

text  指定当前 tab 上按钮的文字【 必填 】

iconPath  指定当前 tab 未选中时候的图片路径【可选】

selectedIconPath  指定当前 tab 被选中后高亮的图片路径【可选】

#### **6. 完整的配置代码** ####

{
      "pages": [
        "pages/home/home",
        "pages/message/message",
        "pages/contact/contact"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#f12321",
        "navigationBarTitleText": "测试",
        "navigationBarTextStyle": "white"
      },
      "tabBar": {
        "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"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

[28c130112012436390c9a5d10a1f77a3.png]: https://img-blog.csdnimg.cn/28c130112012436390c9a5d10a1f77a3.png
[0a3bd0ed2b4c41558f14658e7e69d5e0.png]: https://img-blog.csdnimg.cn/0a3bd0ed2b4c41558f14658e7e69d5e0.png
[70f213be1c6547b3a82b228dddbdfc98.png]: https://img-blog.csdnimg.cn/70f213be1c6547b3a82b228dddbdfc98.png
[e1791fd8be204366828192e80b5808d5.png]: https://img-blog.csdnimg.cn/e1791fd8be204366828192e80b5808d5.png
[3a365b4eb33a4c17a01285c3e62fdf05.png]: https://img-blog.csdnimg.cn/3a365b4eb33a4c17a01285c3e62fdf05.png
[35f3270a39e44853a7455531d15277f8.png]: https://img-blog.csdnimg.cn/35f3270a39e44853a7455531d15277f8.png
[dc2d35d2388d47d5bd7413f83467f6bf.png]: https://img-blog.csdnimg.cn/dc2d35d2388d47d5bd7413f83467f6bf.png
[09ef4ebc117a4d41aa083522a4c31ef3.png]: https://img-blog.csdnimg.cn/09ef4ebc117a4d41aa083522a4c31ef3.png
[fd299c9aa0db4c5a93f8b6df14718c43.png]: https://img-blog.csdnimg.cn/fd299c9aa0db4c5a93f8b6df14718c43.png
[141e6f4b688c41abbb43541b7f758deb.png]: https://img-blog.csdnimg.cn/141e6f4b688c41abbb43541b7f758deb.png
[46406029666f4d9ea6e817a5d614cef2.png]: https://img-blog.csdnimg.cn/46406029666f4d9ea6e817a5d614cef2.png
[904ec99f8b114b03b93ab126f6b6b7b4.png]: https://img-blog.csdnimg.cn/904ec99f8b114b03b93ab126f6b6b7b4.png
[b03f69d34bdd46389892f371d3fd8b0d.png]: https://img-blog.csdnimg.cn/b03f69d34bdd46389892f371d3fd8b0d.png