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