<!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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="fonts/iconfont.css" />
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!--侧滑菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>。
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
</ul>
</div>
</div>
</aside>
<!--主页-->
<div class="mui-inner-wrap">
<div class="mui-bar mui-bar-nav nav">
<a href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-left" style="position: absolute;color: #fff;"></a>
<a class="mui-icon icon-fenxiang mui-pull-right" style="color: #fff;"></a>
<div class="mui-input-row mui-search" style="width: 50%;margin: 0 auto;overflow: inherit;">
<input type="search" class="mui-input-clear search" placeholder="">
</div>
</div>
<div class="mui-content">
</div>
<nav class="mui-bar mui-bar-tab" style="background: #0295da;">
<a id="defaultTab" class="mui-tab-item mui-active" href="home.html" style="color: #fff;">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label mt3">首页</span>
</a>
<a class="mui-tab-item" href="information.html" style="color: #fff;">
<span class="mui-icon icon-faxian"></span>
<span class="mui-tab-label mt3">发现</span>
</a>
<a class="mui-tab-item" href="#offCanvasSide" style="color: #fff;">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label mt3">用户</span>
</a>
</nav>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var subpages = ['home.html', 'information.html'];
var subpages_style = {
top: '44px',
bottom: '50px',
};
mui.plusReady(function() {
var we = plus.webview.currentWebview();
we.setStyle({
scrollIndicator: 'none',
});
for(var i = 0; i < subpages.length; i++) {
var stu = plus.webview.create(subpages[i], subpages[i], subpages_style);
if(i > 0) {
stu.hide();
}
we.append(stu);
}
});
var art = subpages[0];
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var tar = this.getAttribute('href');
if(tar == art) {
return;
}
plus.webview.show(tar);
plus.webview.hide(art);
art = tar;
});
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
switch(this.value) {
case 'main-move':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
break;
case 'main-move-scalable':
if(moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台原生侧滑关闭页面；
if(mui.os.plus && mui.os.ios) {
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
}
</script>
</body> </html>
8***@qq.com (作者)
侧滑是写在父webview的，那子webview层级能比父webview层级低吗
2017-04-22 09:18
wen如故i
不能，都会覆盖父级的。。子webview是固定的吗？、就是只打开一次，永久的，那你可以写在子webview里面，，要么open一个webview作为侧滑。那么层级永远是比现实webview高的。。demo里面侧滑是webview模式吧
2017-04-22 09:51