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 框架
- 本笔记不允许任何个人和组织转载