tabBar（微信小程序）

一.概念

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为: 底部 tabBar 顶部 tabBar

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

二.tabBar由6部分组成

tabBar呢是由六部分组成的，分别是：

 这里面根据这些属性可以配置

 三.tabBar节点的配置项

四.每个 tab 项的配置选项

 说了这么多tabBard的配置项，那应该在哪儿写呢？往下看

配置简单tabBar

我们要在在app.json里面填写tabBar

声明节点配置list，最少创建两个tab页签

pagePath把之前做的页面路径写上去

在text里填写tab页签页名

我们来演示下效果

 

 可以看到，我们页面最下面出现了tabBar选项，我们点击之后可以来回切换页面

tabBar图标

我们可以创建一个图片文件夹，在这里放几个选中和未选中时的图片样式

 

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

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

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

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

​
"pages": 
[
 "pages/home/home",
 
 "pages/message/message",
 
 "pages/contact/contact"
]
 
​

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

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

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

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

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

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

 
"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"
 
}]
}
 

我们写完之后，进行一个效果演示

 可以看到在我们选中的时候，图片也会发生变化，页面也会跳转过来