ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程，现在向我问问题的朋友越来越少了。可能我接触到的学习ionic的就这么些人吧！

可能大家已经觉得我写的东西都太过基础了，没什么值得参考借鉴的地方。

开始有人叫我说直接防类似饿了吗，折八百这样的网站，做一个Demo。

其实我也知道有些朋友就想要这种网上的免费劳动力。

但是其实这个建议还是不错的。

等我把现在这个demo讲完，我可能会考虑找一个成熟的上线的项目进行说明。

这个列表页一说，写完这个的朋友就可以尝试着接手项目了。

我不是说ionic简单，内容少。

我只是说我这些时间里面提到的内容已经足够入门了。

后续的学习还是要从项目中开始会比较科学。

其实我讲的都有些多了，关于基础中的基础，无非就是MVC，服务控制器视图之间如何交互，如何双向绑定，如何使用ionic标签，如何遍历数组。

言归正传，开始我们今天的课程吧。

首先我们看一下这节课要实现的功能：

我们要做的是上图中这样的列表页，首先简单分析我们就能知道，列表页里面的子项都是一样的样式，只不过数据有差别而已。

所以我们这里只要编写一个子项的样式，然后通过使用ng-repeat进行循环遍历数据数组，就等得到我们想要的列表页。

通过分析这个子项，我们能够知道这东西大致由三个部分组成，

左边的图片，中间的文本说明区域，右边的按钮。

查阅ionic的itemAPI，我们找到这样一个样式

图片来自：http://www.fed123.com/2014/08/09/2014_ionic_api_css/ 

还是我上次讲的原则，能用ionic的样式就先用ionic的样式，能少敲一行代码，就少敲一行。

从服务器获取数据这个就不说了，前面说了很多了。

基本上没敲什么代码，就完成了大半了，现在再加入一个按钮

这样基本所有的功能就都有了，然后根据效果图，对css做部分的微调。

然后在

这个相当于是for(var key in items){这里是a标签包含的所有html，都会被复制 }

恩，界面跟我们要的不一样，所以手动修改吧，这里贴代码了，直接看Demo吧。

接下来，我们来看比较常见的，列表页附加需求，上拉加载、下拉刷新。

这两个功能现在都是默认必须有的，产品经理在写需求时都懒得写到需求文档里面的。

只要提到列表页，一定要有这两个功能。恩，有些固定内容的列表页并不需要，当我胡扯的。

先说上拉加载：这个是放在</ion-content>之前的，也就是界面的最下面

<ion-infinite-scroll on-infinite="loadMore()" distance="1%" ng-if="!noMore">
</ion-infinite-scroll>

ng-if是指这个控件的显示或隐藏。

这里要注意和ng-show的区别，ng-show和ng-hide是使用css的方法显示和隐藏控件，实际是还存在的。ng-if则是移除和添加。这个是有本质上的区别的在实际情况下，要根据业务的需要进行选择，如果需要重复高频的显示隐藏可以考虑使用ng-show，如果隐藏之后不再需要显示则最好使用ng-if

distance是指当滑块（就是滚动条的那个滑块，不显示还是存在的）距离底部多少的时候触发事件。

on-infinite是指绑定的触发事件。

值得注意的是，这个事件要在处理完响应之后，抛出scroll.infiniteScrollComplete事件

这里扩展说明一下;

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data

详细的可以参考:http://www.tuicool.com/articles/qIBNve 我这里不在重复了。

下拉刷新用的是

<ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()">
</ion-refresher>
注意这个是放在<ion-content >之后的，也就是界面的最上面。注意和上拉加载的区别

注意这里在事件响应结束的时候，要抛出scroll.refreshComplete事件，和上拉加载的事件是不一样的。

到此这节课的内容就结束了。

项目Demo地址：http://pan.baidu.com/s/1c2a48E0

--- 转自：http://blog.csdn.net/onil_chen/article/category/6113346 ---