我们开发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. SQL Server Alwayson读写分离配置

    标签:MSSQL/只读路由 概述 Alwayson相对于数据库镜像最大的优势就是可读副本,带来可读副本的同时还添加了一个新的功能就是配置只读路由实现读写分离:当然这里的读写分离稍微夸张了一点,只能称之 ...

  2. winform中的 datagriview 字段自动填充长度

    在winfrom 的 datagridview 中 绑定字段 经常回在最后面空出一部分来,显得不美观, 现在教大家如何让它自适应宽度 public static void Autogrid(DataG ...

  3. java面试基础题（三）

    程序员面试之九阴真经 谈谈final, finally, finalize的区别: final:::修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此 ...

  4. Bash变量扩展修改符

    1.未设置就临时替换(:-) 冒号:用来检验变量是否设置过,如果没有冒号,则认为设置过,不替换$fruit=peach$echo ${fruit:-plum}peach $fruit=$echo ${ ...

  5. PHPStorm中的快捷键

    1.Ctrl+Alt+L 格式化代码 2.windows下按下快捷`Ctrl`+`Shift`+`-`,这样就能折叠所有代码了. 3.windows下按下快捷`Ctrl`+`Shift`+`+`,这样 ...

  6. 抓包工具 - Fiddler（如何捕获Android数据包）

    如何捕获Android数据包 一.移动设备访问网络原理 先看看移动设备是怎么去访问网络,如图1所示,可以看到,移动端的数据包是从wifi出去的. 图1(移动设备访问网络) 所以我们可以把自己的电脑开启 ...

  7. 查找oracle自己用户的表

    查找oracle自己用户的表 select table_name from user_tables;

  8. linux下swoole的安装

    //官方推荐的安装方式1:下载压缩包 wget https://github.com/swoole/swoole-src/archive/swoole-1.8.4-stable.zip 2:解压缩 u ...

  9. Vulkan Tutorial 24 Descriptor pool and sets

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 描述符布局描述了前一章节讨论过的可以绑定的描述符的类型.在 ...

  10. UML 解析

    UML 解析 泛化 表示类与类之间的继承关系.接口与接口之间的继承关系: 实现 表示类对接口的实现 依赖 当类与类之间有使用关系时就属于依赖关系,不同于关联关系,依赖不具有"拥有关系&quo ...