YH开发笔记 MUI使用二

YH开发笔记

---

MUI使用二

撰写于2016-12-27

MUI侧滑菜单使用

先废话几句

• 现在对MUI真是又爱又恨，这个框架在目前的我看来开发小型App是完全足够的，开发快，入手简单，学习曲线平滑。但是遇到大的项目，够呛！

• 废话不多说。现在上荤菜。现在很多app都会使用侧滑菜单进行更多功能的定制。侧滑菜单里面的内容一般为个人中心的内容，比如QQ，当然还有其他强势的app不用，比如微信，知乎...。好啦好啦，我知道我废话多，但是平时我一般不说话，现在就不能让我多BB几句嘛！

• 下面进行构建一个简单的侧滑菜单demo进行侧滑菜单的demo学习。

• 创建一个名为 CeHuaApp 的移动app 具体细节不多说

app结构图

先按照一个开发app的思路来建设

1. 创建首页index.html（首页） menu.html（菜单页面） s1.html s2.html s3.html (三个子页面)页面进行页面绘制

index.html
构建一个标题栏和下方切换菜单

1

1



2



3

然后就是滑出的菜单页面menu.html
就是添加一个按钮 处理菜单关闭事件的

关闭侧滑

接下来几个子页面 s1.html s2.html s3.html
几个都一样 识别一下而已

第一个页面

• 再看js处理 首先看index.html

敲黑板 注意了！
这个里面是首先在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处理。

这里面主要是获取一个主窗体对象，然后好使用MUI的自定义事件来得到index.html 里面的关闭侧滑业务部事件
在看子页面里面的js处理，其实里面什么都不写，引入一个官方的js文件即可。slidermenu.js。
敲黑板！！！必须要引入slidermenu.js，没引入这个，你在子页面左滑是不可能调用打开侧滑菜单事件的！
以上全部就是了。
哦对了，还有。你们肯定要问对蒙版区域进行左滑监听想怎么做？我也不知道，我慢慢找方法，不过，貌似是官方没有给接口，若有大神知道，希望告知小弟！
另，本文若有不合理之处，望指出。