在工作中大家可能有这种需求，在一个主页面中镶嵌两个子页面，
这两个子页面可以通过主页面中的一个按钮去控制子页面的切换。
下面有效果图。
==================================================
主页面：
<!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 rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
<style type="text/css">
modeImg{
color: #C1131D;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">市场分布</h1>
<a class="mui-pull-right" id="changeImg"><span id="modeImg" class="mui-icon mui-icon-right-nav iconfont icon-fenbushinengyuanguihuajishu"></span></a>
</header>
<script type="text/javascript" src="../../js/mui.min.js" ></script>
<script type="text/javascript" src="../../js/app.js" ></script>
<script type="text/javascript" src="../../js/base.js" ></script>
<script type="text/javascript" src="../../js/webviewMapListGroup.js"></script>
<script type="text/javascript">
var flag = true;
mui.init({
swipeBack:false
});
mui.plusReady(function(){
var group = new webviewGroup('marketDistribution',{
items:[
{
id: "marketDistributionList.html",
url: "marketDistributionList.html",
styles:{
top:"40px",
bottom:"0px",
hardwareAccelerated:true //开启硬件加速
},
extras:{}
},{
id: "marketDistributionMap.html",
url: "marketDistributionMap.html",
styles:{
top:"40px",
bottom:"0px",
hardwareAccelerated:true //开启硬件加速
},
extras:{}
}],
onChange: function(obj) {
var index = parseInt(obj.index);
var myimg = document.getElementById("modeImg");
if(index == 1){
//console.log("地图模式="+index);
myimg.classList.remove("icon-fenbushinengyuanguihuajishu");
myimg.classList.add("icon-chazhaobiaodanliebiao");
}else{
//console.log("列表模式="+index);
myimg.classList.remove("icon-chazhaobiaodanliebiao");
myimg.classList.add("icon-fenbushinengyuanguihuajishu");
}
}
});
//图标切换事件
document.getElementById("changeImg").addEventListener('tap',function(e) {
if(flag){
group.switchTab("marketDistributionMap.html");
flag = false;
}else{
group.switchTab("marketDistributionList.html");
flag = true;
}
});
});
</script>
</body> </html>
子页面1：
<!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 rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
</head>
<body>
<div class="mui-content">
<div class="two-nav">
<div id="distributor" data-f="11" class="pan-title mui-pull-left onclick-title">
经销商列表
</div>
<div id="customer" data-f="22" class="pan-title mui-pull-right">
客户列表
</div>
</div>
</div>
<div class="pan-content">
<ul class="mui-table-view" id="listCust">
</ul>
</div>
</body> </html>
子页面2：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<title></title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript" src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
</html>
