uni-app 中的 CSS 变量

发表于：
字数：569 阅读：≈ 2分钟 浏览：

uni-app 中的 CSS 变量

CSS变量描述5+App小程序H5
–status-bar-height系统状态栏高度系统状态栏高度25px0
–window-top内容区域距离顶部的距离00NavigationBar 的高度
–window-bottom内容区域距离底部的距离00TabBar 的高度

‍

  • ​var(--status-bar-height)​ 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom"​ 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height)​ 的 view 放在页面顶部，避免页面内容出现在状态栏。
  • 由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。如果设置了一个固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端会与 tabbar 重叠。此时可使用 --window-bottom​，不管在哪个端，都是固定在 tabbar 上方。
  • 目前 nvue 在 App 端，还不支持 --status-bar-height​ 变量，替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight​ 获取状态栏高度，然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例

nvue 里获取状态栏高度：

<template>
  <view>
    <view :style="{ height: d + 'px' }"></view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  },
};
</script>

  • 浏览器中的 CSS 变量：

    /* 继承自 HTML */
--status-bar-height: 0px;
--top-window-height:0px;
--window-left: 0px;
--window-right: 0px;
--window-margin: 0px;
--window-top: calc(var(--top-window-height) + 0px);
--window-bottom: calc(50px + env(safe-area-inset-bottom));

‍