Hades

小程序自定义 tabBar 的说明

在小程序中使用 tabBar 时可以分成两种情形：

1. 全局配置方式实现

大多数情况下底部的 tabBar 是通过配置方式来实现的且样式不能自定义定义，如字号、间距等不能进行设置。

{
  "pages": [],
  "window": {},
  "tabBar": {
    "color": "",
    "selectedColor": "",
    "list": [
      {
        "text": "",
        "pagePath": ""
      }
    ]
  }
}

2. 自定义 tabBar 方式实现

自定义 tabBar 实际上就是自定义组件实现 tabBar 的功能，由于是自定义的组件，所以 tabBar 的样式可以自由定义，许多 UI 框架中都提供了自定义的 tabBar 组件，如 Vant、uView 等。

大家要注意的是即使用是使用了自定义的 tabBar 组件，全局配置中依然要对 tabBar 进行配置，再额外添加 custom: true ，此时通过配置实现的 tabBar 就会隐藏。

{
  "pages": [],
  "window": {},
  "tabBar": {
    "custom": true,
    "color": "",
    "selectedColor": "",
    "list": [
      {
        "text": "",
        "pagePath": ""
      }
    ]
  }
}
  1. 自定义 tabBar 右上角红点文字

小程序中提供了 API 来自定义 tabBar 右上角的文字

uni.setTabBarBadge({
  index: 0,
  text: '10',
})

以上代码的含义是为索引值为 0 的 tabBar 的右上角指定的文字内容为 10

  1. 在使用 uni-app 开发时，不支持通过 custom 开启自定义组件的功能，要想使用自定义的 tabBar 必须要调用 uni.hideTabBar 来将 tabBar 隐藏。
<!-- App.vue -->
<script>
  export default {
    onLaunch: function () {
      // console.log('App Launch')
    },
    
    onShow: function () {
      // 隐藏 tabBar 后显示自定义的 tabBar
      uni.hideTabBar()
    },
    
    onHide: function () {
      // console.log('App Hide')
    },
  }
</script>
Loading...