本节知识点
- 打开新的页面
打开新的页面
打开新的页面就必须要要用到mui.openwindow这个函数具体见代码
mui.openWindow({
url: 'open.html', //需要打开页面的url地址
id: 'open', //需要打开页面的url页面id
styles: {
top: '0px', //新页面顶部位置 要是新的页面有导航就是0要是没有就是44px
bottom: '0px', //新页面底部位置 要是新的页面有导航就是0要是没有就是50px
// width:newpage-width,//新页面宽度，默认为100%
// height:newpage-height,//新页面高度，默认为100% ......
},
extras: {
name: 'aries',
age: '18',
// .....//自定义扩展参数，可以用来处理页面间传值
},
show: { //控制打开页面的类型
autoShow: false, //这里要是配合子页面的异步加载数据就是false，等子页面加载完数据后子页面控制要是不需要就是true
// //页面loaded事件发生后自动显示，默认为true
aniShow: 'zoom-fade-out', //页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下
duration: '1000' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: { // 控制 弹出转圈框的信息
autoShow: true, //自动显示等待框，默认为true
title: '加载中...', //等待对话框上显示的提示内容
// options:{
// width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度
// height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ......
// }
}
})
- 子页面 通过异步加载来获取到数据具体见代码
<script type="text/javascript">
mui.init();
//从服务器获取数据 ....
//这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function() {
//模拟异步加载
setTimeout(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
},3000)
});
</script>
父元素全部代码，点击按钮就能打开
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>打开新的页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<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>
<div class="mui-content">
<button class="mui-button-row" id="btn1">点击我打开新的页面</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
var btn = document.querySelector("#btn1");
btn.addEventListener("tap", openpage);
function openpage() {
mui.openWindow({
url: 'open.html', //需要打开页面的url地址
id: 'open', //需要打开页面的url页面id
styles: {
top: '0px', //新页面顶部位置 要是新的页面有导航就是0要是没有就是44px
bottom: '0px', //新页面底部位置 要是新的页面有导航就是0要是没有就是50px
// width:newpage-width,//新页面宽度，默认为100%
// height:newpage-height,//新页面高度，默认为100% ......
},
extras: {
name: 'aries',
age: '18',
// .....//自定义扩展参数，可以用来处理页面间传值
},
show: { //控制打开页面的类型
autoShow: false,
// //页面loaded事件发生后自动显示，默认为true
aniShow: 'zoom-fade-out', //页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下
duration: '1000' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: { // 控制 弹出转圈框的信息
autoShow: true, //自动显示等待框，默认为true
title: '加载中...', //等待对话框上显示的提示内容
// options:{
// width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度
// height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ......
// }
}
})
}
</script>
</body>
</html>
作者：我拥抱着我的未来
链接：https://www.jianshu.com/p/f11b3290b8f5
來源：简书