uniapp 自定义tabbar

Uniapp 提供了自定义 tabbar 的能力，可以通过在 `pages.json` 文件中配置 `tabBar.custom` 字段来实现自定义 tabbar。

以下是一个简单的示例：

{
  "pages": [
    {
      "path": "pages/home/home",
      "name": "home",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "name": "about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "tabBar": {
    "custom": true,
    "color": "#8a8a8a",
    "selectedColor": "#007aff",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}

在这个示例中，我们通过设置 `tabBar.custom` 字段为 `true` 来启用自定义 tabbar 功能。然后在 `tabBar.list` 中配置每个 tab 的信息，包括页面路径和显示文本。

在自定义 tabbar 页面中，我们可以使用 `uni.showTabBar` 和 `uni.hideTabBar` 方法来控制原生底部 tabbar 的显示和隐藏。同时，我们可以使用 `uni.switchTab` 方法来切换页面，并将 `animation` 参数设置为 `true` 来启用切换动画。

参考文档：[Uniapp 自定义底部 TabBar](https://uniapp.dcloud.io/frame?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e5%ba%95%e9%83%a8tabbar)