扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
学习要点:
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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流