如下图所示，底部tab有4个菜单，分别打开对应的子页面。
现在打开侧滑菜单， 却被4个子页面遮住了，请教是问么问题~？
首页代码如下：
<!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>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab" >
<a class="mui-tab-item mui-active" data-index="0" >
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" data-index="1">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" data-index="2">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" data-index="3">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<!-- 主页面内容容器 -->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
/**
* 当前窗口对象，即父窗口；
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
*/
var self = plus.webview.currentWebview();
// 子窗口地址数组
var subpages = ["html/home.html", "html/phone.html", "html/email.html", "html/gear.html"];
// 子窗口样式
var subStyles = {
top: "45px",
bottom: "50px"
};
// 子窗口数量
var subLen = subpages.length;
// 子窗口对象数组
var subWvs = [];
// 标题栏
var title = document.querySelector(".mui-title");
// 底部选项
var tabs = document.querySelectorAll(".mui-tab-item");
// 底部文字
var labels = document.querySelectorAll(".mui-tab-label");
// 当前页面索引，初始化为0；
var activeIndex = 0;
// 目标页面索引，初始化为当前页面索引；
var targetIndex = activeIndex;
// 创建子页面
for(var i = 0; i < subLen; i++) {
/**
* 创建窗口对象，并将索引做为额外的参数传递；
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
*/
var subWv = plus.webview.create(subpages[i], cutWebviewId(subpages[i]), subStyles, {
index: i
});
// 窗口对象添加至数组
subWvs.push(subWv);
if(i > 0) {
/**
* 隐藏非第一页的窗口对象
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.hide
*/
subWv.hide("none");
}
/**
* 向父窗口添加子窗口
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.append
*/
self.append(subWv);
}
// 底部选项卡点击切换事件
for(var j = 0, jlen = tabs.length; j < jlen; j++) {
tabs[j].addEventListener("tap", function() {
// 获取当前结点的索引
targetIndex = this.getAttribute("data-index");
// 转换为number类型
targetIndex = parseInt(targetIndex, 10);
if(targetIndex == activeIndex) {
return;
}
// 切换页面
switchPage("tap", activeIndex, targetIndex);
});
}
// 子页面滑动切换事件
/*window.addEventListener("swipe_event", function(event) {
// 获取方向以及索引
var direction = event.detail.direction;
activeIndex = event.detail.index;
if(direction == "left") {
// 如果是最后一个页面，则不做左滑切换；
if(activeIndex == subLen - 1) {
console.log("最右边一页了");
return;
}
// 目标页面的索引为后面一位
targetIndex = activeIndex + 1;
} else {
// 如果是第一个页面，则不做右滑切换；
if(activeIndex == 0) {
console.log("最左边一页了");
return;
}
// 目标页面的索引为前面一位
targetIndex = activeIndex - 1;
}
// 切换页面
switchPage("switch", activeIndex, targetIndex);
});*/
/**
* 切换页面
* @param {String} _event 事件类型
* @param {Number} _active 当前页面索引
* @param {Number} _target 目标页面索引
*/
function switchPage(_event, _active, _target) {
/**
* 目标页面展示
* http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.show
*/
subWvs[_target].show("fade-in");
// 顶部文字替换
title.innerText = labels[_target].innerText;
// 如果是滑动事件，则手动切换高亮选项；
if(_event == "switch") {
tabs[_active].classList.remove("mui-active");
tabs[_target].classList.add("mui-active");
}
// 之前展示的页面隐藏
subWvs[_active].hide("none");
// 更新当前页索引
activeIndex = _target;
}
});
/**
* 截取url地址，获取窗口的id；
* @param {String} url html文件的路径
* @param {String} wvId webviewObject的id
*/
function cutWebviewId(url) {
var startIndex = url.lastIndexOf("/");
var endIndex = url.lastIndexOf(".html");
var wvId = url.substring(startIndex + 1, endIndex);
return wvId;
}
</script>
</body>
</html>
1***@qq.com
你解决了吗
2017-05-22 10:20