我们开发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. 【Python3之面向对象的程序设计】

    一.面向对象的程序设计的由来 1.第一阶段:面向机器,1940年以前 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的指令和数据. 简单来说,就是直接编写 0 和 1 ...

  2. javascript事件委托机制详解

    以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点 ...

  3. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  4. 为Windows资源管理器右键菜单添加菜单项

    为Windows资源管理器右键菜单添加菜单项 在Windows下命令行用的比较多,经常在资源管理器里翻到某个目录,若想要在此目录下跑命令,只能是打开cmd.exe,然后一路cd才能到达此目录. 每次都 ...

  5. linux统计cdn日志慢请求

    ./stat_ip.sh live-https.log-0510.gz 1000 #首先用shell脚本可以统计出?日志慢请求查询时间超过?秒对应的ip和对应的调用次数(传两个参数) #!/bin/b ...

  6. mysql 列类型以及属性特点

    整形列: 一个字节有8个位,例如:int 类型的列存入数字1,00000000 00000000 00000000 00000001它就在最低位置上存入一个1,由此可见是极大的浪费资源,所以在建立列类 ...

  7. video+ audio

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Example008关闭IE窗口时，不弹出询问对话框

    <!-- 实例008关闭IE主窗口时,不弹出询问对话框 --> <meta charset="UTF-8"> <a href="#" ...

  9. 如何让局域网内的其他电脑访问本机的mysql

    测试电脑:本机ip是125.216.250.67  其他电脑 125.216.250.68 第一步:先用其他电脑ping本机,看能否ping通 如上图即为成功ping通了 第二步:开放mysql的全向 ...

  10. 程序员必须知道的六大ES6新特性

    二 .字符串扩展 1.传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参 ...