tabBar

小程序的tabBar

小程序有两种tabBar，一种默认的，可以设置5个tabBar，还有一种是自定义tabBar

tabBar有什么作用

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

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cart/cart",
    "pages/fenlei/fenlei"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color":"balck",
    "selectedColor":"#d4237a",
    "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath":"/image/home.png",
            "selectedIconPath":"/image/home_active.png"
          }
    ]
  }
}

tabBar是一个对象，里面是对象

color:tab 上的文字默认颜色
selectedColor:tab 上的文字选中时的颜色
backgroundColor:tab 的背景色
list:tab 的列表，最少 2 个、最多 5 个 tab

list也是一个数组，里面的对象是每个分页的路径，标签，tabBar的颜色，选中tabBar的颜色和非选中tabBar的颜色

自定义tabBar

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

编写 tabBar 代码 用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。