一、打开子页面

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学习之samba安装问题详解

    一.首先查看是否安装samba,命令为:rpm -qa | grep samba 出现如下包表示已经安装,否则没有安装 samba-winbind-clients-3.5.10-125.el6.i68 ...

  2. Magnum Kuernetes源码分析(二)

    Kubernetes Master Stack kubernetes master的stack的resources主要分为三个部分. master wait handle wait handle主要用 ...

  3. Android替换APP字体 — Typeface

    Android替换APP字体 — Typeface APP字体的思路一般都会想到自定义控件(TextView.EditView),但是项目中会有很多种控件,就算用也会承担一些风险和资源的消耗,主要是这 ...

  4. es6 Module

    前言: 这是阮一峰老师的ECMA6入门module一章的缩减,只抽取了我在项目中有用到的内容.带着问题去看老师的教程.感觉吸收更快,也明白了偶尔遇到的export不出来的问题. es6模块设计思想: ...

  5. oracle表空间表分区详解及oracle表分区查询使用方法(转+整理)

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  6. OC之知识储备篇

    1. Objective-C是基于C语言的. a. 在C语言的基础之上新增了面向对象的语法. b. 将C语言中复杂的.繁琐的语法封装的更为简单. 2. Objective-C程序的源文件的后缀名.m  ...

  7. Hibernate介绍和入门案例

    一身转战三千里,一剑曾当百万师 如果你在之前没有学过SSH三大框架,那么你之前肯定是通过JDBC来对数据库进行操作.现在,你完全可以把跟数据库交互的操作直接交给Hibernate. Hibernate ...

  8. jsp-1 简单的应用servlet，并用其跳转页面

    jspweb里面用到的servlet跳转页面的方法 使用的jar包只有 commons-lang3-3.5.jar 运行时,tomcat会先根据web.xml里面的信息,查找servlet <? ...

  9. Appium同时运行多个设备

    为了提高测试效率,测试需要同时在多个android设备上运行,就需要启动多个appium. 启动appium时,为每个设备设置不同的端口号,并为driver设置该设备的udid.见如下实例,关键是红色 ...

  10. D3.js：动态效果

    D3 提供了 4 个方法用于实现图形的过渡: - transition() 启动过渡效果,其前后是图形变化前后的状态(形状.位置.颜色等等),例如: .attr("fill",&q ...