MUI框架-08-窗口管理-创建子页面

Posted xpwi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MUI框架-08-窗口管理-创建子页面相关的知识,希望对你有一定的参考价值。

MUI框架-08-窗口管理-创建子页面

  • 之前写过这一篇,不知道为什么被删了,我就大概写了,抱歉
  • 创建子页面是为了,页面切换时,外面的页面不动,让 MUI 写出来的页面更接近原生 app
  • 官方文档:http://dev.dcloud.net.cn/mui/window/#subpage

创建子页面

  • 1.在HBuilder 新建移动app项目,选择 mui
  • 3.新建html目录用来存放html文件,新建含 mui 的HTML文件
    • 在 Hbuilder 中,新建HTML文件,选择”含 mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了 mui 的js、css资源引用
  • 3.打开index.html 文件
  • 4.在body里面,输入mheader
    • 顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏
  • 5.在body里面,输入mbody
    • 除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content控件内,在Hbuilder中输入mbody,可快速生成包含.mui-content的代码块
  • 6.找到页面中一对 script 便签,里面含有 init()
  • 7.将这对标签剪切到 header 头部和nav 脚部,标签的位置,这个应该很容易理解,就是我们加载页面的地方
  • 8..写入如下代码;
    <script type="text/javascript" charset="utf-8">
        mui.init({
    subpages:[{
      url:'html/content.html',//根据自己的目录修改
      id:'content.html',//随意
      styles:{
        top:'45px',//mui标题栏默认高度为45px;
        bottom:'0px'//默认为0px,可不定义;
      }
    }]
  });
        </script>
  • 9.然后打开在 html 目录下那个新建的 html文件,拷贝如下代码:
<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        
        <div class="mui-content">
            <div class="mui-slider">
                <div class="mui-slider-group">
                    <!--第一个内容区容器-->
                    <div class="mui-slider-item">
                        <!-- 具体内容 -->
                        <img src="../img/1D52F569E73F611465E9BB3656E9628B.png"/>
                    </div>
                    <!--第二个内容区-->
                    <div class="mui-slider-item">
                        <!-- 具体内容 -->
                        <img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png"/>
                    </div>
                </div>
            </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">
                    <div class="mui-media-body">
                        木屋
                        <p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>
                    </div>
                </a>
            </li>
             <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                    </div>
                </a>
            </li> <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                    </div>
                </a>
            </li> <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                    </div>
                </a>
            </li> <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
                    <div class="mui-media-body">
                        幸福
                        <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                    </div>
                </a>
            </li>
        </ul>
        
        </div>
        
        
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
    </body>

</html>
  • 这时候回到 index 页面 预览看到的依然像是一个页面,实际不是的,在单个页面时候不容易体现这种优势,当通过底部标签切换页面的时候,就可以体会到了,头部和底部是不动的,接近原生app 的体验

官方文档

更多文章链接:MUI 框架


  • 本笔记不允许任何个人和组织转载

以上是关于MUI框架-08-窗口管理-创建子页面的主要内容,如果未能解决你的问题,请参考以下文章

从片段创建子意图

mui中几种open页面的区别

mui.init方法配置

mui几种页面跳转方式对比

我自己的 C++ 框架(类似 MFC),我可以创建子窗口,但在 WM_CREATE 时无法创建编辑框

MUI极简的JS函数