uni-app 中的 tabBar

uni-app 中的 tabBar 是什么？

如果应用是一个多 tab 应用，可以通过tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

例如京东移动网页底部就是 tabBar，如下图：

注意事项：

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中 list 是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序
• tabBar 切换第一次加载时可能渲染不及时，可以在每个 tabBar 页面的 onLoad生命周期中 先弹出一个等待雪花
• tabBar 的页面展示过一次以后就保存在内存中，再次切换 tabbar 页面，只会触发每个页面的 onShow，不会再触发 onLoad
• 顶部的 tabBar 目前仅微信小程序上支持。需要用到顶部选项卡的话，可以使用 hello uni-app 中模块的 顶部选项卡

属性说明：

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

midButton 属性说明

midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见​​https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap​​

uni-app 中的 tabBar 怎么使用？

1、首先打开项目根目录的 pages.json 文件

2、然后对 tabBar 进行如下配置：

  "tabBar": {
      "color": "#8B8B8B", // 表示tabBar item项中文字默认的颜色
      "selectedColor": "#F63515", // 表示tabBar item项中文字选中的颜色
      "borderStyle": "black",// 表示tabBar 上边框的颜色，目前只支持 black/white
      "backgroundColor": "#ffffff",// 表示 tabBar 的背景颜色
      "list": [{
          "pagePath": "pages/index/index", // 表示第一tab项的页面路径
          "iconPath": "static/image/home_default.png", // 表示当前 tab 未选中时所显示的图标路径
          "selectedIconPath": "static/image/home_select.png", // 表示当前 tab 选中时所显示的图标文件路径
          "text": "首页" // 表示当前 tab 的文字
      }, {
          "pagePath": "pages/me/me",
          "iconPath": "static/image/me_default.png",
          "selectedIconPath": "static/image/me_select.png",
          "text": "我的"
      }]
  }

  全部 pages.json  文件如下：

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  },{
    "path": "pages/me/me",
    "style": {
      "navigationBarTitleText": "我的"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#007AFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
      "color": "#8B8B8B", // 表示tabBar item项中文字默认的颜色
      "selectedColor": "#F63515", // 表示tabBar item项中文字选中的颜色
      "borderStyle": "black",// 表示tabBar 上边框的颜色，目前只支持 black/white
      "backgroundColor": "#ffffff",// 表示 tabBar 的背景颜色
      "list": [{
          "pagePath": "pages/index/index", // 表示第一tab项的页面路径
          "iconPath": "static/image/home_default.png", // 表示当前 tab 未选中时所显示的图标路径
          "selectedIconPath": "static/image/home_select.png", // 表示当前 tab 选中时所显示的图标文件路径
          "text": "首页" // 表示当前 tab 的文字
      }, {
          "pagePath": "pages/me/me",
          "iconPath": "static/image/me_default.png",
          "selectedIconPath": "static/image/me_select.png",
          "text": "我的"
      }]
  }
}

效果图：