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

最新推荐文章于 2024-02-26 20:04:22 发布
最新推荐文章于 2024-02-26 20:04:22 发布
阅读量1.4k 收藏 1
点赞数
文章标签： CSS HTML Javascript MUI 手机

一、打开子页面

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


最爱春暖花开
关注
专栏目录
mui碰到的问题————日期控件
qq_35474350的博客
10-17 1898
前端页面加载js,css文件 css:hd/page/mui/css/mui.picker.min.css" /> js:hd/page/mui/js/mui.picker.min.js">             (function($) {                 $.init();                 var result = $('#resul
使用MUI框架构建App请求http接口实例
热门推荐
irokay的专栏
01-18 4万+
最近在看Dcloud的MUI框架，MUI封装了android、ios等多个平台的原生接口，达到开发一个项目，采取不同打包方式，生产多种平台的app。无可厚非，对于从事java web开发的工程师，带来了极大的福音，再也不用去花太多时间去学习原生的android、ios语言，大大缩短了app开发的学习周期和成本。当然，既然是做了封装处理，肯定性能上面不如原生。但是Dcloud官方声称MUI是最接近原生
mui---验证页面是否加载或显示
diyinjiao1404的博客
05-30 445
加载 var ws = plus.webview.getWebviewById(id) ws.addEventListener( "loaded", function(e){ console.log( "Loaded: "+e.target.getURL() ); }, false ); 显示 var ws=plus.webview.currentW...
mui.view
水色陀螺
05-18 769
mui.back返回
mui关闭指定页面
大白z的博客
09-25 1718
记录以防忘记 //获取当前窗口 var openView = plus.webview.currentWebview() //获取指定窗口 var meet = plus.webview.getWebviewById("page/meet/meet.html"); //关闭父窗口 function closeOpenView() { //获取父窗口 var openView = plus.w...
subpages 创建后如何关闭或隐藏？
Wisdom—Yoga—TaciturnKnight（WYT）
06-14 1657
创建子页面 mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'48px',//mui标题栏默认高度为48px； bottom:'0px'//默认为0px，可不定义； } }] }); 利用 var win = plus.webview.getWeb
mui中的关闭页面的几种方法
weixin_33913332的博客
07-21 593
一、总结： mui中关闭当前页面的几种方式： 1.swipeBack（暂未测试过） 2.keyEventBind（暂未测试过） 3.给标签的class加.mui-action-back（返回的是前一个页面） 4.也可以直接调用mui.back()方法，实现关闭页面逻辑 例如在实现查询功能的时候，在查询页面输入查询条件，然后返回到列表页面显示查询的结果，用mui.back()返回...
mui.pciker.rar
01-12
今天我们将聚焦于MUI中的一个关键组件——Picker，通过分析“mui.picker.css”和“mui.picker.js”这两个文件，深入理解Picker的使用方式和实现原理。 首先，我们要明确的是，“mui.picker.css”是Picker组件的样式...
IT廉连看——Uniapp——什么是Uniapp
weixin_72932310的博客
02-26 1599
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有 vue 和微信小程序的开发经验，可快速上手uni-app。
html5+ XMLHttpRequest 与mui ajax用法
于浦洋 的博客
03-13 5312
Javascript XMLHttpRequest网络请求 XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。
定制页面
Rosa_zz的博客
05-27 1038
内置页面的定制 ”现代用户界面“中提供了一些页面，您可以通过插入宏的指令（如：!insertmacro MUI_PAGE_COMPONENTS）来把相应的页面加入到安装脚本，在安装过程中，插入的页面将按照先后顺序出现，这些提供的安装页面如下： MUI_PAGE_WELCOME MUI_PAGE_LICENSEtextfile MUI_PAGE_COMPONENTS MUI_PAGE_DIRECTORY MUI_PAGE_STARTMENUpageid variable MUI_PAGE_INST...
MUI-主页面向子页面传递参数，并在子页面中打印结果
LzzMandy的博客
12-27 551
主页面向子页面传递一个参数，在子页面中打印出这个参数。 1、主页面初始化设置 &lt;script type="text/javascript" charset="utf-8"&gt; mui.init({ subpages:[{ url:'child1.html', id:'child1', styles:{...
手机APP ~ MUI——创建页面方法
weixin_30682127的博客
10-08 115
MUI——创建页面的方法 一、页面初始化，创建子页面 将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，比如顶部导航、底部选项卡等；内容页面显示具体需要滚动的内容，然后在主页面中调用mui.init方法初始化内容页面。 mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络...
MUI 当前页面获取另一个页面的值再返回到当前页面（子页面向父页面传值）
weixin_30779691的博客
01-10 568
一、子页面的js 注意返回值中含拼接好的字符串 按照自己需求修改） var choseAccepter = (function() { var $$ = jQuery.noConflict(); /** * 构造点击事件 */ function bindEventHandler() { //获取上个页面数据...
mui 图标显示不出来解决方案
xuelang532777032的博客
08-21 1万+
mui 是有自己的 icon 图标的   他是把小图片 存在字体里面 然后在 用引用字体的方式来  读出图标的。 我引用 了  mui.js之后  发现icon 图标是没出来了，原因很简单，我还少放了一个字体文件进行项目。 mui.ttf  （mui的 字体文件） 然后就事放在哪里的问题了 直接看图吧 也就是说要新建一个跟mui.min.css css文件夹 同目录的
mui 启动页和引导页
逍遥的博客
11-18 627
一、启动页和引导页的概念 “启动页”（splash）：app的启动界面，每次启动都会看到的（每次打开QQ都会看到一只企鹅）。 “引导页”（guide）：guide是否展示是可控的，通常首次启动时显示，从第二次启动开始，引导页就不再显示，而是直接进入App主界面了。 二、启动页的设置 1. 在manifest.json文件中 在manifest.json文件的“启动图片（splash）配置”...
mui中分页功能
glgom的博客
11-30 8031
这写有完整的JS代码，只要定义好一下几个参数就可以自动生成分页的导航栏 //定义有关分页的全局变量 pageNum：当前页 pageSize：每页显示的数据 pages：总页数 total：总数据数 navigatepageSize：分页导航显示的页码数 效果图： <!DOCTYPE html> <html> <head> <meta ...
MUI——创建页面的三种方法
年轻正好
11-15 1万+
第一种：初始化时，使用mui.init()创建子页面 一般情况下，目标页面分为主页面和内容页，两者是组合在一起的。在主页面中写好主页面的结构，就可以在初始化时创建子页面了。 mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标
MUI-创建子页面&打开新页面
LzzMandy的博客
12-21 8063
本文主要简单讲述创建子页面和打开新页面的方法。 1、使用subpages:[{}]，创建子页面，挡在mui.init()方法中 2、使用mui.openWindow({})打开新页面 3、实现如下效果图： 通过双webview模式解决，此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的webview实现，完全使用原生滚动。具体做法则是：将目标页面分解为主页面new_fi...
vue mui创建项目
最新发布
05-30
创建Vue MUI项目的步骤如下： 1. 安装Vue CLI 如果你还没有安装Vue CLI，可以通过npm全局安装，执行以下命令： ``` npm install -g @vue/cli ``` 2. 创建项目 在命令行中执行以下命令来创建Vue MUI项目： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值