學習要點：
1. ion-list ion-item
2. ion-list ion-item 成員
3. collection-repeat : 高性能的 ng-repeat
4. 腳本接口 : $ionicListDelegate

創(chuàng)新互聯主營拉薩網站建設的網絡公司,主營網站建設方案,app軟件開發(fā),拉薩h5成都小程序開發(fā)搭建,拉薩網站營銷推廣歡迎拉薩等地區(qū)企業(yè)咨詢

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。這兩種列表 都產生內嵌的
效果，區(qū)別在于 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 指令來掛接點擊事件監(jiān)聽函數，其原型如下：
var optionListener = function(item){...}
ionic 在捕捉到用戶的點擊事件時，將調用此函數，并傳入當前的 item 對象。
ion-delete-button- 刪除按鈕

一個 ion-item 內最多有一個刪除按鈕。刪除按鈕在顯示時總是位于成員的最 左端。可以使
用 ion-list的 show-delete屬性顯示或隱藏刪除按鈕
使用 ng-click 指令來掛接點擊事件監(jiān)聽函數，其原型如下：
var deleteListener = function(item){...}
ionic 在捕捉到用戶的點擊事件時，將調用此函數，并傳入當前的 item 對象。
ion-reorder-button- 重排按鈕

一個 ion-item 內最多有一個重排按鈕。重排按鈕在顯示時總是位于成員的最右端。可以使用
ion-list的 show-reorder屬性顯示或隱藏重排按鈕
使用 on-reorder 屬性來掛接重排事件監(jiān)聽函數，其原型如下：
var reorderListener = function(item,$fromIndex,$toIndex){...}
ionic 在捕捉到用戶的重排事件時，將調用此函數，并傳入當前的 item 對象、原 序號及目標
序號。
3. collection-repeat :高性能的 ng-repeat

collection-repeat指令和 ng-repeat指令類似，但是更適用于大數據量 的列表數據，這是因
為，它只將處于可視區(qū)域的數據渲染到 DOM 上：
<any collection-repeat="...">...</any>
collection-repeat指令接受一個枚舉表達式，同時可以附加以下的屬性：
item-width- 可選。聲明重復元素的寬度
item-height- 可選。聲明重復元素的高度
item-render-buffer- 可選。需要載入渲染緩沖區(qū)的可視數據前后的數量。默認為 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

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文題目：ionic列表-創(chuàng)新互聯
標題URL：http://chinadenli.net/article18/cddcdp.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站導航、網站建設、標簽優(yōu)化、建站公司、定制開發(fā)、外貿建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯