本節(jié)知識(shí)點(diǎn)
- 打開新的頁(yè)面
打開新的頁(yè)面
打開新的頁(yè)面就必須要要用到mui.openwindow這個(gè)函數(shù)具體見代碼
mui.openWindow({
url: 'open.html', //需要打開頁(yè)面的url地址
id: 'open', //需要打開頁(yè)面的url頁(yè)面id
styles: {
top: '0px', //新頁(yè)面頂部位置 要是新的頁(yè)面有導(dǎo)航就是0要是沒(méi)有就是44px
bottom: '0px', //新頁(yè)面底部位置 要是新的頁(yè)面有導(dǎo)航就是0要是沒(méi)有就是50px
// width:newpage-width,//新頁(yè)面寬度含鳞，默認(rèn)為100%
// height:newpage-height,//新頁(yè)面高度扮授，默認(rèn)為100% ......
},
extras: {
name: 'aries',
age: '18',
// .....//自定義擴(kuò)展參數(shù)，可以用來(lái)處理頁(yè)面間傳值
},
show: { //控制打開頁(yè)面的類型
autoShow: false, //這里要是配合子頁(yè)面的異步加載數(shù)據(jù)就是false拴竹，等子頁(yè)面加載完數(shù)據(jù)后子頁(yè)面控制要是不需要就是true
// //頁(yè)面loaded事件發(fā)生后自動(dòng)顯示，默認(rèn)為true
aniShow: 'zoom-fade-out', //頁(yè)面顯示動(dòng)畫画饥，默認(rèn)為”slide-in-right“蚂斤； 頁(yè)面出現(xiàn)的方式 左右上下
duration: '1000' //頁(yè)面動(dòng)畫持續(xù)時(shí)間，Android平臺(tái)默認(rèn)100毫秒畔派，iOS平臺(tái)默認(rèn)200毫秒铅碍；
},
waiting: { // 控制 彈出轉(zhuǎn)圈框的信息
autoShow: true, //自動(dòng)顯示等待框，默認(rèn)為true
title: '加載中...', //等待對(duì)話框上顯示的提示內(nèi)容
// options:{
// width:'300px',//等待框背景區(qū)域?qū)挾认咭J(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適寬度
// height:'300px',//等待框背景區(qū)域高度胞谈，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適高度 ......
// }
}
})
- 子頁(yè)面 通過(guò)異步加載來(lái)獲取到數(shù)據(jù)具體見代碼
<script type="text/javascript">
mui.init();
//從服務(wù)器獲取數(shù)據(jù) ....
//這里是業(yè)務(wù)邏輯
//業(yè)務(wù)數(shù)據(jù)獲取完畢，并已插入當(dāng)前頁(yè)面DOM憨愉；
//注意：若為ajax請(qǐng)求烦绳，則需將如下代碼放在處理完ajax響應(yīng)數(shù)據(jù)之后；
mui.plusReady(function() {
//模擬異步加載
setTimeout(function(){
//關(guān)閉等待框
plus.nativeUI.closeWaiting();
//顯示當(dāng)前頁(yè)面
mui.currentWebview.show();
},3000)
});
</script>
父元素全部代碼配紫，點(diǎn)擊按鈕就能打開
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>打開新的頁(yè)面</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">打開新的頁(yè)面</h1>
</header>
<div class="mui-content">
<button class="mui-button-row" id="btn1">點(diǎn)擊我打開新的頁(yè)面</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', //需要打開頁(yè)面的url地址
id: 'open', //需要打開頁(yè)面的url頁(yè)面id
styles: {
top: '0px', //新頁(yè)面頂部位置 要是新的頁(yè)面有導(dǎo)航就是0要是沒(méi)有就是44px
bottom: '0px', //新頁(yè)面底部位置 要是新的頁(yè)面有導(dǎo)航就是0要是沒(méi)有就是50px
// width:newpage-width,//新頁(yè)面寬度径密，默認(rèn)為100%
// height:newpage-height,//新頁(yè)面高度，默認(rèn)為100% ......
},
extras: {
name: 'aries',
age: '18',
// .....//自定義擴(kuò)展參數(shù)笨蚁，可以用來(lái)處理頁(yè)面間傳值
},
show: { //控制打開頁(yè)面的類型
autoShow: false,
// //頁(yè)面loaded事件發(fā)生后自動(dòng)顯示睹晒，默認(rèn)為true
aniShow: 'zoom-fade-out', //頁(yè)面顯示動(dòng)畫，默認(rèn)為”slide-in-right“括细； 頁(yè)面出現(xiàn)的方式 左右上下
duration: '1000' //頁(yè)面動(dòng)畫持續(xù)時(shí)間伪很，Android平臺(tái)默認(rèn)100毫秒，iOS平臺(tái)默認(rèn)200毫秒奋单；
},
waiting: { // 控制 彈出轉(zhuǎn)圈框的信息
autoShow: true, //自動(dòng)顯示等待框锉试，默認(rèn)為true
title: '加載中...', //等待對(duì)話框上顯示的提示內(nèi)容
// options:{
// width:'300px',//等待框背景區(qū)域?qū)挾龋J(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適寬度
// height:'300px',//等待框背景區(qū)域高度览濒，默認(rèn)根據(jù)內(nèi)容自動(dòng)計(jì)算合適高度 ......
// }
}
})
}
</script>
</body>
</html>
