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>
相关推荐
yddddddy9 小时前
css的基本知识
前端·css
昔人'9 小时前
css `lh`单位
前端·css
hdsoft_huge10 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
雨白10 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark10 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea
赛姐在努力.10 小时前
《IDEA 突然“三无”?三秒找回消失的绿色启动键、主菜单和项目树!》
java·intellij-idea
猎板PCB黄浩11 小时前
从废料到碳减排:猎板 PCB 埋容埋阻的绿色制造革命,如何实现环保与性能双赢
java·服务器·制造
ZzzK,11 小时前
JAVA虚拟机(JVM)
java·linux·jvm
西红柿维生素11 小时前
JVM相关总结
java·jvm·算法
Nan_Shu_61411 小时前
Web前端面试题(2)
前端