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 框架

---

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