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如果你还有什么其他的问题,可以通过以下方式找到我QQ:448627663E-mail:448627663新浪微博:小虎Oni微信公众号:ionic__

时间: 2024-10-12 03:46:26

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

ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点

截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 事实上我開始的时候计划的挺好的,就依照我这阶段的安排,慢慢的带大家做一个

无废话ExtJs 入门教程二十一[继承:Extend]

无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承”定义在我们定义的新组件中,从而达到重用的目地. 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 话说RecyclerView已经面市很久,也在很多应用中得到广泛的使用,在整个开发者圈子里面也拥有很不错的口碑,那说明RecyclerView拥有比ListView,GridVi

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下&quot;没有更多了&quot;的友好提示

ionic上拉加载更多当数据加载完没有下一页的时候我们需要显示一下"没有更多了"的友好提示,但是在ionic里面遇到了一个问题.就是没有数据的时候我显示了没有更多的时候我的点击商品详情的事件失效了.怎么点都不触发 这到底怎么回事.简直是....遇到了各种奇葩问题.好了先不吐槽了.还是先解决问题吧. 我们看代码的时候很容易从因为这句话而出发.最开始的时候我是上拉第一页的时候.点击事件还有效.也就是上拉到最后一页点击事件才会失效.也就是isNext为false的时候.这时候我就会以为是ng

ionic入门教程-ionic路由详解(state、route、resolve)(转)

http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0 今天好好的跟大家讲讲ionic的路由配置. 问到的朋友有点多,因为这个内容比较多,所以我一直想等我多了解一些再出关于路由的教程. 但是有些很简单的也有朋友不理解,所以我就提前出了这篇教程. 希望能对大家有点帮助,关于我遗漏的部分,后面再发教程补充吧. 但是基本的内容,简单的应用,应该这篇教程里面都会提到了. 首先我们还是从tabs类型的新建项目来学习(这个项目

ionic入门之色彩、图标、边距和界面组件:列表

转载声明,本文章来自http://cnodejs.org/topic/551b516c33e515e67640631e 目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩略图 .item : 嵌入大图 色彩 ionic定义了九种前景/背景/边框的色彩样式,: 可以在任何元素上使用这些样式设置前景和背景颜色: <any class="posit

ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件

继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目. 依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件中面. 这是一个简单的项目,业务逻辑代码也非常少.这样子实现并没有什么问题.可是当我们的项目越写越多.业务逻辑越来越复杂.假设我们还是把全部的控制器写到同一个文件中面.那可能我们将要面对的就是一个有着上万行代码的文件. 每次编辑仅仅能通过搜索keyword来定位了. 所以真正编辑项目的时候我们应该都

【Mongodb教程 第十一课 】MongoDB 聚合

聚合操作过程中的数据记录和计算结果返回.聚合操作分组值从多个文档,并可以执行各种操作,分组数据返回单个结果.在SQL COUNT(*)和group by 相当于MongoDB的聚集. aggregate() 方法 对于在MongoDB中聚集,应该使用aggregate()方法. 语法: aggregate() 方法的基本语法如下 >db.COLLECTION_NAME.aggregate(AGGREGATE_OPERATION) 例子: 在集合中,有以下的数据: { _id: ObjectId(

ParisGabriel:Python全栈工程师(0基础到精通)教程 第二十一课(包、模块 的导入)

ParisGabriel 每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰 Python人工智能从入门到精通 补充:包的相对导入 只对后两种导入方式有用 包的相对导入 只对后两种导入方式有用 异常(基础)except: 什么是错误: 是指由于逻辑或语法等导程序无法正常执行的问题 什么是异常: 是程序出错的标识符的一种状态 当异常发时 程序不会再向下执行,而转去调用此函数的地方 待处理此错误并恢复为正常状态 异常的作用: 用作信号, 通知上层调用者有错误产生需要处理try 语句: 两种语