1、在项目中找到config.xml,在它的配置中添加代码如下:
<preference name="statusBarAppearance" value="true"/>
2、在页面中设置如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style>
html,body{
height:100%;
background-color: #fafafa;
}
.headerBox{
width: 100%;
height:166px;
background-color: #03A9F4;
text-align: center;
border-radius: 0 0 8px 8px;
}
header{
position:relative;
width:100%;
text-align: center;
}
header span{
position:relative;
font-size:18px;
height:44px;
line-height: 44px;
color:#fff;
}
</style>
</head>
<body>
<div class="headerBox">
<header id="header">
<span>首页</span>
</header>
</div>
</body>
<script type="text/template" id="template">
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echarts.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
apiready = function () {
var header = $api.byId('header');
$api.fixStatusBar(header);
}
</script>
</html>