移动端开发框架mui之要打开的页面loaded不自动显示,等服务器返回数据后,再做处理逻辑

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>

原文链接:

https://www.cnblogs.com/beast-king/p/9115568.html

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值