TabBar设置

博客简介

本篇博客介绍小程序的TabBar设置方法，并且提供图片资源供大家下载

• 属性
• 设置方法举例
• 图片资源

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

属性

以下是Tabbar的全部属性：

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

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

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

设置方法举例：

• 首先根据自己要导航的几个页面page
  比如说将要设置三个导航选择，那么我们新建三个导航页面page1，page2，page3：
  

• 在app.json页面中设置配置

  **注意：**要跳转的页面一定要在page中写明，所有页面路径，必须在 pages 中先定义

{
  "pages": [
    "pages/page1/page1",
    "pages/page2/page2",
    "pages/page3/page3"
  ],
  "tabBar":{
    "color":"#000",
    "selectedColor":"#fff",
    "backgroundColor":"#7B68EE",
    "list":[{
        "pagePath":"pages/page1/page1",
        "text":"Page1",
        "iconPath":"images/Home.png",
        "selectedIconPath":"images/selectHome.png"
      },{
        "pagePath": "pages/page2/page2",
        "text": "Page2",
        "iconPath": "images/fav.png",
        "selectedIconPath": "images/selectFav.png"
      },{
        "pagePath": "pages/page3/page3",
        "text": "Page3",
        "iconPath": "images/me.png",
        "selectedIconPath": "images/selectMe.png"
      }]
  }
}