各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家根据上次的分享内容，ionic安装完后的继续。

---

今天呢就给大家介绍一下我们ionic创建的项目的文件内容的介绍啊，和给大家做一些小玩意。

首先我们先来看一下我们项目的文件路径和一些我们常用的文件。

项目文件结构

---

那么接下来给大家介绍一下，我们如何找到我们所看到的页面，他们的位置在哪里？

首先我们来看第一页

第一个页面 tab-dash

---

那么 我们的第二个页面，想必大家也知道如何去找到了吧。没错了，我们接着看第二个选项的页面啊。

tab/chats tab-chats

---

第三个页面，我直接放图了，老套路。

这个就是我们的第三个页面了

---

导航栏的更改方式

现在既然我们已经都知道我们每个页面的显示的html文件了，那么如何更改我们的导航栏呢。

下面我们来看一下这个文件。

tabs.html

这个文件就是我们的导航栏文件。

那么接下来我们就来看一下这个文件中如何定义的。

---

tabs.html

首先我们先看第一行，这个tabs标签就是把我们所有的导航栏都包裹在内，他算是一个大盒子，包裹导航栏的。

---

那么我们来看第一个导航栏。

第一个导航栏tab中包括一个属性 title， 他是标题的意思。

title

那么接着往下看，icon-off 这个是 未被选中时候的图标。这个什么意思呢，我们来看图片。

icon-off

这个就是当我点击别的导航按钮的时候，我们这个第一个导航栏的图标的显示情况。这个就是未被选中时候的图标。

那么接着往下看啊，icon-on 这个是被选中时候的图标，这个就是当我们点击时所展示的图标。

icon-on

---

现在呢，我就开始更改我的图标咯。

首先呢，ionic他有他的官方文档，在其中他有她自有的一些图标样式。官方图标链接地址

我们现在先更改一下图标试一下。

ion-ios-home

我随便选择一个小房子的图标啊，看到下面有一个类名叫 ion-home, 复制过来。

写在我们icon-on中，而off 我直接复制旁边的那个白色的房子的类名，并写入。

ion-ios-home-outline

然后页面刷新看一下图标。

怎么样，现在明白如何更改导航栏的图标了吧。文字呢，直接在title的属性里面更改你想要的名字就哦了。所以关于导航栏的更改样式就先给大家介绍到这里啊。下一节我在给大家解释一些其他的属性。如有问题的可以踊跃撕逼啊。