uniapp 的状态栏高度 和 避免 H5 中 tabbar

参考地址

WeChatdd3a4f0bd0ea895c8bc5afa42381fc94.jpg

通过上述官方图片,我们可以抽出两个有用的信息:

• 1 自定义导航栏设置状态栏的高度

  1).系统提供了获取状态栏高度的 Css 变量: --status-bar-height;
  2). 通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度
  3). 获取safeAreaInsets?.top

const { safeAreaInsets } = uni.getSystemInfo()

• 2 如何避免 H5中,内容显示在 tabbar 下面的问题.

Wech0.jpg

--window-top 和 --window-bottom 这个只是针对 H5 来设置的. 用来设置内容区域离顶部的距离,这句话怎么理解:
在 H5 中, --window-top 表示导航栏高度 + 状态栏的高度;
在 H5 中, --window-bottom 表示 TabBar 的高度 + 安全区域的高度

由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用--window-bottom，不管在哪个端，都是固定在 tabbar 上方。

// 示例:
bottom: var(--window-bottom, 0);

• 3 导航条和TabBar 的固定高度

WeChat08dc3f8fbc0b6fb8f7c6eac037ba4065.jpg

注意: 单位是 px