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指令提供以下属性用来定制列表的外观：
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 上：
...
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width- 可选。声明重复元素的宽度
item-height- 可选。声明重复元素的高度
item-render-buffer- 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为 3
force-refresh-p_w_picpaths- 可选。滚动时是否强制刷新图像。允许值： 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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。