YH开发笔记 MUI使用二
YH开发笔记
MUI使用二
撰写于2016-12-27
MUI侧滑菜单使用
先废话几句
-
现在对MUI真是又爱又恨，这个框架在目前的我看来开发小型App是完全足够的，开发快，入手简单，学习曲线平滑。但是遇到大的项目，够呛！
-
废话不多说。现在上荤菜。现在很多app都会使用侧滑菜单进行更多功能的定制。侧滑菜单里面的内容一般为个人中心的内容，比如QQ，当然还有其他强势的app不用，比如微信，知乎...。好啦好啦，我知道我废话多，但是平时我一般不说话，现在就不能让我多BB几句嘛！
-
下面进行构建一个简单的侧滑菜单demo进行侧滑菜单的demo学习。
-
创建一个名为 CeHuaApp 的移动app 具体细节不多说
app结构图
先按照一个开发app的思路来建设
- 创建首页index.html（首页） menu.html（菜单页面） s1.html s2.html s3.html (三个子页面)页面进行页面绘制
index.html
构建一个标题栏和下方切换菜单
<header class="mui-bar mui-bar-nav">
<span id="showBtn" class="mui-icon mui-icon-bars"></span>
<h1 id="title" class="mui-title">1</h1>
</header>
<div class="mui-content">
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="s1.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">1</span>
</a>
<a class="mui-tab-item" href="s2.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">2</span>
</a>
<a class="mui-tab-item" href="s3.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">3</span>
</a>
</nav>
</div>
然后就是滑出的菜单页面menu.html
就是添加一个按钮 处理菜单关闭事件的
<div class="mui-content">
<button id="closeBtn" type="button" class="mui-btn mui-btn-blue mui-btn-block">关闭侧滑</button>
</div>
接下来几个子页面 s1.html s2.html s3.html
几个都一样 识别一下而已
<div class="mui-content">
<p>第一个页面</p>
</div>
- 再看js处理 首先看index.html
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var menu = null;
var main = null;
var showMenu = false;
mui.init();
var subpages = ['s1.html', 's2.html', 's3.html'];
var subpages_style = {
top: '45px',
bottom: '51px'
};
var anishow = {};
//创建子页面
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for(var i = 0; i < subpages.length; i++) {
var temp = {};
var sub = plus.webview.create(subpages[i], subpages[i], subpages_style);
if(i > 0) {
sub.hide();
} else {
temp[subpages[i]] = 'true';
mui.extend(anishow, temp);
}
self.append(sub);
}
plus.screen.lockOrientation("portrait-primary"); //锁定竖屏正方向
main = plus.webview.currentWebview();
main.addEventListener('maskClick',closeMenu);
//处理侧滑
setTimeout(function(){
menu = mui.preload({
id:'menu',
url:'menu.html',
styles:{
left:0,
width:'70%',
zindx:-1,
bounce:'vertical'
},
show:{
duration:1000
}
})
},200)
});
//当前激活项
var activeTab = subpages[0];
var title = document.getElementById("title");
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
} else {
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
if(mui.os.ios || anishow[targetTab]) {
plus.webview.show(targetTab);
} else {
var temp = {};
temp[targetTab] = 'true';
mui.extend(anishow, temp);
plus.webview.show(targetTab, 'fade-in', '300');
}
plus.webview.hide(activeTab);
activeTab = targetTab;
}
})
var isInTranstion = false;
/**
* 显示侧滑菜单
*/
function openMenu(){
if (isInTranstion) {
return;
}
if (!showMenu) {
isInTranstion =true;
menu.setStyle({
mask:'rgba(0,0,0,0)',
});
}
menu.show('none',0,function(){
main.setStyle({
mask:'rgba(0,0,0,0.4)',
left:'70%',
transition:{
duration:300
}
});
mui.later(function(){
isInTranstion = false;
menu.setStyle({
mask:'none'
})
},160)
showMenu = true;
})
}
/**
*关闭侧滑菜单 业务
*/
function _closeMenu(){
if (isInTranstion) {
return;
}
if (showMenu) {
isInTranstion = true;
main.setStyle({
mask:'none',
left:'0',
transition:{
duration:200
}
});
showMenu = false;
mui.later(function(){
isInTranstion = false;
menu.hide();
},200)
}
}
/**
*关闭菜单
*/
function closeMenu(){
_closeMenu();
}
//打开侧滑菜单 左上角按钮
document.getElementById("showBtn").addEventListener('tap',function(){
openMenu();
})
//主界面向右滑动 打开侧滑菜单
window.addEventListener('swiperight',function(){
console.log("主界面右滑动");
closeMenu();
})
//主界面左滑动 若已经打开侧滑 则关闭
window.addEventListener('swipeleft',function(){
console.log("主界面左滑动");
closeMenu();
})
//侧滑菜单出发关闭打开菜单命令
window.addEventListener('menu:close',closeMenu);
window.addEventListener("menu:open",openMenu);
</script>
敲黑板 注意了！
这个里面是首先在mui.plusredy里面对侧滑页面menu进行了预加载的，同时，获取menu.html窗体对象给开始定义的menu，然后对menu进行操作，设置width zindex bounce 。其中 zindex的值要小于0，为什么呢，当你创建的时候子页面的zindex一般都是0，除非你创建子页面的时候去进行设置了的。这点可以参见社区里面的说法。然后就是index.html窗体对象给main，同上，设定main的属性。然后就是打开侧滑和关闭侧滑的业务了。注意哦，你要实现在展开侧滑后，右边的蒙版区域进行点击关闭就得在main获取到主窗体对象后进行makclick事件监听，这个是对你在menu和main里进行的蒙版进行的蒙版区域的点击事件监听。
下面看menu.html的js处理。
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
})
function closeMenu (){
mui.fire(main,'menu:close')
}
window.addEventListener('swipeleft',closeMenu);
document.getElementById("closeBtn").addEventListener('tap')
mui.menu = closeMenu;
</script>
这里面主要是获取一个主窗体对象，然后好使用MUI的自定义事件来得到index.html 里面的关闭侧滑业务部事件
在看子页面里面的js处理，其实里面什么都不写，引入一个官方的js文件即可。slidermenu.js。
敲黑板！！！必须要引入slidermenu.js，没引入这个，你在子页面左滑是不可能调用打开侧滑菜单事件的！
以上全部就是了。
哦对了，还有。你们肯定要问对蒙版区域进行左滑监听想怎么做？我也不知道，我慢慢找方法，不过，貌似是官方没有给接口，若有大神知道，希望告知小弟！
另，本文若有不合理之处，望指出。
浙公网安备 33010602011771号