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>
相关推荐
陈一Tender9 小时前
JavaWeb后端实战(登录认证 & 令牌技术 & 拦截器 & 过滤器)
java·开发语言·spring boot·mysql
Camel卡蒙9 小时前
红黑树详细介绍(五大规则、保持平衡操作、Java实现)
java·开发语言·算法
这儿有一堆花9 小时前
网站链接重定向原理
前端
cecyci10 小时前
如何实现AI聊天机器人的打字机效果?
前端·javascript
IT_陈寒10 小时前
Vite 5个隐藏技巧让你的项目构建速度提升50%,第3个太香了!
前端·人工智能·后端
孤廖10 小时前
吃透 C++ 栈和队列:stack/queue/priority_queue 用法 + 模拟 + STL 标准实现对比
java·开发语言·数据结构·c++·人工智能·深度学习·算法
我命由我1234510 小时前
Android 对话框 - 对话框全屏显示(设置 Window 属性、使用自定义样式、继承 DialogFragment 实现、继承 Dialog 实现)
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
詩句☾⋆᭄南笙10 小时前
HTML的盒子模型
前端·html·盒子模型
落言10 小时前
AI 时代的工程师:懂,却非懂的时代
前端·程序员·架构
一枚攻城狮10 小时前
前端知识点大汇总
前端