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

最新推荐文章于 2022-03-23 10:09:05 发布

最爱春暖花开

最新推荐文章于 2022-03-23 10:09:05 发布

阅读量1.3k

点赞数

转载专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、打开子页面

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>

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

五、关闭页面

mui框架将窗口关闭功能封装在mui.back方法中，具体执行逻辑是：
　　1）若当前webview为预加载页面，则hide当前webview；
　　2）否则，close当前webview；
如果我们使用div模拟页面，需要自己响应back方法，处理div显示隐藏：

最爱春暖花开

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
MUI——页面的创建、显示、关闭

一、打开子页面mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpa
复制链接

扫一扫