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，我们找到这样一个样式
图片来自：//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
详细的可以参考:/articles/qIBNve 我这里不在重复了。
下拉刷新用的是
&ion-refresher pulling-text=&下拉刷新...& on-refresh=&doRefresh()&&
&/ion-refresher&注意这个是放在&ion-content &之后的，也就是界面的最上面。注意和上拉加载的区别
注意这里在事件响应结束的时候，要抛出scroll.refreshComplete事件，和上拉加载的事件是不一样的。
到此这节课的内容就结束了。
项目Demo地址：如果你还有什么其他的问题,可以通过以下方式找到我新浪微博:小虎Oni公众号:ionic__
我的热门文章
即使是一小步也想与你分享Ionic ion-list vs .list - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
J it only takes a minute:
In Ionic, we can do something like this for the list view:
&ion-list&
&ion-item href="#"&
Butterfinger
&/ion-item&
&/ion-list&
And also like this:
&div class="list"&
&a class="item" href="#"&
Butterfinger
These 2 basically output the same layout. What is the difference between these 2? Will do it with the div method will result in better performance? If so, then why ion-list?
4,5292171143
There is not any differences from CSS styling point of view (except some color styling on child text) between using &ion-list& and &div class="list"& because &ion-list& is a directive and it will render &div class="list"& inside it. If you inspect element you will see this
(rendered html picked from browser element inspection)
&ion-list&
&div class="list"&
&ion-item href="#" class="item item-complex"&
&a class="item-content" ng-href="#" href="#"&
Butterfinger
&/ion-item&
&/ion-list&
As you can see in above code ion-list generate a div with list class.
Plus see the
of ion-list it will make things more clearer. I am just sharing a line from source code to show what template this directive render
var listEl = jqLite('&div class="list"&')
There will be no performance difference between both, but i will suggest you to
use &div class="list"& if you do not want to use apis of ion-list and want to have more control over element while doing customization.
As far as your question "why ion-list" is concerned, the directive gives you access to many options in the API. The API methods listed in the bottom of the docs pages (like
for example) gives you a sense of what the directive allows you to do, instead of just using the CSS associated with the class.
Quoting from documentation
However, using the ionList and ionItem directives make it easy to
support various interaction modes such as swipe to edit, drag to
reorder, and removing items.
Conclusion: So it totaly depends upon your requirement, whether to use directive or use simple class on div.
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled1719人阅读
ionic（3）
1.添加向右箭头的方法：&i class=&icon ion-ios-arrow-forward&&&/i&
在ion-item中添加上述代码，例：
&ion-item ng-repeat=&item in items&&
&i class=&icon ion-ios-arrow-forward&&&/i&
&/ion-item&这时，虽然成功添加了向右的箭头，但是这个箭头是紧挨在文字后边的，并不是我们想要的效果。如下图：
2.设置箭头靠右显示：在ion-item后添加class=&item-icon-right&代码：
&ion-item ng-repeat=&item in items& class=&item-icon-right&&
&i class=&icon ion-ios-arrow-forward&&&/i&
&/ion-item&此时的效果如下图：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28778次
排名：千里之外
原创：34篇
评论：12条
(3)(2)(4)(1)(2)(10)(1)(3)(2)(7)(2)