uniapp获取底部安全距离以及状态栏高度等
获取上安全距离： env(safe-area-inset-top)
获取左安全距离：env(safe-area-inset-left)
获取右安全距离：env(safe-area-inset-right)
获取下安全距离：env(safe-area-inset-bottom)
可以在固定底部的盒子加下内下边距 padding-bottom: env(safe-area-inset-bottom) 避免元素被遮挡
CSS Code复制内容到剪贴板
- /* #ifdef H5 */
- height: calc(100vh - (50px + env(safe-area-inset-bottombottom)));
- /* #endif */
- /* #ifndef H5 */
- /* 小程序会造成滚动条，多加1像素 */
- height: calc(100vh - (41px + env(safe-area-inset-bottombottom)));
- /* #endif */
自定义导航栏需要注意的是：顶部存在状态栏，也就是显示信号、时间等信息的状态栏；
XML/HTML Code复制内容到剪贴板
- <template>
- <view class="container">
- <!-- 自定义顶部导航 -->
- <uni-nav-bar left-icon="left" backgroundColor="#FFFFFF" title="顶部导航" @clickLeft="backPage"></uni-nav-bar>
- <!-- 页面内容 -->
- <view class="page-content">
- <!-- ---------- -->
- </view>
- </view>
- </template>
- <style>
- .container {
- background-color: #ffffff;
- height: 100%;
- padding-top: var(--status-bar-height);
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- }
- </style>
参考：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F
