刚接触miu框架，今天闲来无事在web网页上测试侧滑菜单，请问如何修改，看到部分说改成click事件！高手能否后贴出代码出来看看吗
以下是官方的源码
<!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">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
当前页面为主界面，你可以在主界面放置任何内容；
打开侧滑菜单有多种方式：
1、在当前页面快速向右滑动（swipe）；
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="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">
显示侧滑菜单
</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>
<script>
var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,mode = 'main-move';
if (!mui.os.android) {
//整体滑动暂不支持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";
}
}
mui.init({
swipeBack: false,
back: back
});
function back() {
if (showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%',
zindex: 9997
}
});
});
/**
* 显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show('none', 0, function() {
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
break;
case 'menu-move':
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
case 'all-move':
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
}
});
//显示遮罩
mask.show();
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu() {
if (showMenu) {
//关闭遮罩；
mask.close();
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
break;
case 'menu-move':
//主窗体开始侧滑；
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
break;
case 'all-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
//menu页面同时移动
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
break;
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
//改变标志位
showMenu = false;
}
}
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
switch (this.value) {
case 'main-move':
//仅主窗口移动的时候，menu页面的zindex值要低一点；
menu.setStyle({left:'0',zindex:9997});
if(mode=='all-move'){
menu.setStyle({
left: '0%'
});
}
mode = 'main-move';
break;
case 'menu-move':
menu.setStyle({left:'-70%',zindex:9999});
if(mode=='all-move'){
menu.setStyle({
left: '0%'
});
}
mode = 'menu-move';
break;
case 'all-move':
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
mode = 'all-move';
break;
}
}
});
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
document.getElementById("show-btn").addEventListener('tap',openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft", closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
}
</script>
</body>
</html>
14 个回复
DCloud_UNI_FXY
下载最新的hello-mui的源码，参考div实现的可拖拽的侧滑菜单（offcanvas-drag-left.html,offcanvas-drag-right.html）里边都使用了我们的scroll控件来实现区域滚动
DCloud_UNI_FXY
DCloud_UNI_FXY
非5+环境运行，请使用我们的可拖拽侧滑菜单(纯html5实现的)
张强 (作者)
您好！有演示的案例吗？ 或者是有个地址看看
还有最新的mui的框架在哪里下载
张强 (作者)
我用H5+里面的plus 文件夹里面的webview_mask.html 上传 用手机做过测试!
每能看到侧滑的效果
张强 (作者)
mui 的CSS 组建里面有实例 ，但是不能向下滚动！应该是溢出隐藏了
http://tp.mom168.com/wap/ch.html
DCloud_UNI_FXY
请下载最新的mui及hello-mui，参考里边的示例代码
http://dcloudio.github.io/mui/
张强 (作者)
我下载的有，但是都是app 手机上看的！ 没有web版的
张强 (作者)
赞！！ 我试过了 ，我今天换个手机 可以
（offcanvas-drag-left.html,offcanvas-drag-right.html）
这个在苹果手机系统上不行 是溢出影藏的 不能滚动的 应该是个小BUG
张强 (作者)
（offcanvas-drag-left.html,offcanvas-drag-right.html）
在IOS上A 连接是无效的 点击没有反应
5***@qq.com
这种问题我也遇到了，不知道如何解决，还请赐教
2016-09-29 20:33
DCloud_UNI_FXY
不要使用onclick事件，是用我们提供的tap事件。
张强 (作者)
代码是这样的 我直接在前面加了个 href=" " 这个连接是无效的！
DCloud_UNI_FXY
嗯。目前是无效的，主要是5+客户端内一般是打开webview窗口。
你可以自己监听a的tap事件，然后document.location.href=this.href跳转
5***@qq.com
如何写代码，急急急，请告知，最好有代码参考
2016-09-29 20:38
张强 (作者)
tap 事件 有没有案例可以参考的！ 或者是有没有案例 可以看到的效果！
或者有个 代码串 可以参考的~！
$(".list-txt li a").tap(function(){
alert("tap");
});