码云SVN仓库地址：https://gitee.com/lim2018/vx/tree/master
MUI项目基础框架，底部导航栏切换
目录结构
index为入口页主体，sub1-4为要切换的子页面
index页代码：
<!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>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
/**头部标题栏**/
.mui-bar-nav {
background: #000000;
}
.mui-title {
color: #FFFFFF;
}
/**导航图标颜色**/
.mui-bar-tab .mui-tab-item.mui-active {
color: #4cd964;
}
</style>
</head>
<body>
<!--
作者：2184291781@qq.com
时间：2019-01-06
描述：头部
-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">微信</h1>
</header>
<!--主体为子页面-->
<!--
作者：2184291781@qq.com
时间：2019-01-06
描述：底部导航
-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active mui-tab-href" href="sub1.html">
<span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-tab-label">微信</span>
</a>
<a class="mui-tab-item mui-tab-href" href="sub2.html">
<span class="mui-icon mui-icon-bars"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item mui-tab-href" href="sub3.html">
<span class="mui-icon mui-icon-navigate"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item mui-tab-href" href="sub4.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>
</body>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
//mui加载完成
mui.plusReady(function() {
//定义子页面数组
var subPages=[];
//取href所在的dom对象
var href=document.getElementsByClassName("mui-tab-href");
for(var i=0;i<href.length;i++){
//把每个导航页对应的href放入数组
subPages[i]=href[i].getAttribute("href");
}
//定义主页面的样式,主要是大小位置
var subPageStyle = {
top: "44px", //子页面距离顶部高度
bottom: "50px" //子页面距离底部距离
};
//获取主的webview
var mainView = plus.webview.currentWebview();
//遍历数组，根据每个url创建webviwe
for(var i = 0; i < subPages.length; i++) {
//括号内参数分别为 url id style
var subView = plus.webview.create(subPages[i], subPages[i], subPageStyle);
//把子webviwe追加到主的webviwe中 子webviwe默认隐藏
mainView.append(subView);
}
//然后要第一个子webview显示出来 也就是导航微信那页
//补充：index这页是入口页 默认打开APP时候就是显示webview中,所以不用另外加入webview中
plus.webview.show(subPages[0]);
//给每个导航图标注册单击事件
mui(".mui-bar-tab").on("tap","a",function(){
//设置当前点击的导航图标对应的子页面的webview显示,根据指定的id设置
//id在a标签的href内 取里面的值就行
var id=this.getAttribute("href");
plus.webview.show(id);
})
})
</script>
</html>
子页面sub1代码 其他页类似
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<!--
作者：2184291781@qq.com
时间：2019-01-06
描述：主体
-->
<div class="mui-content">
<h1>微信</h1>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</html>