1.確認框
api.confirm({
title: '退出',
msg: '點擊確定退出程序',
buttons:['確定', '取消']
},function(ret,err){
if(ret.buttonIndex == 1){
alert('sd')
}
});
2.toast彈窗
api.toast({
msg: '網絡錯誤',
duration: 3000,
location: 'bottom'
});
3.加載框
api.showProgress({
style: 'default',
title: '正在上傳中...',
text: 10+ '%',
modal: true
});
加載完成掉用關閉
api.hideProgress();
4.緩存讀取設置清除
$api.setStorage('name','key');//設置
$api.getStorage('name');//獲得指定name的值
$api.rmStorage('name');//清除指定name的值
$api.clearStorage();//清楚全部本地數據
5.頭部自動適應手機的狀態欄 不擋住狀態欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,
body {
width: 100%;
font-family: PingFang-SC-Medium;
}
.topbar {
width: 100%;
height: 45px;
background: #f8f8f8;
border-bottom: 1px solid #e4e4e4 !important;
overflow: hidden;
}
.topbar .box1 {
width: 15%;
height: 45px;
float: left;
}
.topbar .box1 .back {
width: 11px;
height: 20px;
margin-top: 13px;
margin-left: 17px;
}
.topbar .box1 .back img {
width: 100%;
height: 100%;
}
.topbar .box2 {
width: 70%;
height: 45px;
float: left;
}
.topbar .box2 p{
text-align: center;
line-height: 45px;
font-size: 17px;
color: #000000;
font-weight: bold;
}
.topbar .box3 {
width: 15%;
height: 45px;
float: left;
}
.topbar .box3 .serch{
width: 20px;
height: 15px;
margin-top: 17px;
margin-left: 6px;
}
.topbar .box3 .serch img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="topbar" id='titlebox'>
<div class="box1">
<div class="back" onclick="closeWin()">
<img src="../../image/courseback.png" alt="">
</div>
</div>
<div class="box2" >
<p id='name'>我的列表</p>
</div>
<div class="box3">
<div class="serch" onclick="serchinfo()"></div>
</div>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
//主要代碼
var header = document.getElementById('titlebox');
$api.fixStatusBar(header);
}
</script>
</body>
</html>
6.app一般頁面一般有個頭部頁面和下面的內容頁面，建議寫在兩個頁面，
比如index.html頁面 如果頭部頁面和內容頁面全部寫在一個頁面，當內容大於手機屏幕，向上滾動就會壓住手機狀態欄，
所以建議頭部內容寫在兩個頁面 結構index.html是頭部index_body.html是內容頁面
讓打開index.html的時候自動加載下面的Frame index_body.html頁面
index_body.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
html,
body {
width: 100%;
font-family: PingFang-SC-Medium;
}
.topbar {
width: 100%;
height: 45px;
background: #f8f8f8;
border-bottom: 1px solid #e4e4e4 !important;
overflow: hidden;
}
</style>
</head>
<body>
<div class="topbar" id='titlebox'>
裏面寫標題和返回按鈕樣式根據要求自定義
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
// 適配狀態欄
var header = document.getElementById('titlebox');
$api.fixStatusBar(header);
var parms = api.pageParam;
//自動加載內容頁面
api.openFrame({
name: 'index_body',
url: './index_body.html',
rect: {
x: 0,
y: api.safeArea.top+46, //後面的數字可以自己調整 就是頭部導航的高度 往上走1-//2個像素
w: 'auto',
h: 'auto'
},
});
}
</script>
</body>
</html>
index_body.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<style>
</style>
</head>
<body>
<div>
<ul>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li>
<li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> <li>333333</li>
</ul>
</div>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/apiCloud.js"></script>
<script>
apiready = function() {
}
</script>
</body>
</html>
當內容頁面超過手機屏幕的時候，下面的內容只會往標題下面往上移動
如圖
