HTML5 开发APP(头部和底部选项卡)

时间 2019-11-12

标签 html5 html 开发 app 头部底部选项栏目 HTML5 繁體版

原文原文链接

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

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

在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>web

</body>数组

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

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

对应字页面分别下this

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

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