版权声明：转载时请标注http://blog.csdn.net/zhihua_w https://blog.csdn.net/Zhihua_W/article/details/83345739
综述
为了使自己更好的往全栈工程师方向发展，最近在学习一个混合app开发模式。就是使用Dcloud进行开发APP。通过几天的学习感觉这个混合app开发非常方便，我也开始总结一下开发小技巧进行记录，方便在以后的开发中可以进行使用。
在我们平常使用的APP中，一般操作菜单都是放在页面的底部，一般为四个或是五个。这样的底部导航菜单设计使我们的APP使用起来非常方便。在H5开发中，为了使页面利用率更高，代码冗余更少，所以总结了这么一个小技巧，使我们的APP无论开发还是使用都特别方便。查看学习此方法需要有一定的Mui开发框架基础。
下面即为实现代码（完整代码下载地址：点击底部导航菜单切换界面）：
源码
<!--=======================================-->
<!--Created by ZHIHUA·WEI. -->
<!--Author: Wei ZhiHua -->
<!--Date: 2018/10/24 0001 -->
<!--Time: 下午 2:26 -->
<!--Project: ZHIHUA·WEI -->
<!--Power: APP主页 -->
<!--=======================================-->
<!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>
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="main.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="task.html">
<span class="mui-icon mui-icon-paperclip"></span>
<span class="mui-tab-label">任务</span>
</a>
<a class="mui-tab-item" href="personal.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
//1、定义底部导航子页面(页面id)，点击底部导航跳转到子页面风格
var subpages = ['main.html', 'task.html', 'personal.html'];
var subpage_style = {
top: '0px',
bottom: '51px'
};
//2、创建子页面，首个选项卡页面显示，其它均隐藏
var view_show = {};
mui.plusReady(function() {
//2.1、获得当前主页面信息数据
var current = plus.webview.currentWebview();
//2.2、循环创建各子页面
for(var i = 0; i < subpages.length; i++) {
var temp = {};
var sub_view = plus.webview.create(subpages[i], subpages[i], subpage_style);
//2.3、将首个子页面进行显示|其他隐藏
if(i > 0) {
sub_view.hide();
} else {
temp[subpages[i]] = "true";
mui.extend(view_show, temp);
}
//2.4、将各子页面添加到当前主页下
current.append(sub_view);
}
});
//3、当前激活选项
var activeTab = subpages[0];
//4、底部导航选项卡点击事件
mui(".mui-bar-tab").on('tap', 'a', function() {
//4.1、获取当前点击元素的href属性|判断如果和当前激活选项相同，则不进行操作|否则显示新的页面
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return false;
}
//4.2、如果当前点击不是当前激活的选项卡则显示点击目标选项卡
//4.2.1、若为iOS平台或非首次显示，则直接显示
if(mui.os.ios || view_show[targetTab]) {
plus.webview.show(targetTab);
} else {
//4.2.2、否则，使用fade-in动画，且保存变量
var temp = {};
temp[targetTab] = "true";
mui.extend(view_show, temp);
plus.webview.show(targetTab, "fade-in", 300);
}
//4.3、隐藏当前;
plus.webview.hide(activeTab);
//4.4、更改当前活跃的选项卡
activeTab = targetTab;
});
//5、自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
var defaultTab = document.getElementById("defaultTab");
//5.1、模拟首页点击
mui.trigger(defaultTab, 'tap');
//5.2、切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(defaultTab !== current) {
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>
</body>
</html>