本篇博文是继续上篇博文MUI（2）。
上面这幅图是博文MUI（1）中实现的效果，在博文MUI（1）中提到了2个页面，一个页面是index.html，另一个页面是index_list.html页面。上面这幅图中红色框子是index.html页面，蓝色框子是index_list.html页面。两个页面本来是独立的两个页面，但是组合在一起之后就形成了如上面这幅图所示的效果。在一个页面中显示另一个页面。
实现方法很简单，
1 <script type="text/javascript" charset="utf-8"> 2 mui.init({ 3 subpages: [{ id: "index_list", styles: { bottom: '0px' } 10 }] 11 }); 12 </script>
其实index_list.html页面是index.html页面的子页面，官方文档中说：在mobile app开发过程中，经常遇到卡头卡尾的页面，此时若使用局部滚动，在Android手机上会出现滚动不流畅的问题；mui的解决思路是：将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航，底部选项卡等；内容页显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。
官方文档中的这段说明，通俗来说就是将一个页面分解出来，比如把头部导航放在一个页面上，内容部分放到另一个页面上面，然后再将这两个页面结合在一起。上面官方文档说明中提到一个名称webview，关于webview在官方文档中也有说明：UI模块管理应用界面，用于操作加载HTML页面的原生窗口，调用系统原生控件等。由于此模块功能太多，现已根据功能分拆更新为Key、NativeUI、Navigatori等，并对接口和功能做了一些优化调整，请使用新API。模块管理应用窗口界面，实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
如果暂时没有听懂或者不理解什么是webview也没事，写的多了就会慢慢理解了，多写多思考。
a.html页面中显示b.html页面，那么在a.html页面中这么写即可：
1 mui.init({ 2 subpages:[{ id:your-subpage-id, styles:{ bottom:subpage-bottom-position,width:subpage-width,height:subpage-height, ...... 11 }, }] 14 });
首先如上面这串代码所示，url处写b页面地址，id自己定义，默认为b页面url，下面的styles是b页面在a页面中显示的样式，比如b页面显示在a页面距离顶部导航栏45px处等等。extras是扩展参数，用不到可以不写。按照这个格式可以实现在a页面中显示b页面。
头部导航栏是header，底部选项卡是nav，例如头部导航栏举例：
首页
这幅图是博文MUI（2）中实现的效果，博文MUI（2）在博文MUI（1）的基础之上又添加了一个页面策划菜单页面index_menu.html页面，这幅图红色框是index.html页面，绿色框是index_menu.html页面。而在绿色框的右侧外围红色框的右侧这部分区域是遮罩，博文MUI（2）中提到的遮罩效果。
侧滑导航这个页面是侧滑导航页面，是单独的一个页面，作为侧滑页面出现。关闭这个侧滑菜单的方式：1.点击这个侧滑菜单页面之外的任意位置；2.点击下面这个红色按钮；3.Android手机按back键;4.Android手机按menu键。 关闭侧滑菜单
因为苹果手机不具备安卓手机的返回按键和菜单按键，所以需要设置当在苹果手机上面运行时隐藏上面代码中的第3点和第4点，需要单独设置样式和js代码进行判断并作出相应措施。
<span>；3.Android手机按back键;4.Android手机按menu键</span>
相应的js代码：
aniShow = null; (!mui.os.android) { 5 var span = document.getElementById("android-only"); 6 if(span) { 7 span.style.display = "none"; 8 } }
如果不是安卓手机平台那么作出相应措施，其实这些细节就需要我们程序员机制的机制咯。小编没有苹果手机，所以没有做苹果手机的测试。
close() { 3 mui.fire(mui.currentWebview.opener(), "menu:close"); 4 } document.getElementById("close-btn").addEventListener('tap', close); window.addEventListener('dragstart', function(e) { mui.gestures.touch.startDirection = e.detail.direction; 11 }); 12 window.addEventListener('swipe', function(e) { 13 if(!mui.isScrolling) { 14 e.detail.gesture.preventDefault(); 15 } 16 }); window.addEventListener('swipeleft', function(e) { 19 if(Math.abs(e.detail.angle) > 170) { 20 close(); 21 } 22 });
侧滑菜单页面中有一个按钮，其id为close-btn，对这个id进行监听，如果单击这个按钮，那么执行关闭侧滑菜单命令。
function close() {mui.fire(mui.currentWebview.opener(), "menu:close");}
关于这行代码乍一看平淡无奇，但是仔细观察：mui.fire官方文档中这样说明：通过mui.fire()方法可触发目标窗口的自定义事件，格式为：.fire(target, event, data)
target Type:WebviewObject需要传值的目标webview；event Type;String自定义事件名称；data Type:JSONjson格式的数据。
官方文档在这一块还有一个温馨提示：
若新创建一个webview，不等该webview的loaded事件发生，就立即使用webview.evalJS()或mui.fire(webview,'eventName',{})，则可能无效；
相关文章
精彩导读
热门资讯
关注我们
