前言
一个完整的APP少不了,要有头部导航跟底部导航,那么我们在用MUI框架来开发APP时,在制作头部导航很底部选项卡时我们应该要注意哪些呢?
接下来给大家来详细讲解一下:
在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.
效果图
最终我们要实现的效果如下:
具体实现
1.首先创建4个底部选项卡页面
home1.htmlhome2.htmlhome3.htmlhome4.html
2.index.html代码实现
创建完之后,我们返回程序加载的入口index.html去写相关的代码:
首先床架四个底部选项卡:
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="templete/home1.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页01</span>
</a>
<a class="mui-tab-item" href="templete/home2.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页02</span>
</a>
<a class="mui-tab-item" href="templete/home3.html">
<span class="mui-icon mui-icon-home"></span>
<