跟导航栏相关的 CSS 变量

2020-05-12 2020-05-12 约 68 字预计阅读 1 分钟

警告

本文最后更新于 2020-05-12，文中内容可能已过时。

来自：https://uniapp.dcloud.io/frame?id=css%e5%8f%98%e9%87%8f 在开发过程中，既不想打开 NavigationStyle，又想让页面空出手机标签的位置，可以使用 css 变量———–status-bar-height 使用方法：

<template>
  <!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta -->
  <page-meta>
    <navigation-bar />
  </page-meta>
  <view>
    <view class="status_bar">
      <!-- 这里是状态栏 -->
    </view>
    <view> 状态栏下的文字 </view>
  </view>
</template>
<style>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
</style>

这里得出来的变量单位是 px，也可以直接用在标签上另外还有其他两个 CSS 变量，如下

CSS 变量	描述	App	小程序	H5
–status-bar-height	系统状态栏高度	系统状态栏高度、nvue 注意见下	25px	0
–window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
–window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度