main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style type="text/css">
#bar{
position: relative;
width: 100%;
height: 24px;
background-color: #e1017e;
border-bottom:rgba(255, 255, 255, 0.5) 0.3px solid;
}
nav {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient:horizontal;
-webkit-flex-flow:row;
flex-flow: row;
position: relative;
width: 100%;
height: 40%;
background-color: #e1017e;
}
nav .menu{
-webkit-box-flex:1;
-webkit-flex:1;
flex: 1;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #fff;
text-align: center;
}
nav .menu.selected{
font-size: 14px;
color: #000;
font-weight: bolder;
}
#footer{
position: fixed;
width: 100%;
height: 50px;
line-height: 40px;
bottom: 0px;
background-color: #e1017e;
}
</style>
</head>
<body>
<div id="bar"></div>
<div id="footer">
<nav id="nav">
<div class="menu selected" tapmode onclick="fnSetNavMenuIndex(0);">聊天</div>
<div class="menu" tapmode onclick="fnSetNavMenuIndex(1);">订单</div>
<div class="menu" tapmode onclick="fnSetNavMenuIndex(2);">中心</div>
</nav>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var menus;
apiready = function(){
var bar = $api.byId('bar');
//$api.fixStatusBar(header);//判断算上状态栏的高度
var barH = $api.offset(bar).h;
var footer = $api.byId('footer');
//$api.fixStatusBar(header);//判断算上状态栏的高度
var footerH = $api.offset(footer).h;
menus=$api.domAll(nav, '.menu');
var frames=[];
for (var i = 0; i < menus.length; i++) {
frames.push({
name:'main_frame_' + i,
url:'./main_frame_' + i + '.html',
pageParam:{
footerH:footerH,
barH:barH
}
});
}
api.openFrameGroup ({
name: 'mainFrameGroup', //
scrollEnabled: true,
rect: {
x: 0,
y: barH,
w: 'auto',
h:api.winHeight - barH - footerH
},
index: 0,
frames: frames
}, function(ret, err){
if( ret ){
fnSetNavMenuSelected(ret.index);
if(ret.index==1)
{
api.setFrameGroupAttr({
name: 'orderFrameGroup',
hidden: false
});
}
}else{
// alert( JSON.stringify( err ) );
}
});
};
function fnSetNavMenuSelected(index_)
{
for (var i = 0; i < menus.length; i++) {
if(index_==i) //判断当前选中的那个元素,就给某一个元素增加样式
{
$api.addCls(menus[i],'selected');
}else {
$api.removeCls(menus[i],'selected');
}
}
}
function fnSetNavMenuIndex(index_)
{
fnSetNavMenuSelected(index_);
api.setFrameGroupIndex({
name: 'mainFrameGroup',
index: index_,
scroll: true
});
api.setFrameGroupAttr({ //注意 先隐藏 在另一个页面也需要隐藏 （两个隐藏解决）
name: 'orderFrameGroup',
hidden: true
});
}
</script>
</html>
main.frame_1.html页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header{
position: relative;
width: 100%;
height: 40px;
background-color: #e1017e;
}
header .center{
position: relative;
width: 100%;
height: 40px;
text-align: center;
}
</style>
</head>
<body style="background-color:#cccccc; height:850px;">
ssssssssssss
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
apiready=function(){
var footerH = api.pageParam.footerH;
var barH = api.pageParam.barH;
//var h= api.winHeight - barH - headerH;
api.openFrameGroup ({
name: 'orderFrameGroup',
scrollEnabled: true,
rect: {
x: 0,
y: barH,
w: 'auto',
h: api.winHeight - barH - footerH
},
index: 0,
frames: [{
name: 'frame3',
url: './order_frame_0.html',
bgColor: '#fff'
},{
name: 'frame4',
url: './order_frame_1.html',
bgColor: '#fff'
}]
}, function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
api.setFrameGroupAttr({ //这里opengroupframe 需要隐藏
name: 'orderFrameGroup',
hidden: true
});
}
</script>
</html>
其他页面
main_frame_0
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
header{
position: relative;
width: 100%;
height: 40px;
background-color: #e1017e;
}
header .left{
position: absolute;
bottom: 0;
left:0;
width: 100px;
height: 40px;
line-height: 40px;
}
header .center{
position: relative;
width: 100%;
height: 40px;
background:url(../image/title_main.png);
background-size: 74px 19px;
background-position: center center;
background-repeat: no-repeat;
}
header .right{
position: absolute;
bottom: 0;
right:0;
width: 80px;
height: 40px;
line-height: 40px;
background:url(../image/membercenter.png);
background-size: 30px 30px;
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body style="background-color:#cccccc; height:850px;">
<header>
<div class="left">离线</div>
<div class="center"></div>
<div class="right">审核中</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
</html>
main_frame_2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<body style="background-color:#cccccc; height:150px;">
2
</body>
<script type="text/javascript" src="../script/api.js"></script>
</html>
订单详细页面 order_frame_0
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>订单详细</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<body style="height:500px;background-color:#fff;">
待支付
s2</br>
s2</br>
s2</br>
s2</br>
s2</br>
s2</br>
</body>
<script type="text/javascript" src="../script/api.js"></script>
</html>
版权声明：本文为weixin_36792339原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。