2868人阅读
ionic（19）
原创（23）
前面说了八节课，有从框架上讨论ionic的，也有从代码结构上讨论的，
但是我仔细看了看，对于新手并没有真正的开始做项目，反而对那些对ionic有一定了解的朋友有一定的帮助。
所以我觉得从头开始带着大家完成一个比较完整的项目。
由于这是一个前端的教程，所以我只讲前端的内容。
UI是借用了福州知名的UI设计师唐力娜的设计，万分感谢。
接口的话，这次课程，为了让大家能够理解或者更为熟悉如何从服务端获得数据。
现在还是借用了公司的测试接口。恩，这是一家有格局的公司。
感兴趣的朋友可以关注一下。（）
后续可能会将这些数据放到本地。
话说的差不多了，那先让大家看一下我们要做一个怎么样的产品吧。
关于这些界面，我并不会带着大家完成，我只会明确的说明功能上的实现，对于界面。相信每个项目都有自己的UI设计。你们可以根据他们的设计去实现。
首先我们先分析一下界面。从上往下是navbar、tabs、slidebox、list、footerbar。
介于前面已经讲述了一些课程了，在这里我们就不从新建项目开始做起了。
而是从教程第六课的Demo（下载地址：）。如果你没有下载，那你也可以自己新建一个项目。前面的教程对代码改动并不大。
首先，我们先把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的图标，关于图标。有时候一些小的图标并不需要提供图片，而是可以直接在代码中实现。
这里提供一个图标的查询网站：/
比如我们不是很喜欢最左边的那个齿轮，明明是叫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条带风格自定义*/
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地址：
如果你还有什么其他的问题,可以通过以下方式找到我
新浪微博:小虎Oni
公众号:ionic__
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：76743次
积分：1023
积分：1023
排名：千里之外
原创：24篇
评论：50条
(4)(4)(2)(12)(2)Ionic页面设计组件大全(UI Design
我的图书馆
Ionic页面设计组件大全(UI Design
/889/1/8890488.html（1）自带组件- 选项卡Tabs/docs/components/#tabs- 列表Lists/docs/components/#list- 卡片Cards/docs/components/#cards- 网格Grid/docs/components/#grid- 侧边抽屉SideMenus/docs/api/directive/ionSideMenus/- 模态窗口Modal/docs/api/service/$ionicModal/- 上拉菜单ActionSheet/docs/api/service/$ionicActionSheet/- 加载动画Loading/docs/api/service/$ionicLoading/- 弹出框Popover/docs/api/service/$ionicPopover/- 对话框Popup（Dialog）/docs/api/service/$ionicPopup/- 轮播页SlideBox(Swiper Slider)/docs/api/directive/ionSlideBox/- 下拉刷新PullToRefresh/Readmore/docs/api/directive/ionRefresher/（2）常用组件- 展开收缩列表Accordion / Collapsible Listshttp://codepen.io/shengoo/pen/bNbvdO/http://codepen.io/ManarKamel/pen/nDfIbhttp://codepen.io/ionic/pen/uJkCz- 首字母索引列表Indexed Listhttp://codepen.io/Samurais/pen/JoKBRL- 水平滚动列表Horizontal Scroll List/Cardshttp://codepen.io/calendee/pen/zaHit/http://codepen.io/drewrygh/pen/jEJGLx- 聊天界面Chat / Messageshttp://codepen.io/calendee/pen/MYaZJNhttp://codepen.io/ethanneff/pen/yymYRRhttp://codepen.io/mhartington/pen/QwLZyQ- 图像网格Gallery-Like Image Gridhttps://market.ionic.io/plugins/ionic-gallery- 滑动选项卡Tabbed Slide Box/saravmajestic/ionic- 手势锁屏Lock Pattern Login/lock-pattern-login-ionic//2014/09/add-pin-code-unlock-ionicframework-app/- 引导页Wizardhttp://arielfaur.github.io/ionic-wizard/- 底部上拉Pull-Up Footerhttp://arielfaur.github.io/ionic-pullup/- Tinder卡片Tinder cards/driftyco/ionic-ion-tinder-cards- 时间轴Timelinehttp://rp.js.org/angular-timeline/example/index.htmlhttps://market.ionic.io/plugins/lumenlabs-timeline- 日期时间选择器Picker（Date、Image）/rajeshwarpatlolla/ionic-datepicker- 搜索过滤栏Filter Bar/Search Bar/djett41/ionic-filter-barhttp://codepen.io/bgrossi/pen/JtvsL- 悬浮按钮Floating Action Button/nobitagit/ng-material-floating-button- 打分Ratinghttps://market.ionic.io/plugins/ionicratings/fraserxu/ionic-rating- 显示密码Password Show/Hidehttp://codepen.io/felquis/pen/OPdaqK- 隐藏选项卡Hidden Tabshttp://codepen.io/rensanning/pen/Wbrbwa- 滚动时隐藏Hide Bars On Scrollhttp://codepen.io/kaililleby/pen/HALnJ（3）其他- Weather app/driftyco/ionic-weather- JSapphttp://jsapp.me/- Ionic Material/- Material Design (CSS-based) - Tileshttp://codepen.io/zavoloklom/pen/wtApI参考：http://www.gajotres.net/must-have-plugins-for-ionic-framework/
发表评论：
TA的最新馆藏ionic 跨页面传值的几种方法 - 菜鸟丫丫 - 博客园
1、使用自带的$cacheFactory服务
$cacheFactory 从字面直译即为缓存工厂，可以用它来生成缓存对象，缓存对象以key-value的方式进行数据的存储，在整个应用内是单例的，可以在service或者controller中注入这个服务，然后就可以用它来自由的存取对象以及各种变量，下面是一个简单例子
[javascript]&&
[javascript]&&
当从AppCtrl对应页面切换到PlaylistCtrl对应的页面时，浏览器控制台打印结果：
$cacheFactory常用的几个方位api如下：
- {{*}} get({string} key) — 返回与key对应的value值，如果未命中则返回undefined。
- {void} remove({string} key) — 从缓存中删除一个键值对
- {void} removeAll() — 删除所有缓存中的数据
- {void} destroy() — 删除从$cacheFactory引用的这个缓存.
2、使用url传参
例：playlists.htm页面将 playlist.id 传递到 playlist页面
[javascript]&&
[javascript]&&
需要注意的是必须在app.js路由中配置接受这个参数
3、service或者factory传值（service跟factory中都是单例模式，定义的变量在整个应用内唯一）
定义变量data
[javascript]&&
在controller中取出变量
[javascript]&&
4、使用H5本地存储localStorage或者sessionStorage（还有indexDB,websql在数据量较大情况下使用）
getItem //取记录
setItem//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
键值对存储，用法也是非常简单，上面给出了常用的api，
1、使用自带的$cacheFactory服务
$cacheFactory 从字面直译即为缓存工厂，可以用它来生成缓存对象，缓存对象以key-value的方式进行数据的存储，在整个应用内是单例的，可以在service或者controller中注入这个服务，然后就可以用它来自由的存取对象以及各种变量，下面是一个简单例子
[javascript]&&
[javascript]&&
当从AppCtrl对应页面切换到PlaylistCtrl对应的页面时，浏览器控制台打印结果：
$cacheFactory常用的几个方位api如下：
- {{*}} get({string} key) — 返回与key对应的value值，如果未命中则返回undefined。
- {void} remove({string} key) — 从缓存中删除一个键值对
- {void} removeAll() — 删除所有缓存中的数据
- {void} destroy() — 删除从$cacheFactory引用的这个缓存.
2、使用url传参
例：playlists.htm页面将 playlist.id 传递到 playlist页面
[javascript]&&
[javascript]&&
需要注意的是必须在app.js路由中配置接受这个参数
3、service或者factory传值（service跟factory中都是单例模式，定义的变量在整个应用内唯一）
定义变量data
[javascript]&&
在controller中取出变量
[javascript]&&
4、使用H5本地存储localStorage或者sessionStorage（还有indexDB,websql在数据量较大情况下使用）
getItem //取记录
setItem//设置记录
removeItem//移除记录
key//取key所对应的值
clear//清除记录
键值对存储，用法也是非常简单，上面给出了常用的api，匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。ionic入门教程第九课-开始动手做项目吧！ion-nav-bar、ion-nav-buttons、ion-tabs
ionic入门教程第九课-开始动手做项目吧！ion-nav-bar、ion-nav-buttons、ion-tabs
前面说了八节课，有从框架上讨论ionic的，也有从代码结构上讨论的，
但是我仔细看了看，对于新手并没有真正的开始做项目，反而对那些对ionic有一定了解的朋友有一定的帮助。
所以我觉得从头开始带着大家完成一个比较完整的项目。
由于这是一个前端的教程，所以我只讲前端的内容。
UI是借用了福州知名的UI设计师唐力娜的设计，万分感谢。
接口的话，这次课程，为了让大家能够理解或者更为熟悉如何从服务端获得数据。
现在还是借用了公司的测试接口。恩，这是一家有格局的公司。
感兴趣的朋友可以关注一下。（）
后续可能会将这些数据放到本地。
话说的差不多了，那先让大家看一下我们要做一个怎么样的产品吧。
关于这些界面，我并不会带着大家完成，我只会明确的说明功能上的实现，对于界面。相信每个项目都有自己的UI设计。你们可以根据他们的设计去实现。
首先我们先分析一下界面。从上往下是navbar、tabs、slidebox、list、footerbar。
介于前面已经讲述了一些课程了，在这里我们就不从新建项目开始做起了。
而是从教程第六课的Demo（下载地址：）。如果你没有下载，那你也可以自己新建一个项目。前面的教程对代码改动并不大。
首先，我们先把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的图标，关于图标。有时候一些小的图标并不需要提供图片，而是可以直接在代码中实现。
这里提供一个图标的查询网站：/
比如我们不是很喜欢最左边的那个齿轮，明明是叫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条带风格自定义*/
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地址：
如果你还有什么其他的问题,可以通过以下方式找到我
新浪微博:小虎Oni
公众号:ionic__
我的热门文章
即使是一小步也想与你分享