一、打开子页面

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();
}
};

最新文章

  1. 二叉树的递归实现(java)
  2. SparkSQL项目中的应用
  3. iOS 沙盒路径操作:新建/删除文件和文件夹
  4. 巧妙的Jq仿QQ游戏导航界面学习
  5. 糟糠之妻下堂,娇俏公主上位——更换宝马三系座椅作业 - 切诺基 Jeep家族 越野e族论坛 越野/SUV/旅行/赛事/改装/互动中心
  6. 微信小程序xml解析
  7. IOS 使用 ZbarSDK 二维码扫描
  8. BZOJ3709 Bohater 贪心
  9. AX2012 ERP Excel报表方案
  10. 对象名 &#39;dbo.__MigrationHistory&#39; 无效 错误解决
  11. webpack 4.0配置
  12. 关于整数溢出和NaN的问题
  13. 如何利用sqoop将hive数据导入导出数据到mysql
  14. Codeforces 1092E Minimal Diameter Forest
  15. JavaScript实现单张图片上传功能
  16. SQL记录-rowid去重
  17. java.io.BufferedInputStream 源码分析
  18. FE英文缩写
  19. 如何在 OS X 中安装 ruby
  20. Alpha 冲刺 —— 十分之八

热门文章

  1. 典型的团队VS优秀团队
  2. Windows核心编程学习九:利用内核对象进行线程同步
  3. aix 禁止root远程登录
  4. C++中#和##的特殊使用
  5. Ruby设计模式透析之 —— 组合(Composite)
  6. Java重写与重载之间的区别
  7. CSS3的radial-gradient(径向渐变)
  8. qtCreator 快捷键
  9. @Transactional问题记录下
  10. [Q]打印机页边距设置