ionic列表-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)主營拉薩網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),拉薩h5成都小程序開發(fā)搭建,拉薩網(wǎng)站營銷推廣歡迎拉薩等地區(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 屬性是可選的，可用來設(shè)置列表的種類： list-inset | card。這兩種列表 都產(chǎn)生內(nèi)嵌的
效果，區(qū)別在于 card 列表有邊框的陰影效果。
show-delete- 是否顯示成員內(nèi)的 delete 按鈕
show-delete 屬性是可選的。如果在成員內(nèi)有 delete 按鈕（ ion-delete-button），使用這個 屬
性來通知列表是否顯示元素刪除按鈕。允許的值為： true | false

show-reorder- 是否顯示成員內(nèi)的 reorder 按鈕
show-reorder 屬性是可選的。如果在成員內(nèi)有 reorder 按鈕（ ion-reorder-button），使用這個
屬性來通知列表是否顯示元素重排序按鈕。允許的值為： true | false

can-swipe- 是否支持滑動方式顯示成員 option 按鈕
can-swipe 屬性是可選的。如果在成員內(nèi)有 option 按鈕（ ion-option-button），使用這個 屬性
來允許或禁止通過向左滑動成員來打開 option 按鈕。允許的值為：true | false ，默認(rèn)為 true。

2.ion-list ion-item成員
ion-item 有三種預(yù)定義的按鈕：
ion-option-button- 選項按鈕。
一個 ion-item 內(nèi)可以包含多個選項按鈕。選項按鈕是隱藏的，需要用戶向左 滑動成員，以
顯示選項按鈕?？梢允褂?ion-list的 can-swipe屬性允許或禁止 滑動開啟選項按鈕。
使用 ng-click 指令來掛接點擊事件監(jiān)聽函數(shù)，其原型如下：
var optionListener = function(item){...}
ionic 在捕捉到用戶的點擊事件時，將調(diào)用此函數(shù)，并傳入當(dāng)前的 item 對象。
ion-delete-button- 刪除按鈕

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

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

collection-repeat指令和 ng-repeat指令類似，但是更適用于大數(shù)據(jù)量 的列表數(shù)據(jù)，這是因
為，它只將處于可視區(qū)域的數(shù)據(jù)渲染到 DOM 上：
<any collection-repeat="...">...</any>
collection-repeat指令接受一個枚舉表達(dá)式，同時可以附加以下的屬性：
item-width- 可選。聲明重復(fù)元素的寬度
item-height- 可選。聲明重復(fù)元素的高度
item-render-buffer- 可選。需要載入渲染緩沖區(qū)的可視數(shù)據(jù)前后的數(shù)量。默認(rèn)為 3
force-refresh-p_w_picpaths- 可選。滾動時是否強制刷新圖像。允許值： true | false

4.腳本接口 : $ionicListDelegate
如果需要從腳本中控制列表元素，可以使用$ionicListDelegate 服務(wù)：
showReorder([showReorder]) - 顯示/關(guān)閉排序按鈕
showReorder 的允許值為： true | false。可以使用一個作用域上的表達(dá)式
showDelete([showDelete]) - 顯示/關(guān)閉刪除按鈕
showDelete 的允許值為： true | false。可以使用一個作用域上的表達(dá)式
canSwipeItems([canSwipeItems]) - 是否允許通過滑動方式來顯示成員選項按鈕
canSwipeItems 的允許值為： true | false?？梢允褂靡粋€作用域上的表達(dá)式
closeOptionButtons() - 關(guān)閉所有選項按鈕

交流QQ群：187269144

QQ群2：438443293

QQ群3：248403526

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

本文題目：ionic列表-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article18/cddcdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、建站公司、定制開發(fā)、外貿(mào)建站

廣告

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