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

时间：2018-09-26 22:11:49 阅读：229 评论：0 收藏：0 [点我收藏+]

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-窗口管理-创建子页面

标签：styles tle ott uri 引用导航栏 imu cell 切换

原文地址：https://www.cnblogs.com/xpwi/p/9709940.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行