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>
相关推荐
间彧14 分钟前
Spring Boot集成Spring Security 6.x完整指南
java
这里有鱼汤15 分钟前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户214118326360244 分钟前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
xiezhr1 小时前
用户只需要知道「怎么办」,不需要知道「为什么炸了」
java·api·接口设计规范
xiezhr1 小时前
接口设计18条军规:写给那些半夜被“502”叫醒的人
java·api·restful
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
RainbowSea10 小时前
12. LangChain4j + 向量数据库操作详细说明
java·langchain·ai编程
RainbowSea10 小时前
11. LangChain4j + Tools(Function Calling)的使用详细说明
java·langchain·ai编程