ionic入门教程第九课-开始动手做项目吧！ion-nav-bar、ion-nav-buttons、ion-tabs

前面说了八节课，有从框架上讨论ionic的，也有从代码结构上讨论的，

但是我仔细看了看，对于新手并没有真正的开始做项目，反而对那些对ionic有一定了解的朋友有一定的帮助。

所以我觉得从头开始带着大家完成一个比较完整的项目。

由于这是一个前端的教程，所以我只讲前端的内容。

UI是借用了福州知名的UI设计师唐力娜的设计，万分感谢。

接口的话，这次课程，为了让大家能够理解或者更为熟悉如何从服务端获得数据。

现在还是借用了公司的测试接口。恩，这是一家有格局的公司。

感兴趣的朋友可以关注一下。（www.lbwan.com）

后续可能会将这些数据放到本地。

话说的差不多了，那先让大家看一下我们要做一个怎么样的产品吧。

关于这些界面，我并不会带着大家完成，我只会明确的说明功能上的实现，对于界面。相信每个项目都有自己的UI设计。你们可以根据他们的设计去实现。

首先我们先分析一下界面。从上往下是navbar、tabs、slidebox、list、footerbar。

介于前面已经讲述了一些课程了，在这里我们就不从新建项目开始做起了。

而是从教程第六课的Demo（下载地址：http://pan.baidu.com/s/1pLf7jSJ）。如果你没有下载，那你也可以自己新建一个项目。前面的教程对代码改动并不大。

首先，我们先把Logo加上。你们可以随意选择自己喜欢的logo，因为借用了公司的接口，所以直接用公司的logo，算是做一点点宣传的报答吧！

1：声明nav-bar的样式，可接受参数有

此数据来源：http://www.ionic.wang/css_doc-index.html这个网站还不错，建议收藏。在开发中经常查询这上面的手册。

2、声明带有回退按钮

3、添加一组nav-button，并声明是左边的按钮。同样的class=right就可以写出在右边的按钮，如上图中的头像，可以这么实现。

4、声明这个图片是一个button-icon的样式，这些样式都是直接使用ionic的css。

有些朋友有过css的基础，所以开发的时候，一看到界面基本上还会大量的使用自己写的样式，但是我觉得既然使用了框架，还是尽量使用框架的内容比较好。

但是框架中定义的样式基本上都只是简单的通用的样式，经常不是非常符合设计师的设计要求，所以我们可以在使用后样式的基础上去修改。也可以重写ionic的样式。

这里需要注意的是，相同样式先引用的会被后引用的覆盖，除非定义了!important

运行效果：

这里有两个问题，1：图片变形了。2：title不居中

遇到这些问题有些朋友会去找为什么title不居中，特别是在问题1，图片变形不是非常明显的情况下，或者图片并没有变形，只是图片太大。

这里多说一句，当遇到问题的时候，不要马上去网上百度，也不要马上去问别人，对这些东西产生依赖都不利于自己的学习。

试着先自己找找问题，其实我个人觉得教程看一看就过去了，定位问题处理问题的过程才是真正的学习。

首先打开浏览器，这里我使用的是谷歌，比较好用的开发人员工具。

打开调试工具使用选择对象工具，点击一下图片就能发现这图片占了太多的空间导致title被向左推。

需要注意的是由于版本问题，这个放大镜有时候会是另外一个小三角形的图标，反正都是在这个位置就是了。

基本上样式上的问题都是这么定位的。

这里在介绍一个技巧，可能知道了觉得没什么，但是真的很实用。

使用放大镜点击图片之后，在styles中可以查看当前的目标所使用的样式，如果都没有，或者是只是用ionic的样式不便修改。

可以直接在element.style中编辑，相当于在代码中加了style=“”

这里可以实现所见即所得，非常高效使用。

把修改后的参数绑定到这个对象上就可以了，方法有写到样式表里，也可以写到内联样式表。这就是在使用ionic样式的基础上修改。

接下来我们修改tabs

还是一样的分析一下tabs，1首先这个新建的项目有三个可用的选择卡，他们将底部的tabs栏分成了三等分，这样使得点击区域，分离出来，不会相互干扰。

2这里指的是这个tab的名字，都是自定义的。3、这里是tab的图标，关于图标。有时候一些小的图标并不需要提供图片，而是可以直接在代码中实现。

这里提供一个图标的查询网站：http://ionicons.com/

比如我们不是很喜欢最左边的那个齿轮，明明是叫account（账户），却要放上一个设置的图标

首先我们在上面提到的网站中搜索person，然后选择自己喜欢的图标，点击查看它对应的代码。

然后在tabs.html中修改account的图标就可以了，这里icon-off和icon-on是点击态的差别，如果你不需要的话直接使用icon="ion-person"就可以了

运行结果：

当然了，我们这个项目并不需要这些东西。刚好说到了，我就尽量说的清楚一点，现在回头看一下我们的项目，我们需要的是这个样子的

还是先分析，拿到一个东西，不要急着做，先想想。想明白了在动手。

这是一个在上面的tabs，并且没有图标，还是条带风格的。

那实现起来容易了，对于初学者，最简单的就是一个一个百度。

怎么让ionic的tabs在上面？ionic tabs 没有图标？ionic条带风格的tab？

我刚学的时候就这么做完这个项目的。

接下来我们看一下新建项目的tabs代码。

tabs-icon-top 指的是在上面有一个icon。后面那个是颜色样式，还挺简单的。

现在修改一下

<ion-tabs class="tabs-striped tabs-top">

增加tabs的条带风格tabs-striped然后把tabs放到上面去，删掉tab标签内的icon属性。

运行代码：

样式基本符合我的的需要了，但是颜色上还是有差别的。

查询了官方的文档并没有我们要的颜色，这很正常。在开发中是经常遇到的。

那么我们就可以重写一下这个样式，有一个问题，重写过的样式会在整个项目中覆盖，但是一个项目应该会有一个整体的风格这个没必要担心。（这就是重写ionic样式）

我们直接在css文件夹中的style文件，添加

/*tabs条带风格自定义*/ .tabs {
  color: #FF7A01; !important;}
.tabs .tab-title{
  font-family:"微软雅黑" !important;
}
.tabs-striped .tab-item.tab-item-active, .tabs-striped .tab-item.active, .tabs-striped .tab-item.activated {
  margin-top: -2px;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-color: #FF7A01; }

这就是我们要的效果了，这里有一个地方需要注意的。style.css文件的引用要在ionic.css文件之后

考虑到文章的篇幅问题今天就先讲到这里了。下一次课将讲解ion-slide-box用于banner展示。ion-list、ion-item与ng-repeat的结合使用。

请大家关注一下我的公众号，就算给我一点点鼓励吧

项目Demo地址：http://pan.baidu.com/s/1bpsNjsj
如果你还有什么其他的问题,可以通过以下方式找到我
QQ:448627663
E-mail:448627663
新浪微博:小虎Oni
微信公众号:ionic__