Mui实现webview侧滑模块
<!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 type="text/css">
/* 解决滑动警告问题:Unable to preventDefault inside passive event listener */
* { touch-action: pan-y; }
</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">标题</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>
</body>
<script src="js/mui.min.js"></script>
<script>
var main,menu, mask = mui.createMask(_closeMenu);
var showMenu = false,mode = 'menu-move';
// var 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,
beforeback: 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();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'test',
url: 'test.html',
styles: {
left: 0,
width: '70%',
zindex: 9997
}
});
},300);
//页面底部切换处理
});
/**
* 显示菜单菜单
*/
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 () {
_closeMenu();
//关闭遮罩
mask.close();
}
/**
* 关闭侧滑菜单（业务部分）
*/
function _closeMenu() {
if (showMenu) {
//关闭遮罩；
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;
}
}
//点击左上角图标，打开侧滑菜单；
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>
</html>
手机上的运行效果：
参考：Mui官网
