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

wKiom1YzNNTwA6QnAABpJB7EdWg142.jpg

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

wKiom1YzNQOSVizfAABqcWAzO0o248.jpg

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

wKiom1YzN93RuWSSAAA9uWm5OvM884.jpg

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() - 关闭所有选项按钮

wKioL1YzOMCCBEGWAAGfZLm3Ar4531.jpg

交流QQ群:187269144 

QQ群2:438443293

QQ群3:248403526



你可能感兴趣的:(ionic)