Uniapp - 自定义 Tabbar 实现

0x0002025-09-11 10:29

场景复现

需要根据不同的业务场景显示不同的 Tabbar ，官方 Tabbar 配置无法支持，只能通过自定义 Tabbar 实现

解决方案

方案一

正常配置 Tabbar 页面，但需要将 Tabbar 隐藏

json 复制代码

  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home"
      },
      {
        "pagePath": "pages/test"
      }
    ]
  }

依然在 pages.json 中正常配置 Tabbar 页面，避免跳转 Tabbar 路径时出现默认的页面切换动画效果

微信小程序可使用 custom: true 隐藏（ Uniapp 官方文档目前并没有写明这个参数，但微信小程序原生支持）

微信小程序自定义 Tabbar developers.weixin.qq.com/miniprogram...

其他端可采用 uni.hideTabBar() 实现

自定义布局实现 Tabbar 相关逻辑即可

方案二

完全采用自定义动态组件方式实现

Issues

github.com/dcloudio/un...