uniapp顶部状态栏设置（适配刘海屏）

本文主要是介绍uniapp顶部状态栏设置（适配刘海屏），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

方案一、占位

最顶部放一个高度为“var(--status-bar-height)”的div

<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>

方案二、高度自适应

<template><view><view class="content"> 状态栏下的文字 </view></view>
</template>    
<style>.content {height: calc(100vh + var(--status-bar-height));/*加上刘海儿的高度*/width: 100%;background-color:#007AFF ;}
</style>

这篇关于uniapp顶部状态栏设置（适配刘海屏）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---