tabBar组件

一. 全局配置

• 我们可以通过对项目根目录下的app.json文件实现对微信小程序的全局配置，该文件的内容是一个Json对象。详见：微信小程序官方文档。
  

  apps.png

• tabBar是小程序客户端底部或顶部tab栏的实现。

二. tabBar相关属性

1. list

• list是一个长度为2-5的数组，它定义了tab 的列表，也就是说至少必须有2 个、至多可以有 5 个 tab。包含一下4个属性：

• pagePath: 即页面的路径，需要在pages中先定义。
• text: tab上按钮文字。
• iconPath: 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
  当 position 为 top 时，不显示 icon。
• selectedIconPath: 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

• 参考配置 (app.json)：

    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "resource/tabBar/home.png",
      "selectedIconPath": "resource/tabBar/home-1.png"
    },
    {
      "pagePath": "pages/1-Icon/test",
      "text": "菜单",
      "iconPath": "resource/tabBar/menu.png",
      "selectedIconPath": "resource/tabBar/menu-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "购物车",
      "iconPath": "resource/tabBar/car.png",
      "selectedIconPath": "resource/tabBar/car-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "resource/tabBar/mine.png",
      "selectedIconPath": "resource/tabBar/mine-1.png"
    }]

2. color

• tab 上的文字默认颜色，仅支持十六进制颜色

    "color": "#dbdbdb",

3. selectedColor

• tab 上的文字选中时的颜色，仅支持十六进制颜色

    "selectedColor": "#1296db",

4. backgroundColor

• tab 的背景色，仅支持十六进制颜色

    "backgroundColor": "#ffffff",

5. borderStyle

• tabbar 上边框的颜色， 默认值是: black，仅支持 black / white。

   "borderStyle": "black",    //  black / white

6. position

• tabBar 的位置，默认值是: bottom，仅支持 bottom / top。
• 注意：当position属性被设置为顶部top时，只显示文本不显示icon。

   "position": "bottom",    //  bottom / top

7. custom

• 此外，小程序还支持自定义tabBar来满足更多个性化的场景，可以通过custom属性的定义配合自定义组件来实现。详见官方文档: 自定义tabBar。

• 示例配置:

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, 
    {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}    // 所有tab页的json里需声明usingComponents项，也可以在app.json中全局开启
}

三. 实现步骤

• 在根目录下新建resource/icon文件夹，把从网上找来的icon放在此目录下。icon可以从阿里巴巴或谷歌的矢量图标库寻找: 阿里巴巴矢量图标库。
• 根据实际需求在根目录下 app.json 文件中实现对 tabBar 的配置。
• 实现具体的配置页面。
• app.json:

{
  "pages": [
    "pages/1-Icon/test",
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi",
    "pages/openapi/serverapi/serverapi",
    "pages/openapi/callback/callback",
    "pages/openapi/cloudid/cloudid",
    "pages/im/im",
    "pages/im/room/room"
  ],
  "tabBar": {
    "color": "#dbdbdb",
    "selectedColor": "#1296db",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "position": "bottom",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "resource/tabBar/home.png",
      "selectedIconPath": "resource/tabBar/home-1.png"
    },
    {
      "pagePath": "pages/1-Icon/test",
      "text": "菜单",
      "iconPath": "resource/tabBar/menu.png",
      "selectedIconPath": "resource/tabBar/menu-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "购物车",
      "iconPath": "resource/tabBar/car.png",
      "selectedIconPath": "resource/tabBar/car-1.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "resource/tabBar/mine.png",
      "selectedIconPath": "resource/tabBar/mine-1.png"
    }]
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

四. 效果

effect.png