当前位置: 首页 > news >正文

uni-app 系统状态栏高度CSS变量--status-bar-height

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
  • 目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码
<template><!-- HBuilderX 2.6.3+ 新增 page-meta, 详情:https://uniapp.dcloud.io/component/page-meta --><page-meta><navigation-bar /></page-meta><view><view class="status_bar"><!-- 这里是状态栏 --></view><view>状态栏下的文字</view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;}
</style>

相关文章:

  • istio pod不启动及访问报RBAC错误问题解决
  • JavaWeb Response:设置响应数据
  • 如何更好的引导大语言模型进行编程的高效开发流程?
  • Kali Linux 2024.1
  • Java多线程注意事项(初级程序员必看)
  • 蓝桥杯练习题——dp
  • Python图像处理【21】基于卷积神经网络增强微光图像
  • SpringBoot接口防抖(防重复提交)的一些实现方案
  • Apache Flink连载(三十九):Kuberneters 部署案例
  • TikTok企业认证教程:提升账号可信度的必备步骤
  • 项目中如何优雅的使用枚举类型
  • Gif动图体积太大怎么办?1分钟极速压缩gif体积
  • 【Python刷题】回文链表
  • 2024 Idea激活,分享几个IntelliJ IDEA激活的方案
  • Linux 学习笔记(12)
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • JS学习笔记——闭包
  • k8s 面向应用开发者的基础命令
  • Otto开发初探——微服务依赖管理新利器
  • Redis 中的布隆过滤器
  • SpriteKit 技巧之添加背景图片
  • vue总结
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 工作中总结前端开发流程--vue项目
  • 解析带emoji和链接的聊天系统消息
  • 开发基于以太坊智能合约的DApp
  • 猫头鹰的深夜翻译:JDK9 NotNullOrElse方法
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 一道面试题引发的“血案”
  • 译自由幺半群
  • MPAndroidChart 教程:Y轴 YAxis
  • Prometheus VS InfluxDB
  • 正则表达式-基础知识Review
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #Ubuntu(修改root信息)
  • ()、[]、{}、(())、[[]]命令替换
  • (2)(2.10) LTM telemetry
  • (52)只出现一次的数字III
  • (bean配置类的注解开发)学习Spring的第十三天
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (iPhone/iPad开发)在UIWebView中自定义菜单栏
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (附源码)ssm智慧社区管理系统 毕业设计 101635
  • (规划)24届春招和25届暑假实习路线准备规划
  • (三) diretfbrc详解
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (转)fock函数详解
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .jks文件(JAVA KeyStore)
  • .NET Core 控制台程序读 appsettings.json 、注依赖、配日志、设 IOptions
  • .Net Core缓存组件(MemoryCache)源码解析
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter