html5 侧滑菜单,侧滑菜单

赞同来自:

请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)

见详细代码如下：

首页

```javascript

请使用自定义事件来实现页面间传值。[自定义事件](http://dev.dcloud.net.cn/mui/event/#customevent)

见详细代码如下：

首页

```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();

});

```

然后是侧滑页

```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: "小明"

});

});

});

```

请将附件中的文件下载，并加入项目中，真机运行即可看到效果。