loaded_no_auto_show_home.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.min.css" rel="stylesheet" /> </head> <body> <button type="button" id="btn_open" class="mui-btn mui-btn-green">打开子页</button> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); /*从A页面打开B页面，B页面为一个需要从服务端加载的列表页面， 若在B页面loaded事件发生时就将其显示出来， 因服务器数据尚未加载完毕，列表页面为空，用户体验不好； 可通过如下方式改善用户体验（最好的用户体验应该是通过预加载的方式）： 第一步，B页面loaded事件发生后，不自动显示；* */ document.getElementById("btn_open").addEventListener('tap', function() { //A页面中打开B页面，设置show的autoShow为false，则B页面在其loaded事件发生后，不会自动显示； mui.openWindow({ url: 'loaded_no_auto_show_sub.html', id: 'loaded_no_auto_show_sub', show: { autoShow: false } }); }) </script> </body> </html>
loaded_no_auto_show_sub.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.min.css" rel="stylesheet" /> </head> <body> <div id="div1">我是div1</div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init(); //第二步，在B页面获取列表数据后，再关闭等待框、显示B页面 //B页面onload从服务器获取列表数据； window.onload = function() { var url = 'http://zyz1.top/handler/GetCurrentUser.ashx'; //从服务器获取数据 //业务数据获取完毕，并已插入当前页面DOM； //注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后； mui.get(url, { "cid": '1' }, function(data) { mui.plusReady(function() { document.getElementById("div1").innerText = '你好,' + data.rname; plus.nativeUI.closeWaiting(); //关闭等待框 mui.currentWebview.show(); //显示当前页面 }); }); } </script> </body> </html>