MUI-開啟新頁面，傳引數，設定展示效果
阿新 • • 發佈：2018-12-28
主頁面中開啟新視窗設定：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet" /> <script src="js/mui.min.js"></script> </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 mui-content-padded"> <button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">按鈕</button> </div> <script type="text/javascript"> mui.init(); var btn_obj = document.getElementById('btn'); btn_obj.addEventListener('tap', function() { //開啟新視窗 mui.openWindow({ url: 'child1.html', //需要開啟頁面的url地址 id: 'child1', //需要開啟頁面的url頁面id styles: { top: '0px', //新頁面頂部位置 bottom: '0px', //新頁面底部位置 // width: "50%", //新頁面寬度，預設為100% // height: "50%", //新頁面高度，預設為100% ...... }, extras: { name: 'lzz', age: '18', //自定義擴充套件引數，可以用來處理頁面間傳值 }, show: { //控制開啟頁面的型別 autoShow: false, //頁面loaded事件發生後自動顯示，預設為true // aniShow: 'slide-in-right', //頁面顯示動畫，預設為”slide-in-right“； 頁面出現的方式 左右上下 // aniShow: 'pop-in', //主頁面跟著一起動 aniShow: 'zoom-fade-out', //目前廣泛使用的方式 duration: '400' //頁面動畫持續時間，Android平臺預設100毫秒，iOS平臺預設200毫秒； }, waiting: { // 控制 彈出轉圈框的資訊 autoShow: true, //自動顯示等待框，預設為true title: '載入中...', //等待對話方塊上顯示的提示內容 options: { width: '100px', //等待框背景區域寬度，預設根據內容自動計算合適寬度 height: '100px', //等待框背景區域高度，預設根據內容自動計算合適高度 ...... } } }); }); </script> </body> </html>
新頁面中接收引數和模擬顯示新頁面
<!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.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"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 1 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 2 </a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> Item 3 </a> </li> </ul> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); // 模擬定時器,模擬5s鍾之後再執行 setTimeout(function() { mui.plusReady(function() { var self = plus.webview.currentWebview(); var name1 = self.name; var age1 = self.age; console.log(name1); console.log(age1); //1,關閉等待框 plus.nativeUI.closeWaiting(); // 開啟等待框 // plus.nativeUI.showWaiting("載入中...");//沒有引數,只顯示雪花圖示 // 2,顯示子頁面內容 self.show("zoom-fade-out", 500) //引數表示以什麼方式顯示 }); }, 5000); </script> </body> </html>