本節(jié)知識點
- 打開新的頁面
打開新的頁面
打開新的頁面就必須要要用到mui.openwindow這個函數(shù)具體見代碼
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',
// .....//自定義擴展參數(shù)，可以用來處理頁面間傳值
},
show: { //控制打開頁面的類型
autoShow: false, //這里要是配合子頁面的異步加載數(shù)據(jù)就是false，等子頁面加載完數(shù)據(jù)后子頁面控制要是不需要就是true
// //頁面loaded事件發(fā)生后自動顯示，默認為true
aniShow: 'zoom-fade-out', //頁面顯示動畫，默認為”slide-in-right“； 頁面出現(xiàn)的方式 左右上下
duration: '1000' //頁面動畫持續(xù)時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
},
waiting: { // 控制 彈出轉圈框的信息
autoShow: true, //自動顯示等待框，默認為true
title: '加載中...', //等待對話框上顯示的提示內(nèi)容
// options:{
// width:'300px',//等待框背景區(qū)域寬度，默認根據(jù)內(nèi)容自動計算合適寬度
// height:'300px',//等待框背景區(qū)域高度，默認根據(jù)內(nèi)容自動計算合適高度 ......
// }
}
})
- 子頁面 通過異步加載來獲取到數(shù)據(jù)具體見代碼
<script type="text/javascript">
mui.init();
//從服務器獲取數(shù)據(jù) ....
//這里是業(yè)務邏輯
//業(yè)務數(shù)據(jù)獲取完畢，并已插入當前頁面DOM；
//注意：若為ajax請求，則需將如下代碼放在處理完ajax響應數(shù)據(jù)之后；
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',
// .....//自定義擴展參數(shù)，可以用來處理頁面間傳值
},
show: { //控制打開頁面的類型
autoShow: false,
// //頁面loaded事件發(fā)生后自動顯示，默認為true
aniShow: 'zoom-fade-out', //頁面顯示動畫，默認為”slide-in-right“； 頁面出現(xiàn)的方式 左右上下
duration: '1000' //頁面動畫持續(xù)時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
},
waiting: { // 控制 彈出轉圈框的信息
autoShow: true, //自動顯示等待框，默認為true
title: '加載中...', //等待對話框上顯示的提示內(nèi)容
// options:{
// width:'300px',//等待框背景區(qū)域寬度，默認根據(jù)內(nèi)容自動計算合適寬度
// height:'300px',//等待框背景區(qū)域高度，默認根據(jù)內(nèi)容自動計算合適高度 ......
// }
}
})
}
</script>
</body>
</html>
