ionic 列表

学习要点:
1. ion-list ion-item
2. ion-list ion-item 成员
3. collection-repeat : 高性能的 ng-repeat
4. 脚本接口 : $ionicListDelegate

1.列表 : ion-list
列表是常用的信息组织方式。在 ionic 中,使用 ion-list 指令声明列表 元素,使用 ion-item
指令声明成员元素:

<ion-list>
<ion-item>...</ion-item>
<ion-item>...</ion-item>
...
</ion-list>
ion-list 指令提供以下属性用来定制列表的外观:
type - 列表种类

type 属性是可选的,可用来设置列表的种类: list-inset | card。这两种列表 都产生内嵌的
效果,区别在于 card 列表有边框的阴影效果。
show-delete - 是否显示成员内的 delete 按钮
show-delete 属性是可选的。如果在成员内有 delete 按钮( ion-delete-button),使用这个 属
性来通知列表是否显示元素删除按钮。允许的值为: true | false

show-reorder - 是否显示成员内的 reorder 按钮
show-reorder 属性是可选的。如果在成员内有 reorder 按钮( ion-reorder-button),使用这个
属性来通知列表是否显示元素重排序按钮。允许的值为: true | false

can-swipe - 是否支持滑动方式显示成员 option 按钮
can-swipe 属性是可选的。如果在成员内有 option 按钮( ion-option-button),使用这个 属性
来允许或禁止通过向左滑动成员来打开 option 按钮。允许的值为:true | false ,默认为 true。

2.ion-list ion-item 成员
ion-item 有三种预定义的按钮:
ion-option-button - 选项按钮。
一个 ion-item 内可以包含多个选项按钮。选项按钮是隐藏的,需要用户向左 滑动成员,以
显示选项按钮。可以使用 ion-list can-swipe 属性允许或禁止 滑动开启选项按钮。
使用 ng-click 指令来挂接点击事件监听函数,其原型如下:
var optionListener = function(item){...}
ionic 在捕捉到用户的点击事件时,将调用此函数,并传入当前的 item 对象。
ion-delete-button - 删除按钮

一个 ion-item 内最多有一个删除按钮。删除按钮在显示时总是位于成员的最 左端。可以使
ion-list show-delete 属性显示或隐藏删除按钮
使用 ng-click 指令来挂接点击事件监听函数,其原型如下:
var deleteListener = function(item){...}
ionic 在捕捉到用户的点击事件时,将调用此函数,并传入当前的 item 对象。
ion-reorder-button - 重排按钮

一个 ion-item 内最多有一个重排按钮。重排按钮在显示时总是位于成员的最右端。可以使用
ion-list show-reorder 属性显示或隐藏重排按钮
使用 on-reorder 属性来挂接重排事件监听函数,其原型如下:
var reorderListener = function(item,$fromIndex,$toIndex){...}
ionic 在捕捉到用户的重排事件时,将调用此函数,并传入当前的 item 对象、原 序号及目标
序号。
3. collection-repeat : 高性能的 ng-repeat

collection-repeat 指令和 ng-repeat 指令类似,但是更适用于大数据量 的列表数据,这是因
为,它只将处于可视区域的数据渲染到 DOM 上:
<any collection-repeat="...">...</any>
collection-repeat 指令接受一个枚举表达式,同时可以附加以下的属性:
item-width - 可选。声明重复元素的宽度
item-height - 可选。声明重复元素的高度
item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为 3
force-refresh-images - 可选。滚动时是否强制刷新图像。允许值: true | false

4.脚本接口 : $ionicListDelegate
如果需要从脚本中控制列表元素,可以使用$ionicListDelegate 服务:
showReorder([showReorder]) - 显示/关闭排序按钮
showReorder 的允许值为: true | false。可以使用一个作用域上的表达式
showDelete([showDelete]) - 显示/关闭删除按钮
showDelete 的允许值为: true | false。可以使用一个作用域上的表达式
canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮
canSwipeItems 的允许值为: true | false。可以使用一个作用域上的表达式
closeOptionButtons() - 关闭所有选项按钮

交流QQ群:187269144

QQ群2:438443293

QQ群3:248403526


时间: 2024-11-20 16:45:11

ionic 列表的相关文章

Ionic学习笔记3_ionic指令简单布局

1)   添加引用类库(ionic样式和ionic js文件) 2)   标题栏,页脚栏,内容区 3)   Js引入ionic类库,添加页面操作方法和对象 4)   数据初始化 5)   Html页面绑定方法和对象 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport"

161914、ionic指令简单布局

1) 添加引用类库(ionic样式和ionic js文件) 2) 标题栏,页脚栏,内容区 3) Js引入ionic类库,添加页面操作方法和对象 4) 数据初始化 5) Html页面绑定方法和对象 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q

Web前端开发推荐阅读书籍、学习课程下载

转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的.书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高. 而如果深一脚浅一脚的学习,写出代码的质量会参差不齐.初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码. 前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习

Ionic Js九:列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list> <ion-item ng-repeat="item in items"> Hello, {{item}}! </ion-item> </ion-list> 高级用法: 缩略图,删除按钮,重新排序,滑动 <ion-list ng-contr

ionic 2 起航 控件的使用 客户列表场景(四)

接下来,我们的客户列表要怎么刷新数据呢? 我们不会安卓开发,不会ios开发,没关系,我们还有ionic 2.ionic 2的控件 Ion-refresher 轻松帮我们搞掂. <!--下拉刷新--> <ion-refresher (refresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull

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

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

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

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

稍复杂的ionic例子:显示一个列表,并且允许点击进入列表项

这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>angular-demo3</title> <link href="lib/ionic/css/ionic.css" rel="styleshe

用ionic做的列表向左滑动,出现删除等功能按钮

废话不多说,直接上代码 html代码: <!--列表--><ul class="lists" ng-repeat="list in lists"> <ion-list> <ion-item> <!--这是列表--> <li class="ub ub-ac" ng-click="goApplyDetail(list.keyid)" > <div cla