在项目目录下创建一个utils文件，并在里面创建一个system.js文件。

 在system.js中配置如下代码：

const SYSTEM_INFO = uni.getSystemInfoAsync();// 返回状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 返回胶囊的高度（包括距离状态栏的部分）
export const getTitleBarHeight = ()=>{if(uni.getMenuButtonBoundingClientRect) {let {top, height} = uni.getMenuButtonBoundingClientRect();return height + (top - getStatusBarHeight()) * 2;}else{return 40;}
}

在script标签中引入：

    import {getStatusBarHeight, getTitleBarHeight} from "@/utils/system.js";

我们在没有设置状态栏高度和胶囊按钮高度的时候是如下状态： 

直接在标签中进行配置：

:style="{height:getStatusBarHeight()+'px'}"

:style="{height:getTitleBarHeight()+'px'}"