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-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