|
|
<!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 type="text/css">
html,
body {
height: 100%;
}
.wrap {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
}
header {
height: 44px;
width: 100%;
line-height: 44px;
font-size: 20px;
text-align: center;
position: relative;
}
header>div{
display: inline-block;
width: 50%;
}
header>span{
width: 30px;
height:30px;
background:url(../images/search.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
right:20px;
bottom:7px;
}
header>div>i{
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
}
header>div>a{
color: #e5e5e5;
width: 38%;
}
header>div>a.hover{
color:#0d0d0d;
border-bottom:1px solid;
}
/*导航*/
nav{
height: 30px;
width: 100%;
line-height: 30px;
font-size: 20px;
}
nav>ul{
width: 100%;
height: 100%;
}
nav>ul>li{
float: left;
width: 33.33%;
text-align: center;
font-size: 18px;
color:#919191;
}
nav>ul>li.hover{
color:#161616;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
}
/*脚步*/
footer {
height: 50px;
width: 100%;
background-color: #81a9c3;
color: white;
text-align: center;
}
footer ul{
width: 100%;
height: 100%;
}
footer ul li{
width: 33.333%;
height: 100%;
float: left;
background: #e5e5e5;
}
footer ul li span{
height: 20px;
font-size: 10px;
display: inline;
}
footer ul li div{
height: 14px;
font-size: 10px;
color: #999;
}
footer ul li div.footerBg{
width: 100%;
height: 36px;
}
footer ul li div.footerBg div{
width: 26px;
height: 26px;
color: #999;
border:1px solid #999;
border-radius: 50%;
position: relative;
background: #999;
margin: 0 auto;
top:6px;
}
footer ul li div.footerBg.big{
width: 40px;
height: 40px;
color: #999;
border:1px solid #999;
border-radius: 50%;
position: relative;
background: #999;
margin: 0 auto;
}
</style>
</head>
<body class="wrap">
<header>
<div>
<a style="margin-right:-5px;">发现</a>
<i></i>
<a class="hover">社区</a>
</div>
<span></span>
</header>
<nav>
<ul>
<li class="hover menu" onclick="fnSetNavMenuIndex(0)">本周热门</li>
<li class="menu" onclick="fnSetNavMenuIndex(1)">最新发布</li>
<li class="menu" onclick="fnSetNavMenuIndex(2)">最多回复</li>
</ul>
</nav>
<section class="flex-1">
</section>
<footer>
<ul>
<li>
<div class="footerBg">
<div></div>
</div>
<div>首页</div>
</li>
<li>
<div class="footerBg big">
</div>
</li>
<li>
<div class="footerBg">
<div></div>
</div>
<div>我的</div>
</li>
</ul>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.dom('header'); // 获取 header 标签元素
var footer = $api.dom('footer'); // 获取 footer 标签元素
var nav =$api.dom('nav');
// 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
// 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
// 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
var headerH = $api.fixStatusBar(header);
// 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
var footerH = $api.fixTabBar(footer);
var navH = $api.offset(nav).h;
menus = $api.domAll(nav, ".menu");
api.openFrameGroup ({
name: 'doscovery',
background: '#fff',
scrollEnabled: false,
rect: {
marginTop: headerH+navH, // main页面距离win顶部的高度
marginBottom: footerH, // main页面距离win底部的高度
w: 'auto' // main页面的宽度 自适应屏幕宽度
},
index: 0,
frames: [{
name: 'community',
url: 'community.html',
bgColor: '#fff'
},{
name: 'community1',
url: 'community1.html',
bgColor: '#000'
},{
name: 'community1',
url: 'community1.html',
bgColor: '#f40'
}
]
}, function(ret, err){
});
api.addEventListener({
name: 'swipeleft'
}, function(ret, err){
//这里我要滑动切换顶部的导航，还要一个页面组
});
};
//点击切换社区栏目
var menus;
function fnSetNavMenuIndex(index_){
SetClass(index_)
api.setFrameGroupIndex({
name: 'doscovery',
index: index_,
scroll: true
});
}
function SetClass(index_){
for(var i=0;i<menus.length;i++){
if(index_==i){
$api.addCls(menus,"hover");
}else {
$api.removeCls(menus,"hover");
}
}
}
</script>
</html>
|
|
