react pull to refresh von Download - react pull to refresh

react pull to refresh

Website-Daten

1.0.0

Herunterladen

React-Pull-to-Refresh

npm install react-pull-to-refresh -S

Ein Zug, um die Komponente für das Web zu aktualisieren.

Basierend auf Andy Peatlings Zug zur Aktualisierung für das Web

Demo Gif

Verwendung

Ihre Refresh -Handler -Funktion resolve auf, um die Pulltorefresh -Komponente nach Abschluss zu informieren und reject .

 async handleRefresh ( ) {
  await asyncCode ( ) ;
}

Wo Sie die Komponente rendern möchten:

 < ReactPullToRefresh onRefresh = { handleRefresh } className = "your-own-class-if-you-want" style = { { textAlign : 'center' } } >
  < h3 > Pull down to refresh < / h3>
  < div > { items } < / div>
  < div > etc . < / div>
< / ReactPullToRefresh>

CSS

Verwenden Sie das CSS aus dem Beispiel als Ausgangspunkt.

Alle Requisiten

 export interface ReactPullToRefreshProps extends HTMLAttributes < HTMLDivElement > {
  onRefresh : ( ) => Promise < void > ;
  icon ?: ReactNode ;
  loading ?: ReactNode ;
  disabled ?: boolean ;
  distanceToRefresh ?: number ;
  resistance ?: number ;
  hammerOptions ?: {
    cssProps ?: CssProps | undefined ;
    domEvents ?: boolean | undefined ;
    enable ?: boolean | ( ( manager :  HammerManager ) => boolean ) | undefined ;
    preset ?: RecognizerTuple [ ] | undefined ;
    touchAction ?: string | undefined ;
    recognizers ?: RecognizerTuple [ ] | undefined ;
    inputClass ?: HammerInput | undefined ;
    inputTarget ?: EventTarget | undefined ;
  }

Onrefresh : () => Promise<void>

Symbol : ReactNode

Standard:

 < span className =" genericon genericon-next " > </ span >

Laden : ReactNode

Standard:

 < div className =" loading " >
  < span className =" loading-ptr-1 " > </ span >
  < span className =" loading-ptr-2 " > </ span >
  < span className =" loading-ptr-3 " > </ span >
</ div >

Behindert : boolean
Klassenname : string
Stil : object
DistancetoreFresh : number
- Standard : 70
Widerstand : number
- Standard : 2.5

Hammeroptionen : HammerOptions

 interface HammerOptions {
  cssProps ?: CssProps | undefined ;
  domEvents ?: boolean | undefined ;
  enable ?: boolean | ( ( manager : HammerManager ) => boolean ) | undefined ;
  preset ?: RecognizerTuple [ ] | undefined ;
  touchAction ?: string | undefined ;
  recognizers ?: RecognizerTuple [ ] | undefined ;
  inputClass ?: HammerInput | undefined ;
  inputTarget ?: EventTarget | undefined ;
}