HBuilder mui 关闭页面

    
    mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：若当前webview为预加载页面，则hide当前webview；否则，close当前webview；...

mui框架中,有三种操作会触发页面关闭(执行mui.back方法):

1)点击包含mui-action-back类的控件

2)在页面上向右快速滑动

3)Android手机按下back按键

Hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因是该返回箭头类中包含有mui-action-back类,示例如下 :

<header class="mui-bar mui-bar-nav">

   <a class= "mui-action-back mui-icon mui-icon-left-nav mui-pull-left"> </a>

<h1 class="mui-title">标题</h1>

</header>

如果想在其他控件上添加关闭页面,只需要在控件上添加mui-action-back类就可以,如下示例:

<button type="button" class="mui-btn mui-btn mui-btn-danger mui-action-back">关闭</button>

mui框架封装的页面右滑关闭默认为未启用,如要启用需要在mui.init();方法中设置swipeBack参数,如下:

mui.init(

    swipeBack:true//启用右滑关闭功能

);

mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑； 若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听；mui.init({keyEventBind: {backbutton: false //关闭back按键监听}});除了如上三种操作外，也可以直接调用mui.back()方法，执行窗口关闭逻辑；mui.back()仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为：

• 执行beforeback参数对应的函数若返回false，则不再执行mui.back()方法；
• 否则（返回true或无返回值），继续执行mui.back()方法；

示例：从列表打开详情页面，从详情页面再返回后希望刷新列表界面，此时可注册beforeback参数，然后通过自定义事件通知列表页面刷新数据，示例代码如下：mui.init({beforeback: function(){//获得列表界面的webviewvar list = plus.webview.getWebviewById("list");//触发列表界面的自定义事件（refresh）,从而进行数据刷新mui.fire(list,"refresh");//返回true，继续页面关闭逻辑return true;}});注意：beforeback的执行返回必须是同步的（阻塞模式），若使用nativeUI这种异步js（非阻塞模式），则可能会出现意想不到的结果；比如：通过plus.nativeUI.confirm()弹出确认框，可能用户尚未选择，页面已经返回了（beforeback同步执行完毕，无返回值，继续执行mui.back()方法，nativeUI不会阻塞js进程）：在这种情况下，若要自定义业务逻辑，就需要复写mui.back方法了；如下为一个自定义示例，每次都需要用户确认后，才会关闭当前页面//备份mui.back，mui.back已将窗口关闭逻辑封装的比较完善（预加载及父子窗口），因此最好复用mui.backvar old_back = mui.back;mui.back = function(){ var btn = ["确定","取消"]; mui.confirm("确认关闭当前窗口？","Hello MUI",btn,function(e){ if(e.index==0){ //执行mui封装好的窗口关闭逻辑； old_back(); } });}注意：自定义关闭逻辑时，一定要重写mui.back，不能简单通过addEventListener增加back按键监听， 因为addEventListener只会增加新的执行逻辑，老的监听逻辑依然会执行；
阅读更多