<!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/aui/aui.css" />
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
.normal{
display: none;
}
.active{
display: block;
}
</style>
</head>
<body class="wrap">
<div id="app">
<header class="aui-bar aui-bar-nav normal" v-for="(menu,index) in menus" v-bind:class="{active:index==cur_menu}">
{{menu.title}}
</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div class="aui-bar-tab-item" v-for="(menu,index) in menus" v-on:click="switchFrame(index)" v-bind:class="{'aui-active':index==cur_menu}" tapmode>
<i class="aui-iconfont aui-icon-home" v-if="index==0"></i>
<i class="aui-iconfont aui-icon-menu" v-if="index==1"></i>
<i class="aui-iconfont aui-icon-my" v-if="index==2"></i>
<div class="aui-bar-tab-label">{{menu.title}}</div>
</div>
</footer>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {
var headers = $api.domAll("header");
for (var i = 0; i < headers.length; i++) {
$api.fixStatusBar(headers[i]);
}
api.setStatusBarStyle({
style: 'light',
color:'#0064b0'
});
vm.init();
}
var vm = new Vue({
el:"#app",
data:{
cur_menu:0,
menus:[
{title:'首页'},
{title:'分类'},
{title:'我的'},
],
},
methods:{
init:function(){
var headerH = $api.dom("header").offsetHeight;
var footerH = $api.dom("footer").offsetHeight;
var frameH = api.winHeight - headerH -footerH;
api.openFrameGroup ({
name: 'NewsGroup',
background: '#fff',
scrollEnabled: false,
rect: {
x: 0,
y: headerH,
w: 'auto',
h: frameH
},
frames: [{
name: 'home',
url: './html/home.html',
bgColor: '#f5f5f5',
bounces:false
},{
name: 'category',
url: './html/category.html',
bgColor: '#f5f5f5',
bounces:false
},{
name: 'user',
url: './html/user.html',
bgColor: '#f5f5f5',
bounces:false
}]
}, function(ret, err){
// if( ret ){
// alert( JSON.stringify( ret ) );
// }else{
// alert( JSON.stringify( err ) );
// }
});
},
switchFrame:function(index){
if(vm.cur_menu==index){
return false;
}
vm.cur_menu=index;
api.setFrameGroupIndex({
name: 'NewsGroup',
index: index,
});
}
}
});
</script>
</html>