uniapp 关于自定义导航栏中的刘海屏适配问题


当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:

官方提供了一个CSS变量可以直接引用:

var(--status-bar-height)

该变量自动匹配设备平台状态栏高度

此变量可以用calc() 加上其他单位数值来使用

具体参数和说明:官方使用 [ 自定义导航栏注意事项 ]

点击查看代码
<template>
  <view>
      <view class="status_bar">
          <!-- 这里是状态栏 -->
      </view>
      <view> 状态栏下的文字 </view>
  </view>
</template>    
<style>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
  }
</style>


uni-app 提供内置 CSS 变量

image


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM