侧滑菜单

34 人关注该话题

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

分类： MUI qq1563204347 2021-09-30 10:35 回复问题 • 4 人关注 • 6 个回复 • 2528 次浏览

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

分类： uni-app / nvue 2***@qq.com 2021-07-11 10:15 回复问题 • 3 人关注 • 2 个回复 • 1744 次浏览

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

分类： uni-app / nvue a***@777.ga 2020-10-09 20:02 回复问题 • 2 人关注 • 1 个回复 • 2145 次浏览

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【报Bug】mui侧滑菜单主页内容用5+播放视频，无法正常侧滑，视频无法移动 视频 侧滑菜单 bug提交 mui

分类： MUI 6***@qq.com 2018-12-24 16:01 发起问题 • 1 人关注 • 0 个回复 • 1048 次浏览

更多...

div模式和webview模式侧滑菜单

4 个回复 • 不感兴趣

请使用自定义事件来实现页面间传值。[自定义事件](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>
```
请将附件中的文件下载，并加入项目中，真机运行即可看到效果。

9 条评论