一、打开子页面

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. ACE 容器之三 ACE_Unbounded_Queue的使用

    以下代码演示了如何在ACE_Unbounded_Queue这个队列容器中存储具体的数据元素和数据元素的指针. // ACEqueue.cpp : Defines the entry point for ...

  2. TCP中ECN的工作原理分析二（摘自：RFC3168）

    英文源:http://www.icir.org/floyd/ecn.html 发送端和接收端处理: The TCP Sender For a TCP connection using ECN, new ...

  3. Visual Studio属性配置中使用宏

    在学习C语言的时候,我们曾经遇到过一个宏的概念.宏的作用机理本质上是宏的展开,C语言中的宏的用法也有很多种(水其实很深...),不过从感觉上来讲,人们大致上会在以下的场景中,利用宏来解决一些窘境:一是 ...

  4. 使用MFC CImage类绘制PNG图片时遇到的问题

    为了测试CImage绘制PNG图片的效果,我们用截图软件截得一张360的界面,然后使用PhotoShop等工具在图片的周边加上了透明的区域,然后保存成PNG图片文件.CImage首先从文件中加载,即 ...

  5. 《微信小程序七日谈》- 第五天：你可能要在登录功能上花费大力气

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

  6. 【Java每日一题】20170112

    20170111问题解析请点击今日问题下方的"[Java每日一题]20170112"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  7. 【转】【WebService】.NET C# 创建WebService服务

    Web service是一个基于可编程的web的应用程序,用于开发分布式的互操作的应用程序,也是一种web服务 WebService的特性有以下几点: 1.使用XML(标准通用标记语言)来作为数据交互 ...

  8. Android 消息传递之Bundle的使用——实现object对象传输（二）

    上面学习了线程通过Massage发送字符串消息,Handler接收字符串消息,这样的形式来更新ui,接下来,一起分享怎么把一个对象利用消息机制发送出去,让主线程接收来更新ui. 下面就利用一个服务Se ...

  9. cache数据库学习周结

    学习cache数据库只有两周,下面说一下对这一数据库的理解吧.不一定对 cache数据库最大的特点是global: global就像全区变量一样,是一个广义的全局变量.数据库表中的一些重要的字段名以字 ...

  10. IOS之frame和bounds区别

    用最简单的语言来解释就是:setFrame和setBounds都是为了把子view加载到父view上去,但设置的参数坐标系不同,setFrame是该view在父view坐标系统中的位置和大小,setB ...