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