uniapp顶部状态栏设置(适配刘海屏)

方案一、占位

最顶部放一个高度为"var(--status-bar-height)"的div

javascript 复制代码
<template>
  <view>
      <view class="status_bar">
          <!-- 这里是状态栏 -->
      </view>
      <view> 状态栏下的文字 </view>
  </view>
</template>    
<style>
  .status_bar {
      height: var(--status-bar-height);/*刘海儿的高度*/
      width: 100%;
      background-color:#007AFF ;
  }
</style>

方案二、高度自适应

javascript 复制代码
<template>
  <view>
      <view class="content"> 状态栏下的文字 </view>
  </view>
</template>    
<style>
  .content {
      height: calc(100vh + var(--status-bar-height));/*加上刘海儿的高度*/
      width: 100%;
      background-color:#007AFF ;
  }
</style>
相关推荐
兮动人3 分钟前
获取终端外网IP地址
java·网络·网络协议·tcp/ip·获取终端外网ip地址
Mike_jia4 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
呆呆的小鳄鱼4 分钟前
cin,cin.get()等异同点[面试题系列]
java·算法·面试
wuxuanok6 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia6 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder15 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士15 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明15 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Touper.19 分钟前
JavaSE -- 泛型详细介绍
java·开发语言·算法
Kevin在掘金9201420 分钟前
c#、.net、Fluent UI Blazor
前端