MUI——页面的创建显示关闭
Posted DC
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的方式模拟页面
<!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();
}
};
以上是关于MUI——页面的创建显示关闭的主要内容，如果未能解决你的问题，请参考以下文章