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
网友评论