ionic 中的下拉重新整理
阿新 • • 發佈:2018-11-04
ionic 頁面中加入下拉重新整理ion-refresh
<!-- 下拉重新整理 --> < ion-refresher ( ionRefresh)= "doRefresh($event)" > < ion-refresher-content pullingIcon= "ios-arrow-round-down-outline" pullingText= "下拉重新整理" refreshingSpinner</ ion-refresher-content > </ ion-refresher >
一、ion-refresher中的屬性
closeDuration 關閉 refresher 需要多少毫秒。預設值是 280。
enabled 是否啟用
pullMin 預設值為60 使用者必須拉下的最小距離,直到重新整理者進入重新整理狀態為止
pullMax 預設=pullMin+60 拖至重新整理狀態的最大距離將自動進入重新整理狀態。預設情況下, 拉力最大即 pullmin + 60 自 動重新整理
snapbackDuration 重新整理者需要多少毫秒才能恢復至重新整理狀態
二、ion-refresher-content的重要屬性
pullingIcon 下拉的圖示
pullingText 下拉載入顯示的文字
refreshingSpinner 釋放的時候的載入圖示 ???
refreshingText 釋放的時候載入的文字
三、對應頁面的業務邏輯中寫下拉更新的方法
doRefresh(refresh){ setTimeout(() =>{ refresh.complete();//當資料請求完成時呼叫 }, 3000) }