方案一、占位
最顶部放一个高度为“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>