微信小程序如何设置底部菜单栏（tab栏）

谁践踏了优雅 2022-05-08 09:54 2080阅读 0赞

![70][]

### tabBar ###

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

<table> 
 <tbody> 
  <tr> 
   <th style="width:186px;">属性</th> 
   <th style="width:662px;">说明</th> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>tab 上的文字默认颜色</td> 
  </tr> 
  <tr> 
   <td>selectedColor</td> 
   <td>tab 上的文字选中时的颜色</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>tab 的背景色</td> 
  </tr> 
  <tr> 
   <td>borderStyle</td> 
   <td>tabbar上边框的颜色， 仅支持&nbsp;<code>black</code>&nbsp;/&nbsp;<code>white&nbsp;默认是</code>bottom&nbsp;black</td> 
  </tr> 
  <tr> 
   <td>list</td> 
   <td>tab 的列表，详见&nbsp;<code>list</code>&nbsp;属性说明，最少2个、最多5个 tab</td> 
  </tr> 
  <tr> 
   <td>position</td> 
   <td>tabBar的位置，仅支持&nbsp;<code>bottom</code>&nbsp;/&nbsp;<code>top&nbsp; 默认是</code>bottom</td> 
  </tr> 
 </tbody> 
</table>

其中 list 接受一个数组，**只能配置最少2个、最多5个 tab**。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pagePath</td> 
   <td>页面路径，必须在 pages 中先定义（也就是说必须要先有这一个页面）</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>tab 上按钮文字</td> 
  </tr> 
  <tr> 
   <td>iconPath</td> 
   <td>图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px。<br><strong>当&nbsp;<code>postion</code>&nbsp;为&nbsp;<code>top</code>&nbsp;时，不显示 icon。</strong></td> 
  </tr> 
  <tr> 
   <td>selectedIconPath</td> 
   <td>选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px。<br><strong>当&nbsp;<code>postion</code>&nbsp;为&nbsp;<code>top</code>&nbsp;时，不显示 icon。</strong></td> 
  </tr> 
 </tbody> 
</table>

{
      "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/movie/movie",
        "pages/userinfo/userinfo",
        "pages/navigateTo/navigateTo"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "我的小程序",
        "navigationBarTextStyle": "black",
        "navigationStyle": "default"
      },
      "tabBar": {
        "selectedColor": "green",
        "borderStyle": "white",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/index.png",
            "selectedIconPath": "images/indexf2.png"
          },
          {
            "pagePath": "pages/movie/movie",
            "text": "电影",
            "iconPath": "images/movie.png",
            "selectedIconPath": "images/movief.png"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "图片",
            "iconPath": "images/image.png",
            "selectedIconPath": "images/imagef.png"
          },
          {
            "pagePath": "pages/userinfo/userinfo",
            "text": "个人中心",
            "iconPath": "images/center.png",
            "selectedIconPath": "images/centerf.png"
          }
        ]
      }
    }

微信公众平台的详细讲解地址：[https://developers.weixin.qq.com/miniprogram/dev/framework/config.html][https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]

[70]: /images/20220508/9bde88c36b5a47e0a241665dbbbfa87d.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_config.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html