一、打开子页面

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显示隐藏：

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——页面的创建、显示、关闭的更多相关文章

  1. HTML5+和MUI页面操作

    最近总是碰到针对页面的一些操作,以下是针对webview的一些简单方法以及个人理解.更多详尽的内容请参考标准文档:http://www.html5plus.org/doc/zh_cn/webview. ...

  2. 简述在Js或Vue中监听页面的刷新、关闭操作

    1.背景 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.而最近在做项 ...

  3. HTML <hr /> 标签 在页面中创建一条水平线

    一,定义和用法 <hr /> 标签在 HTML 页面中创建一条水平线. 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分. 二,HTML 与 XHTML 之间的 ...

  4. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  5. MUI框架a链接href跳转失效解决方法，解决MUI页面不会滚动的方法

    //解决 所有a标签 导航不能跳转页面 mui('body').on('tap','a',function(){document.location.href=this.href;}); //解决MUI ...

  6. golang 创建一个简单的连接池，减少频繁的创建与关闭

    一.连接池的描述图片如下: 二.连接池代码如下: package main; import ( "time" "sync" "errors" ...

  7. mui 页面滚动解决方案

    默认情况下mui 页面不能滚动,以下为解决方案: 1. mui('.mui-scroll-wrapper').scroll({  deceleration: 0.0005 //flick 减速系数,系 ...

  8. mui 页面传值

    点击第一个页面的标签,跳转到第二个页面,把第一个页面的值也传往目标页面 现在提供两种实现方式 注意:需要在手机运行才可以,用电脑浏览器可能不支持. 第一种方式  页面已创建,通过自定义事件传值 fir ...

  9. shiro 静态页面资源不显示 解决方案（转）

    最近做一个ssm+shiro的框架整和 不加shiro之前ssm中css和图片显示正常.加上以后无法显示. 解决方案: shiro有静态资源过滤. 配置资源匿名访问即可 <property na ...

随机推荐

  1. linux netstat 命令详解

    linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表  接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...

  2. hdu 1671 Phone List（字典树）

    知道bug的时候我眼泪掉下来... 我的第一道字典树,看了字典树的注意事项和实现方式,我写这道题的时候格外认真,就是奔着1A去的.结果这是几A来着? 第一遍写的时候提交MLA,我看了一下,是因为我释放 ...

  3. Java-继承的应用

    class array {  private int[] temp;  private int foot;  public array(int len)   //为temp数组规定大小,并开辟空间,申 ...

  4. 30+WordPress古典风格的主题-古典却不失时尚

    通过WordPress古典风格主题,你可以快速的让你的网站呈现古典情调,并在竞争中脱颖而出.古典风格的网页设计是非常受欢迎的,现在,你可能想知道为什么.很多人被古典风格吸引,他们将一些陈旧的,过时的, ...

  5. 横瓜执导众程序员开展大讨论关于C、JAVA及其它主流IT技术使用情况和优点缺点。

    横瓜执导众程序员开展大讨论关于C.JAVA及其它主流IT技术使用情况和优点缺点. 遥执乾坤(44758121)  18:21:23 mysql据说只能使用一个索引,我这里几乎所有字段都有索引. 但每个 ...

  6. 【转】HTTP Response Header 的 Content-Disposition

    因为听到有同事讨论JSP输出Excel文件的,就是在页面上有一个[导出]按钮,能够将查询结果导出到Excel文件让用户下载.有人说要用POI在后台生成临时的Excel文件,然后通过读取FileStre ...

  7. CCNA网络工程师学习进程（7）路由器的路由配置

        前面一节已经介绍了路由器的端口配置,接着我们介绍路由器的路由配置:静态路由.默认路由和浮动路由的配置:动态路由协议的配置,包括RIP.IGRP.EIGRP和OSPF.     (1)路由器的基 ...

  8. .Net程序员学用Oracle系列(10)：系统函数（下）

    <.Net程序员学用Oracle系列:导航目录> 本文大纲 1.转换函数 1.1.TO_CHAR 1.2.TO_NUMBER 1.3.TO_DATE 1.4.CAST 2.近似值函数 2. ...

  9. 开发团队在TFS中使用Git Repository （一）

    在研发团队中,代码版本管理是最为基础的必要工具.个人使用过的版本管理工具有SVN.VSS.ClearCase.TFS.Git,从团队的角度和使用角度来说,个人倾向于与使用TFS作为团队的基础工具.首先 ...

  10. openstack私有云布署实践【8.2 身份认证keystone的API创建（办公网环境）】

    其中一台controller上面加入环境变量,我选controller1,关注的是endpoint的名称不一样,其它创建的参数与生产环境一致 export OS_TOKEN=venicchina ex ...