快应用底部导航栏的原生实现

什么是快应用

快应用是一种不需要安装即可使用，类似于原生APP的新型应用形态，它是由手机厂商联合推出的一款产品。它不依赖于App，而是依赖于各大手机厂商自带的快应用加载器，使用极其方便。

快应用的官方网址为：https://www.quickapp.cn/，有兴趣的同学可以去官网查看其详细的介绍以及相关的开发文档。

好了，接下来进入正题，在最开始开发快应用的时候，我发现快应用没有自带的底部导航功能，即通过配置app.json就可以自动生成底部导航栏，这令我十分头疼，毕竟有导航栏的App看起来才高大上嘛。

                                                             

这两个页面，谁看起来更高大上一些呢？肯定是有导航栏的呀。

在查阅了快应用的文档之后，只有自己使用原生的组件来实现了。

要实现类底部导航栏，最关键的就是tabs和tab-bar这两个组件，另外还要知道怎样创建和引用自定义的组件，关于这tabs、tab-bar组件和自定义组件的使用请自行查看开发文档，这里就不做介绍。

下面我将一步一步地讲解如何使用它们来实现底部导航栏。

开始编写代码

1、准备工作

首先创建一个创建快应用项目：文件-新建快应用

之后在弹出的输入框内输入创建的快应用的信息

创建好后的项目的目录如下：

这里只需要看src目录下的内容。

其中src/Common下放置快应用项目的相关资源，如图片，音频等。

src下其它的文件夹每一个文件就代表了一个App的页面，其中以".ux"结尾的为页面文件，".js"结尾的为页面逻辑处理文件，".css"结尾的为页面样式文件。

这里为了方便实现导航栏，我们将初始创建的几个目录删除，之后创建成如下目录：