我们开发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. websocket学习和使用

    1)WebSocket介绍 HTML5 Web Sockets规范定义了Web Sockets API,支持页面使用Web Socket协议与远程主机进行全双工的通信.它引入了WebSocket接口并 ...

  2. rem的js

    html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !import ...

  3. 创建单页web app， 如何在chrome中隐藏工具栏 地址栏 标签栏？

    问题描述: 为使用更大的屏幕空间,在访问web应用的使用,如何隐藏地址栏.工具栏? 解决办法: 1. chrome的application mode 选项--->更多工具---->添加到桌 ...

  4. 计时器60s

    计时器是经常用到的功能,下面以react nativ的例子简介来写一个倒计时60s的小demo. 代码如下: import React, { Component } from 'react'; imp ...

  5. WCF学习——构建一个简单的WCF应用（一）

    本文的WCF服务应用功能很简单,却涵盖了一个完整WCF应用的基本结构.希望本文能对那些准备开始学习WCF的初学者提供一些帮助. 在这个例子中,我们将实现一个简单的计算器和传统的分布式通信框架一样,WC ...

  6. websocket多线程问题

    title: websocket多线程问题 date: 2017-06-28 11:21:24 categories: websocket tags: [websocket] --- 开发框架 spr ...

  7. 如何使用Node.js编写命令工具——以vue-cli为例

    vue-cli全局安装之后,提供了vue命令和vue init.vue list.vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目.本文简单介绍一下这些命令是如何实现的. v ...

  8. 使用kindlegen实现自主文件发送

    最近入手一部kindle,本着努力学习的想法,想通过它来提高自己的英文阅读水平,不过,入手之后,发现用来看杂文的时间远大于看英文文章的时间,时间罪过,为了减轻自己的负罪感,决定要用它来实现最初的作用, ...

  9. 【jframe】Java Web应用程序框架 - 第01篇：Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...

  10. PouchDB 基础

    GUIDES http://pouchdb.com/guides/ 1.建立couchDB环境 下载并安装CouchDB: https://couchdb.apache.org/#download 测 ...