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>
相关推荐
游戏开发爱好者83 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
摇滚侠4 小时前
Spring Boot3零基础教程,SpringApplication 自定义 banner,笔记54
java·spring boot·笔记
青云交4 小时前
Java 大视界 -- Java 大数据机器学习模型在游戏用户行为分析与游戏平衡优化中的应用
java·大数据·机器学习·数据存储·模型构建·游戏用户行为分析·游戏平衡优化
暗武逢天7 小时前
Java导出写入固定Excel模板数据
java·导出数据·easyexcel·excel固定模板导出
摇滚侠7 小时前
Spring Boot3零基础教程,KafkaTemplate 发送消息,笔记77
java·spring boot·笔记·后端·kafka
namekong87 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天8 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
fat house cat_10 小时前
【netty】基于主从Reactor多线程模型|如何解决粘包拆包问题|零拷贝
java·服务器·网络·netty
青云交10 小时前
Java 大视界 -- Java 大数据在智能教育学习社区互动模式创新与用户活跃度提升中的应用(426)
java·大数据·学习·flink 实时计算·智能教育社区·互动模式创新·用户活跃度
李少兄10 小时前
HTML 表单控件
前端·microsoft·html