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

时间：2016-11-12 19:35:03 阅读：426 评论：0 收藏：0 [点我收藏+]

标签：web als extras 页面 vba content set styles 初始化

一、打开子页面

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——页面的创建、显示、关闭

标签：web als extras 页面 vba content set styles 初始化

原文地址：http://www.cnblogs.com/dongc/p/6050668.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行