[webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02

最新推荐文章于 2023-07-16 19:06:01 发布

IT技术研究院

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量797

点赞数 4

本文链接：https://blog.csdn.net/k0mwak/article/details/78104483

版权

本文详细介绍了如何使用MUI框架构建webAPP的头部导航和底部选项卡。首先创建四个底部页面，然后在index.html中实现代码，确保底部选项卡与头部导航标题对应。讲解了mui.extend()和plus.webview.create等关键函数的用法，并预告了接下来的轮播图制作教程。

摘要由CSDN通过智能技术生成

前言

一个完整的APP少不了,要有头部导航跟底部导航,那么我们在用MUI框架来开发APP时,在制作头部导航很底部选项卡时我们应该要注意哪些呢?

接下来给大家来详细讲解一下:

在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.

效果图

最终我们要实现的效果如下:

具体实现

1.首先创建4个底部选项卡页面

home1.html;home2.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>
                <