1. 程式人生 > >ionic 中的下拉重新整理

ionic 中的下拉重新整理

ionic 頁面中加入下拉重新整理ion-refresh

<!-- 下拉重新整理 --> < ion-refresher ( ionRefresh)= "doRefresh($event)" > < ion-refresher-content pullingIcon= "ios-arrow-round-down-outline" pullingText= "下拉重新整理" refreshingSpinner
= "circles" >
</ 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) }