首页 > 代码库 > MUI——页面的创建、显示、关闭

MUI——页面的创建、显示、关闭

一、打开子页面

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度,默认为100%
        height:subpage-height,//子页面高度,默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

  子页面相当于在html中使用iframe,所有的浏览器都支持,不依赖h5+api,但是没办法控制创建时隐藏页面,而且显示动画效果只能是"fade-in";

  另外,如果子页面已经显示,但是被其它子页面遮盖时,再次显示时,不会有动画效果,解决办法是,先隐藏,然后再显示。

二、打开新页面(非子页面)

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度,默认为100%
      height:newpage-height,//新页面高度,默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数,可以用来处理页面间传值
    },
    createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示,默认为true
      aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
      duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
    },
    waiting:{
      autoShow:true,//自动显示等待框,默认为true
      title:‘正在加载...‘,//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
        ......
      }
    }
})

mui框架在打开新页面时等待框的处理逻辑为:

  显示等待框-->创建目标页面webview-->目标页面loaded事件发生-->关闭等待框;

因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。

三、预加载页面

方式1:

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

  可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败。

方式2:

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

  可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用。

最后显示页面:

方式1:plus.webview.show("xx");
方式2:mui.openWindow({id: "xxx"});

  使用预加载,在需要显示时立即进行显示,可以节省新页面的创建时间。这两种预加载的方式都依赖h5+api,直接打开浏览器看不到效果,必须在模拟器或真机上调试。 

四、使用div的方式模拟页面

技术分享
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" href="../css/mui.min.css">
        <script src="../js/mui.min.js "></script>
        <script src="../js/mui.view.js "></script>
        
        <style>
            .mui-views,
            .mui-view,
            .mui-pages,
            .mui-page,
            .mui-page-content {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
            }
            
            /* 所有页面默认隐藏 */
            .mui-page {
                display: none;
            }
            
            /* 标题栏高46px,所以主页面顶部向下偏移46px */
            .mui-pages {
                top: 46px;
                height: auto;
            }
            
            /* 只显示主页面 */
            .mui-pages .mui-page {
                display: block;
            }
            
            /* 页面切换动画(显示和隐藏时都需要) */
            .mui-transitioning {
                -webkit-transition: -webkit-transform 200ms linear;
                transition: transform 200ms linear;
            }
            .mui-page-left {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
        </style>
        
    </head>
    <body>
        
        <!--页面主结构开始-->
        <div id="app" class="mui-views">
            <div class="mui-view">
                <div class="mui-navbar">
                </div>
                <div class="mui-pages">
                </div>
            </div>
        </div>
        
        <!--默认显示的主页面-->
        <div id="main_page" class="mui-page">
            <!--页面标题栏-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">主页面</h1>
            </div>
            <!--页面主内容区-->
            <div class="mui-page-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view mui-table-view-chevron">
                            <li class="mui-table-view-cell">
                                <a href="#page1" class="mui-navigate-right">打开页面1</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a href="#page2" class="mui-navigate-right">打开页面2</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a href="#page3" class="mui-navigate-right">打开页面3</a>
                            </li>
                        </ul>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" style="text-align: center;">
                                <a id=‘exit‘>退出</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!--页面1-->
        <div id="page1" class="mui-page">
            <!--页面标题栏-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">页面1</h1>
            </div>
            <!--页面主内容区-->
            <div class="mui-page-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view mui-table-view-chevron">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮1</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮2</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--页面2-->
        <div id="page2" class="mui-page">
            <!--页面标题栏-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">页面2</h1>
            </div>
            <!--页面主内容区-->
            <div class="mui-page-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view mui-table-view-chevron">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮1</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮2</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--页面3-->
        <div id="page3" class="mui-page">
            <!--页面标题栏-->
            <div class="mui-navbar-inner mui-bar mui-bar-nav">
                <button type="button" class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span class="mui-icon mui-icon-left-nav"></span>
                </button>
                <h1 class="mui-center mui-title">页面3</h1>
            </div>
            <!--页面主内容区-->
            <div class="mui-page-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view mui-table-view-chevron">
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮1</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮2</a>
                            </li>
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right">按钮3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            mui.init();
             //初始化单页view
            var viewApi = mui(#app).view({
                defaultPage: #main_page
            });
            
            var oldBack = mui.back;
            mui.back = function() {
                if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
                    viewApi.back();
                } else { //执行webview后退
                    oldBack();
                }
            };
        </script>
    </body>
</html>
View Code

  注意这里面的css样式必须要写,否则切换页面会不正常。

五、关闭页面

mui框架将窗口关闭功能封装在mui.back方法中,具体执行逻辑是:

  1)若当前webview为预加载页面,则hide当前webview;

  2)否则,close当前webview;

如果我们使用div模拟页面,需要自己响应back方法,处理div显示隐藏:

var viewApi = mui(‘#app‘).view({
    defaultPage: ‘#main_page‘
});

var oldBack = mui.back;
mui.back = function() {
    if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
        viewApi.back();
    } else { //执行webview后退
        oldBack();
    }
};

 

MUI——页面的创建、显示、关闭