一、打开子页面

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. Python学习入门基础教程(learning Python)--5.7 Python文件数据记录存储与处理

    本节主要讨论Python下如何通过文件操作实现对数据记录集的存储与处理的操作方法. 在Python里和其他高级语言一样可以通过文件读写将一些记录集写入文件或者通过文件读操作从文件里读取一条或多条和数据 ...

  2. IPC之消息队列详解与使用

    一.    概念 消息队列就是一个消息的链表.对消息队列有写权限的进程可以向其中按照一定的规则添加新消息:对消息队列有读权限的进程可以从消息队列中读出消息.消息队列是随内核持续的.下面介绍三个概念: ...

  3. 如何优雅的设计Redux中的Store

    用了几个月的redux,现在回过来总结一下. 刚开始用的时候遇到一个比较大的疑问,就是如何设计redux的store中的state树,这应该是我在使用redux中最大的一个疑问,阻挡了我前进的脚步,当 ...

  4. jvm工具

    jvm工具 知识,经验是基础,数据是依据,工具是运营知识处理数据的手段 数据:运行日志.异常堆栈.GC日志.线程快照.堆转存储快照 JPS:虚拟机进程状况工具 jvm process status t ...

  5. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  6. Js-Html 前端系列--点击非Div区域隐藏Div

    最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...

  7. 多目标遗传算法 ------ NSGA-II （部分源码解析）介绍

    NSGA(非支配排序遗传算法).NSGA-II(带精英策略的快速非支配排序遗传算法),都是基于遗传算法的多目标优化算法,是基于pareto最优解讨论的多目标优化. 在官网: http://www.ii ...

  8. PWA - 渐进式网络应用初认识

    Progressive Web Apps 简称PWA,是一种接近原生用户体验的渐进增强的web-app.从浏览器演进而来,沉浸式的体验,改进web的性能低下等.是Google 在2015年提出,今年才 ...

  9. css学习笔记1

    :before,:after伪元素 伪元素特性(目前已经遇到的) 它不存在于文档中,所以js无法操作它 它属于主元素本身,有些伪类仅仅是代表元素内容的一部分,譬如:first-letter代表第一个字 ...

  10. Cocos2d-x 3.x事件分发机制总结

    在2.x中处理事件需要用到委托代理(delegate),相信学过2.x的触摸事件的同学,都知道创建和移除的流程十分繁琐.而在3.x中由于加入了C++11的特性,而对事件的分发机制通过事件分发器Even ...