支持。把左右两个菜单区域都放进去就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-right{
color: #fff;
}
.title{
margin: 35px 15px 10px;
}
.title+.content{
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
</style>
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right">
<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>
<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">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">左滑导航</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content-padded">
<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中，
优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
当前页面为主界面，你可以在主界面放置任何内容；
打开侧滑菜单有多种方式：
1、在当前页面向左拖动；
2、点击页面右上角的<span class="mui-icon mui-icon-bars"></span> 图标；
3、通过JS API触发（例如点击如下蓝色按钮体验）；
<span class="android-only">4、Android手机按menu键；</span>
</p>
<p style="padding: 5px 20px;margin-bottom: 5px;">
<button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px 100px;">
显示侧滑菜单
</button>
</p>
<p>侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>
</div>
<form class="mui-input-group" style="margin-bottom: 15px;">
<div class="mui-input-row mui-radio">
<label>主界面移动、菜单不动</label>
<input name="style" type="radio" checked="" value="main-move">
</div>
<div class="mui-input-row mui-radio">
<label>主界面不动、菜单移动</label>
<input name="style" type="radio" value="menu-move">
</div>
<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
<label>整体移动</label>
<input name="style" type="radio" value="all-move">
</div>
</form>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
});
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//Android暂不支持整体移动动画
if(!mui.os.android){
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change','input',function () {
if(this.checked){
switch (this.value){
case 'main-move':
classList.remove('mui-slide-in');
if(moveTogether){
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
moveTogether = false;
}
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
if(classList.contains('mui-slide-in')){
classList.remove('mui-slide-in');
}
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'close'
});
});
}
</script>
</body>
</html>
8 个回复
DCloud_UNI_FXY
支持。把左右两个菜单区域都放进去就行了
hero (作者)
怎么控制显示哪一个aside呢，当前只能显示mui-off-canvas-right这一个，left这个不显示，怎么做到分开控制显示和关闭呢？
z***@163.com
同问，在一个页面里同时加了左和右两个侧滑，用手势能左右滑动显示了，但是怎么样用按钮进行控制左右显示和隐藏呢，用下面朋友的给菜单设置不同的ID，然后href的方法不行呀
2016-10-22 09:42
DCloud_UNI_FXY
给菜单设置不同的id。
href里边直接#id就可以打开指定菜单。
兔图天下
指定了href也不可以分别控制显示，这是bug吗？
2015-03-10 10:25
DCloud_UNI_FXY
嗯。是有个bug.下个版本会修复。
你可以告知你的QQ。我给你发一个修复后的版本先使用着
2015-03-10 14:27
兔图天下
回复 DCloud_UNI_FXY:我的QQ：307285468，谢谢
2015-03-10 15:20
兔图天下
回复 DCloud_UNI_FXY:如果使用代码去控制，该怎么写呢
2015-03-10 15:22
DCloud_UNI_FXY
嗯。你可以直接代码控制
offCanvasWrapper.offCanvas().show('left') or offCanvasWrapper.offCanvas().show('right');
2015-03-10 15:39
兔图天下
回复 DCloud_UNI_FXY:测试了下，用代码可以控制，说明只是href解析的部分由问题，多谢~~
2015-03-10 15:48
binmax
关闭的另一侧的时候只关闭了遮罩，侧滑菜单未关闭
2016-11-02 18:34
二
回复 兔图天下: 请问代码是写在什么位置的
2019-10-22 15:55
凌凌
这个用JS要怎么触发呢
lemongranule
可以的 我都实现了。
z***@163.com
怎么实现的，能分享一下吗，谢谢啦
2016-10-22 09:43
z***@163.com
给后来的朋友，这样就可以实现
定义两个按钮：
binmax
关闭的另一侧的时候只关闭了半透明遮罩，侧滑菜单未关闭
3***@qq.com - 111
挖文，有具体的解决方案吗？我试了试不行啊