tabbar 底部导航栏

自定义

方式一：custom-tab-bar

官方文档

注意事项：

1. 统一放在 custom-tab-bar 目录下。
2. app.json 中 tabBar 的 custom 字段必须设置为 true。
3. tabbar 页面需要在 onShow 中通过 this.getTabBar() 获取 tabbar 实例，并调用 setData 方法更新 tabbar 的数据。

方式二：完全自定义

组件刷新“闪烁”

不要使用 setData 的方式更新 tabbar 的数据，否则会导致 tabbar 出现闪烁的问题，直接 props 给默认值即可。

注意事项

安全区

安全区 CSS 适配：

.tabbar {
  padding-bottom: calc(6rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(6rpx + env(safe-area-inset-bottom));
}
const windowInfo = wx.getWindowInfo();

安全区 JS 适配：

// 安全区域对象包含：top, left, right, bottom, width, height
const { bottom, height } = wx.getWindowInfo().safeArea

// 底部安全区高度 = 屏幕高度 - safeArea 的 bottom 坐标
const safeAreaHeight = wx.getWindowInfo().screenHeight - bottom