MUI——页面的创建、显示、关闭
一、打开子页面
mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpage-bottom-position,//子页面底部位置 width:subpage-width,//子页面宽度,默认为100% height:subpage-height,//子页面高度,默认为100% ...... }, extras:{}//额外扩展参数 }] });
子页面相当于在html中使用iframe,所有的浏览器都支持,不依赖h5+api,但是没办法控制创建时隐藏页面,而且显示动画效果只能是"fade-in";
另外,如果子页面已经显示,但是被其它子页面遮盖时,再次显示时,不会有动画效果,解决办法是,先隐藏,然后再显示。
二、打开新页面(非子页面)
mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//新页面顶部位置 bottom:newage-bottom-position,//新页面底部位置 width:newpage-width,//新页面宽度,默认为100% height:newpage-height,//新页面高度,默认为100% ...... }, extras:{ .....//自定义扩展参数,可以用来处理页面间传值 }, createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示 show:{ autoShow:true,//页面loaded事件发生后自动显示,默认为true aniShow:animationType,//页面显示动画,默认为”slide-in-right“; duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; }, waiting:{ autoShow:true,//自动显示等待框,默认为true title:'正在加载...',//等待对话框上显示的提示内容 options:{ width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 ...... } } })
mui框架在打开新页面时等待框的处理逻辑为:
显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;
因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。
三、预加载页面
方式1:
mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制 });
可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败。
方式2:
var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id styles:{},//窗口参数 extras:{}//自定义扩展参数 });
可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用。
最后显示页面:
方式1:plus.webview.show("xx");
方式2:mui.openWindow({id: "xxx"});
使用预加载,在需要显示时立即进行显示,可以节省新页面的创建时间。这两种预加载的方式都依赖h5+api,直接打开浏览器看不到效果,必须在模拟器或真机上调试。
四、使用div的方式模拟页面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/mui.min.css"> <script src="../js/mui.min.js "></script> <script src="../js/mui.view.js "></script> <style> .mui-views, .mui-view, .mui-pages, .mui-page, .mui-page-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; } /* 所有页面默认隐藏 */ .mui-page { display: none; } /* 标题栏高46px,所以主页面顶部向下偏移46px */ .mui-pages { top: 46px; height: auto; } /* 只显示主页面 */ .mui-pages .mui-page { display: block; } /* 页面切换动画(显示和隐藏时都需要) */ .mui-transitioning { -webkit-transition: -webkit-transform 200ms linear; transition: transform 200ms linear; } .mui-page-left { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } </style> </head> <body> <!--页面主结构开始--> <div id="app" class="mui-views"> <div class="mui-view"> <div class="mui-navbar"> </div> <div class="mui-pages"> </div> </div> </div> <!--默认显示的主页面--> <div id="main_page" class="mui-page"> <!--页面标题栏--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">主页面</h1> </div> <!--页面主内容区--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#page1" class="mui-navigate-right">打开页面1</a> </li> <li class="mui-table-view-cell"> <a href="#page2" class="mui-navigate-right">打开页面2</a> </li> <li class="mui-table-view-cell"> <a href="#page3" class="mui-navigate-right">打开页面3</a> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell" style="text-align: center;"> <a id='exit'>退出</a> </li> </ul> </div> </div> </div> </div> <!--页面1--> <div id="page1" class="mui-page"> <!--页面标题栏--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">页面1</h1> </div> <!--页面主内容区--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮3</a> </li> </ul> </div> </div> </div> </div> <!--页面2--> <div id="page2" class="mui-page"> <!--页面标题栏--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">页面2</h1> </div> <!--页面主内容区--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮3</a> </li> </ul> </div> </div> </div> </div> <!--页面3--> <div id="page3" class="mui-page"> <!--页面标题栏--> <div class="mui-navbar-inner mui-bar mui-bar-nav"> <button type="button" class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <span class="mui-icon mui-icon-left-nav"></span> </button> <h1 class="mui-center mui-title">页面3</h1> </div> <!--页面主内容区--> <div class="mui-page-content"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">按钮3</a> </li> </ul> </div> </div> </div> </div> <script> mui.init(); //初始化单页view var viewApi = mui('#app').view({ defaultPage: '#main_page' }); var oldBack = mui.back; mui.back = function() { if (viewApi.canBack()) { //如果view可以后退,则执行view的后退 viewApi.back(); } else { //执行webview后退 oldBack(); } }; </script> </body> </html>
注意这里面的css样式必须要写,否则切换页面会不正常。
五、关闭页面
mui框架将窗口关闭功能封装在mui.back
方法中,具体执行逻辑是:
1)若当前webview为预加载页面,则hide当前webview;
2)否则,close当前webview;
如果我们使用div模拟页面,需要自己响应back方法,处理div显示隐藏:
var viewApi = mui('#app').view({
defaultPage: '#main_page'
});
var oldBack = mui.back;
mui.back = function() {
if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
viewApi.back();
} else { //执行webview后退
oldBack();
}
};