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..写入如下代码;
  1. 	<script type="text/javascript" charset="utf-8">
  2. 		mui.init({
  3.     subpages:[{
  4.       url:'html/content.html',//根据自己的目录修改
  5.       id:'content.html',//随意
  6.       styles:{
  7.         top:'45px',//mui标题栏默认高度为45px；
  8.         bottom:'0px'//默认为0px，可不定义；
  9.       }
  10.     }]
  11.   });
  12. 		</script>
  • 9.然后打开在 html 目录下那个新建的 html文件，拷贝如下代码：
  1. <!doctype html>
  2. <html>
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<link href="../css/mui.min.css" rel="stylesheet" />
  9. 	</head>
  11. 	<body>
  13. 		<div class="mui-content">
  14. 		  	<div class="mui-slider">
  15. 				<div class="mui-slider-group">
  16. 					<!--第一个内容区容器-->
  17. 					<div class="mui-slider-item">
  18. 						<!-- 具体内容 -->
  19. 						<img src="../img/1D52F569E73F611465E9BB3656E9628B.png"/>
  20. 					</div>
  21. 					<!--第二个内容区-->
  22. 					<div class="mui-slider-item">
  23. 						<!-- 具体内容 -->
  24. 						<img src="../img/8CF9B879550CD10AA9B7B58777367C7F.png"/>
  25. 					</div>
  26. 				</div>
  27. 			</div>
  28. 		<ul class="mui-table-view">
  29. 		    <li class="mui-table-view-cell mui-media">
  30. 		        <a href="javascript:;">
  31. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
  32. 		            <div class="mui-media-body">
  33. 		                幸福
  34. 		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  35. 		            </div>
  36. 		        </a>
  37. 		    </li>
  38. 		    <li class="mui-table-view-cell mui-media">
  39. 		        <a href="javascript:;">
  40. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">
  41. 		            <div class="mui-media-body">
  42. 		                木屋
  43. 		                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
  44. 		            </div>
  45. 		        </a>
  46. 		    </li>
  47. 		     <li class="mui-table-view-cell mui-media">
  48. 		        <a href="javascript:;">
  49. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
  50. 		            <div class="mui-media-body">
  51. 		                幸福
  52. 		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  53. 		            </div>
  54. 		        </a>
  55. 		    </li> <li class="mui-table-view-cell mui-media">
  56. 		        <a href="javascript:;">
  57. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4221.JPG">
  58. 		            <div class="mui-media-body">
  59. 		                幸福
  60. 		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  61. 		            </div>
  62. 		        </a>
  63. 		    </li> <li class="mui-table-view-cell mui-media">
  64. 		        <a href="javascript:;">
  65. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
  66. 		            <div class="mui-media-body">
  67. 		                幸福
  68. 		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  69. 		            </div>
  70. 		        </a>
  71. 		    </li> <li class="mui-table-view-cell mui-media">
  72. 		        <a href="javascript:;">
  73. 		            <img class="mui-media-object mui-pull-left" src="../img/IMG_4234.JPG">
  74. 		            <div class="mui-media-body">
  75. 		                幸福
  76. 		                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
  77. 		            </div>
  78. 		        </a>
  79. 		    </li>
  80. 		</ul>
  82. 		</div>
  84. 		<script src="../js/mui.min.js"></script>
  85. 		<script type="text/javascript">
  86. 			mui.init()
  87. 		</script>
  88. 	</body>
  90. </html>
  • 这时候回到 index 页面 预览看到的依然像是一个页面，实际不是的，在单个页面时候不容易体现这种优势，当通过底部标签切换页面的时候，就可以体会到了，头部和底部是不动的，接近原生app 的体验

官方文档

更多文章链接：MUI 框架

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

MUI框架-08-窗口管理-创建子页面的更多相关文章

  1. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  2. Ionic2开发笔记（2）创建子页面及其应用

    1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml      这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...

  3. layer.open弹出窗口后在子页面修改弹窗的title

    在子页面修改layer.open弹窗的title,代码如下: var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索 ...

  4. Hbuilder开发HTML5 APP之创建子页面

    折腾了好久,终于看明白怎么创建了: 1.创建个html5的mui页面,在其初始化方法中: mui.init({   subpages:[{    id:"list",   url: ...

  5. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  6. MUI框架-01-介绍-创建项目-简单页面

    MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...

  7. MUI窗口管理

    参考:窗口管理 http://dev.dcloud.net.cn/mui/window/ 页面初始化:在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,m ...

  8. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  9. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

随机推荐

  1. 深入理解map系列--HashMap（一）

    Map系列之HashMap(源码基于java8) HashMap是我们最常用的map实现之一,这篇文章将会介绍HashMap内部是如何工作的,以及内部的数据结构是怎样的 一.数据结构简图 二.源码解析 ...

  2. springboot(十二)-分布式锁（redis）

    什么是分布式锁? 要介绍分布式锁,首先要提到与分布式锁相对应的是线程锁.进程锁. 线程锁:主要用来给方法.代码块加锁.当某个方法或代码使用锁,在同一时刻仅有一个线程执行该方法或该代码段.线程锁只在同一 ...

  3. centos 6.6 设备 xxx 似乎不存在, 初始化操作将被延迟

    2019-04-02 问题描述: centos 6.6开启虚拟机之后,网卡服务不能正常启动,报错信息为:设备 xxx(网卡名称)似乎不存在, 初始化操作将被延迟 解决办法: 清空70-persiste ...

  4. ubuntu手动安装PhantomJS

    1.切换到主目录:cd ~2.下载安装包:https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-Linux-x86_64.ta ...

  5. cors允许的方法和contype-type

    https://fetch.spec.whatwg.org/#cors-safelisted-request-header get head post text/plain multipart/for ...

  6. 运维监控之zabbix（yum安装）

    简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...

  7. PHP之string之implode()函数使用

    implode (PHP 4, PHP 5, PHP 7) implode - Join array elements with a string implode - 将一个一维数组的值转化为字符串 ...

  8. CI中使用log4php调试程序

    下载log4php.我下载的版本是:apache-log4php-2.3.0-src.zip.借压缩,将压缩文件中的src/main/php/文件夹拷贝到CI的application/thrid_pa ...

  9. spring之IOC模拟实现

    使用Spring框架已经有很长时间了,一直没有仔细的想过框架的设计思想是什么样的,底层到底是怎么实现的,这几天调试程序看了些源码,写下来做个记录.由于Spring框架博大精深,个人理解的难免有不正确的 ...

  10. JVM执行篇：使用HSDIS插件分析JVM代码执行细节--转

    http://www.kuqin.com/java/20111031/314144.html 在<Java虚拟机规范>之中,详细描述了虚拟机指令集中每条指令的执行过程.执行前后对操作数栈. ...