<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<script src="js/login.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="mui-bar mui-bar-tab" id="nav">
<a id="tab_home" class="mui-tab-item mui-active" >
<span class="mui-icon mui-icon-home" ></span>
<span class="mui-tab-label">首页</span>
</a>
<a id="tab_message" class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">消息</span>
</a>
<a id="tab_contact" class="mui-tab-item">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a id="tab_setting" class="mui-tab-item" >
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[//首先加载首页
{
url:'html/home.html',
id:'tab_home',
styles:{
top:'0px',
bottom:'60px'
}
}
],
preloadPages:[//预加载其他页面
{
url:'html/message.html',
id:'tab_message',
styles:{
top:'0px',
bottom:'60px'
}
},
{
url:'html/contact.html',
id:'tab_contact',
styles:{
top:'0px',
bottom:'60px'
}
},
{
url:'html/setting.html',
id:'tab_setting',
styles:{
top:'0px',
bottom:'60px'
}
}
]
});
mui.plusReady(function(){
var tab_home,tab_message,tab_contact
mui("#nav").on("tap","#tab_home",function(){//点击触发
tab_home=plus.webview.getWebviewById("tab_home");
tab_home.show()
tab_message.hide()
tab_contact.hide()
tab_setting.hide()
})
mui("#nav").on("tap","#tab_message",function(){//点击触发
tab_message=plus.webview.getWebviewById("tab_message");
tab_message.show()
})
mui("#nav").on("tap","#tab_contact",function(){//点击触发
tab_contact=plus.webview.getWebviewById("tab_contact");
tab_contact.show()
})
mui("#nav").on("tap","#tab_setting",function(){//点击触发
tab_setting=plus.webview.getWebviewById("tab_setting");
tab_setting.show()
})
})
</script>
</body>
</html>
我们来看一下上边的代码,底部导航条标签<nav>以及class属性这些没啥好说的,记住就行了,我们主要看mui中的函数。
首先是mui.init(),mui框架将很多的功能配置都集中在mui.init()中,如果我们要使用某项功能,只需要在init中配置对应的参数即可,目前支持在init中配置的功能包括:创建子页面、预加载、手势事件配置、上拉加载、下拉刷新、关闭页面、设置系统状态栏背景颜色。如上代码所示,我们在init方法中配置了subpages:[{...}](创建子页面)、preloadPages:[{...}](预加载)。