侧滑菜单

侧滑菜单

32 人关注该话题

nvue下 touchstart拦截掉了子元素button的click事件,有什么防止穿透的方法吗? 事件透传 侧滑菜单 weex nvue

分类: nvue 最爱旺仔 2020-06-18 16:54  发起问题 • 1 人关注 • 0 个回复 • 78 次浏览

uni-app可以做出这种侧滑菜单效果吗? 子页面 侧滑菜单 弹出菜单 侧滑菜单

分类: nvue 想得美 2020-05-16 12:50  发起问题 • 1 人关注 • 0 个回复 • 167 次浏览

求助:webview侧滑菜单与轮播图、选项卡切换的冲突问题 图片轮播 选项卡 侧滑菜单

分类: MUI 849772651@qq.com 2020-01-17 20:48  回复问题 • 4 人关注 • 5 个回复 • 1602 次浏览

关于侧滑菜单嵌套选项卡+上拉加载的问题 上拉加载 scroll 侧滑菜单

分类: MUI chenya_0216@163.com 2019-07-18 13:07  回复问题 • 2 人关注 • 2 个回复 • 1293 次浏览

侧滑菜单弹出输入框,在安卓端会出现白屏和首页子页面半屏 白屏 侧滑菜单

分类: HTML5+ 1138978919@qq.com 2019-06-14 09:45  发起问题 • 1 人关注 • 0 个回复 • 324 次浏览

侧滑菜单在同一界面是否能有两个,怎么实现? 侧滑菜单

分类: MUI 371330876@qq.com 2019-04-26 14:07  回复问题 • 7 人关注 • 8 个回复 • 2787 次浏览

div的侧滑菜单如何禁用手势侧滑 侧滑菜单

分类: MUI 13056281666@163.com 2019-04-24 18:13  回复问题 • 8 人关注 • 6 个回复 • 8477 次浏览

Demo的webview模式的侧滑菜单根本不可用? 侧滑菜单

分类: MUI 小业 2019-04-01 20:33  发起问题 • 1 人关注 • 0 个回复 • 393 次浏览

[已解决]用mui自带方法怎么获取侧滑状态(div模式) 侧滑菜单

分类: MUI JoBoJun 2019-03-26 20:54  回复问题 • 3 人关注 • 3 个回复 • 2678 次浏览

div式右滑菜单打开页面后,再返回时直接退出了APP 侧滑菜单

分类: MUI 一休_zj 2019-02-16 17:41  发起问题 • 1 人关注 • 0 个回复 • 550 次浏览

webview父子页面蒙版联动问题 侧滑菜单 mui mask

分类: MUI zedicc@163.com 2019-01-14 17:04  发起问题 • 1 人关注 • 0 个回复 • 510 次浏览

更多...
0

赞同来自:

请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)
见详细代码如下:
首页
```javascript
<!doctype html>
<html... 显示全部 »
请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)
见详细代码如下:
首页
```javascript
<!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" />
</head>

<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left" id="side_menu"></a>
<h1 class="mui-title">标题</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div class="mui-content">

</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var main = null;
var menu = null;
var isInTransition = false;
var showMenu = false;
mui.init();
mui.plusReady(function() {
main = plus.webview.currentWebview();
// 预加载侧滑页
setTimeout(function() {
menu = mui.preload({
url: "side.html",
id: "side",
styles: {
left: 0,
width: "70%",
zindex: -1
},
show: {
aniShow: "none"
}
});
}, 200);
// 点击左上角图标展示侧滑窗口
document.getElementById("side_menu").addEventListener("tap", function() {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
});
main.addEventListener("maskClick", closeMenu);
});

// 展示侧滑页
function openMenu() {
if(isInTransition) {
return;
}
if(!showMenu) {
// 侧滑菜单处于隐藏状态,则立即显示出来
isInTransition = true;
menu.setStyle({
mask: "rgba(0,0,0,0)"
}); //menu设置透明遮罩防止点击
menu.show("slide-in-left", 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: "rgba(0,0,0,0.4)",
left: "70%",
transition: {
duration: 150
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true;
});
}
}
// 隐藏侧滑页
function closeMenu() {
if(isInTransition) {
return;
}
if(showMenu) {
/*
* 关闭遮罩
* 主窗体开始侧滑
*/
isInTransition = true;
main.setStyle({
mask: "none",
left: "0",
transition: {
duration: 200
}
});
showMenu = false;
// 等动画结束后,隐藏菜单webview,节省资源;
mui.later(function() {
isInTransition = false;
menu.hide("slide-in-right");
}, 300);
}
}
// 添加自定义事件
window.addEventListener("show_name", function(event) {
var name = event.detail.name;
document.querySelector(".mui-content").innerHTML = "传过来的名字是:" + name;
closeMenu();
});
</script>
</body>

</html>
```
然后是侧滑页
```javascript
<!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" />
</head>

<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">侧滑</h1>
</header>
<div class="mui-content">
我是侧滑页
<button type="button" class="mui-btn mui-btn-blue" id="btn_extras">点我传参过去</button>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
document.getElementById("btn_extras").addEventListener("tap", function() {
var main = plus.webview.currentWebview().opener();
mui.fire(main, "show_name", {
name: "小明"
});
});
});
</script>
</body>

</html>
```
请将附件中的文件下载,并加入项目中,真机运行即可看到效果。
0

赞同来自:

提高sideView的zindex。[JSON对象,原生窗口设置参数的对象](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles)
提高sideView的zindex。[JSON对象,原生窗口设置参数的对象](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles)
0

赞同来自:

监听mui-inner-wrap容器的drag事件,阻止冒泡。
```javascript
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
... 显示全部 »
监听mui-inner-wrap容器的drag事件,阻止冒泡。
```javascript
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
offCanvasInner.addEventListener('drag', function(event) {
event.stopPropagation();
});
```
更多...

侧滑菜单,侧滑导航div模式 主界面滚动问题 侧滑菜单

分类: MUI 油炸包子2019-01-27 10:01  评论文章 • 1 个评论 • 1495 次浏览

mui侧滑内容无法选择复制和无法滚动 复制 侧滑 侧滑菜单

分类: MUI 285412937@qq.com2018-07-03 11:05  发表文章 • 0 个评论 • 1005 次浏览

Webview侧滑菜单 Webview 侧滑菜单

分类: MUI 吴达米尔2018-04-26 15:10  发表文章 • 0 个评论 • 1677 次浏览

一个页面中实现多个侧滑菜单的效果 侧滑菜单

分类: MUI lifei_90@sina.com2017-06-21 11:36  发表文章 • 0 个评论 • 1497 次浏览

webview侧滑菜单使用注意事项 zindex 侧滑菜单

分类: MUI amourz2015-06-11 18:15  发表文章 • 0 个评论 • 2848 次浏览

更多...