我们开发app有一定固定的样式，比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样

我们该怎么实现呢，实现我们应该建一个主页面index.html，然后建五个子页面，通过mui来实现切换功能。

在index的html部分写下这样的代码

<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;background: #00be68;">

<h1 class="mui-title" style="color: #FFFFFF;">俺的菜园子</h1>

</header>
<nav class="mui-bar mui-bar-tab" href="houye.html">

<a id="defaultTab" class="mui-tab-item" href="game.html">
<span class="mui-icon iconfont icon-gamebar"></span>
<span class="mui-tab-label">我的菜园</span>
</a>
<a class="mui-tab-item" href="nongfuZhuanqu.html">
<span class="mui-icon iconfont icon-special1"></span>
<span class="mui-tab-label">农夫专区</span>
</a>
<a class="mui-tab-item" href="caiYuanShangCheng.html">
<span class="mui-icon iconfont icon-iconfonticonfonticonfont20"></span>
<span class="mui-tab-label">菜园 集市</span>
</a>
<a class="mui-tab-item" href="shopList.html">
<span class="mui-icon iconfont icon-shangcheng"></span>
<span class="mui-tab-label">购物清单</span>
</a>
<a class="mui-tab-item" href="geRenZhongXin.html">
<span class="mui-icon iconfont icon-geren"></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>

</body>

heard是头部样式，nav是底部样式很明显，注意的是关于图标的问题，通过<span class="mui-icon iconfont icon-shangcheng"></span>加入图标但是mui自带的图标很少是不能满足我们的需要的，我们去官网http://dev.dcloud.net.cn/mui/ui/#icon可以看到

点开教程根据教程可以很容易的实现拓展图标的功能，简单的说一下教程，就是选择自己要用的图标，下载到本地然后将对应的css和font文件导入到css和font中去就可以使用它生成的图标了。js 部分写如下代码

var Index=0;
//把子页的路径写在数组里面
var subpages = ['game.html','nongfuZhuanqu.html','caiYuanShangCheng.html','shopList.html','geRenZhongXin.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for (var i = 0; i < 5; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '44px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {

//获取目标子页的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//plus.webview.getWebviewById(targetTab).reload();
plus.webview.show(targetTab);

//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;

});
window.addEventListener('refresh', function(e){//执行刷新
location.reload();
});

对应字页面分别下

subpages数组写的是五个子页面的路径。其他都有注释。我们要注意打开页面的位置，和点击事件是tap而不是我们常用的click。另外父页面和子页面都要是新建为含有mui的html页面。这样就写好了一个头部和底部选项卡了，将子页面的内容分别写在5个字页面中，通过点击底部选项卡就可以切换了。

下一章我会讲一下关于mui和我们平时写前端页面的不同的地方

HTML5 开发APP(头部和底部选项卡)的更多相关文章

  1. HTML5 开发APP( 环境配置)

    上一篇我写了关于新建项目,这一篇说一下配置环境我们新建一个移动app后,会发现一个mainifest.json文件,开发app所要配置的环境就在这个文件里 点击打开文件后会有配置界面,在配置界面的下方 ...

  2. HTML5 开发APP(打开相册以及图片上传)

    我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...

  3. HTML5 开发APP(MUI的一些特性)

    先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/  .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...

  4. HTML5 开发APP 第一章

    当今天下,移动端基本上是安卓和苹果的天下,基本上没微软什么事,作为微软忠实的支持者,也要顺势而变. 但安卓和IOS  开发是两个完全不同的世界,有没有一种技术,开发完以后可以运行在任意终端呢,答案是有 ...

  5. phonegap+html5开发app的一些总结

    1.Css3圆角白边:使用css3圆角效果时,在android某些机器上会产生白边,所以应该在圆角的div外套一个div(背景色和外部相同),然后有圆角效果的div 内部使用自己的背景色 border ...

  6. HTML5 开发APP( 支付宝支付)

    我们搞app有一个重要的功能那就是支付功能.无论是微信支付,支付宝,还是银联支付总要有一样支付手段来支持我们网上付款.实现完整的功能.我们公司app的支付方式经过大家开会讨论选择了支付宝支付(其实是当 ...

  7. HTML5 开发APP

    近期在做app,现在项目进行了一段时间,我打算把自己的经验写出来,给自己总结一下也给会用小伙伴看一下.本人前端一枚.我们所以能选的技术就是CSS,HTML,JS了,经过准备我决定用HBuilder 准 ...

  8. 在App中混合HTML5开发App如何实现的。在App中使用HTML5的优缺点是什么？

    参考答案: 在iOS中,通常是通常UIWebView来实现,当然在iOS8以后可以使用WKWebView来实现.有以下几种实现方法: 通过实现UIWebView的代理方法来拦截,判断scheme是否是 ...

  9. Html5+ 开发APP 后台运行代码

    function backRunning(){ if(plus.os.name == 'Android'){ var main = plus.android.runtimeMainActivity() ...

随机推荐

  1. Chapter 7:Statistical-Model-Based Methods

    作者:桂. 时间:2017-05-25  10:14:21 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 书中 ...

  2. scrapy调试时出现 ImportError: No module named win32api

    windows下利用scrapy(python2.7)写爬虫,运行 scrapy crawl dmoz 命令时提示:exceptions.ImportError: No module named wi ...

  3. PHP编译

    编译php-5.3.6的时候需要先打一个内存泄露的补丁,具体的操作如下 tar vzxf suhosin-0.9.32.1.tar.gz tar vjxf php-5.3.6.tar.bz2 cd p ...

  4. [Open Source] 负载均衡之Nginx

    目录 简介 常用命令 功能 代理 反向代理 集群 HTTP集群 TCP集群 重定向 静态文件 HTTPS配置 常见问题 简介 Nginx ("engine x") 是一款轻量级,高 ...

  5. 编写自己的Nmap（NSE）脚本

    编写自己的Nmap脚本 一.介绍 在上一篇文章Nmap脚本引擎原理中我们介绍了基本的NSE知识,这篇文章介绍如何基于Nmap框架编写简单的NSE脚本文件,下一篇文章,Nmap脚本文件分析(AMQP协议 ...

  6. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  7. 两本最近阅读的工具书的记录 关于Python和Linux命令行的 不喜勿喷 只是写给自己用

    <Linux命令行完全技术宝典>读书心得 张栋作者 在学习Linux系统中,我们需要掌握各种管理的方法和技巧,而管理Linux系统最有效的方法就是命令行的控制.而我在图书馆中读到的< ...

  8. 纯CSS3美化单选按钮radio

    这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出 ...

  9. PHPCMS v9 自定义表单添加验证码

    1.  在 \phpcms\templates\default\formguide\show.html 中添加验证码显示 <input type="text" id=&quo ...

  10. 【CC2530入门教程-03】CC2530的中断系统及外部中断应用

    第3课  CC2530的中断系统及外部中断应用 广东职业技术学院  欧浩源 一.中断相关的基础概念  内核与外设之间的主要交互方式有两种:轮询和中断. 轮询的方式貌似公平,但实际工作效率很低,且不能及 ...