ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
来源:互联网 发布:gson解析嵌套json数据 编辑:程序博客网 时间:2024/05/17 08:16
发了十篇教程,现在向我问问题的朋友越来越少了。可能我接触到的学习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
如果你还有什么其他的问题,可以通过以下方式找到我
新浪微博:小虎Oni
微信公众号:ionic__
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- Ionic之如何使用ion-infinite-scroll实现上拉加载,下拉刷新的功能
- Ionic ion-refresher ion-infinite-scroll 自定义loading动画
- ion-infinite-scroll实现上拉刷新
- ionic ion-refresher 下拉刷新的使用。
- ionic 下拉分页 ion-infinite-scroll标签
- ionic ion-refresher刷新完毕
- ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决
- ionic ion-infinite-scroll上拉刷新会自动调用多次的问题
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载
- ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)
- ion
- ion
- ION
- Ionic基础——列表ion-list
- Ionic基础——列表ion-list
- 当数据加载完停止ion-infinite-scroll
- Python multi thread "error: longjmp causes uninitialized stack frame"
- 网络基础
- 当使用EasyUI时,需要的Field属性是子属性时候,除了formatter和修改jquery.easyui.min.js的方法
- synchronized关键字的正确用法
- APP 图标修改问题
- ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新
- MySQL锁
- 编程珠玑 旋转字符串
- 获取ListView当前滚动的距离(高度)
- Loadrunner随机生成15位数字串
- 合法的邮箱测试用例
- dialog and activity style
- Rsync使用
- 前端js与css兼容性问题