react pull to refresh

反應扣至淘汰

npm install react-pull-to-refresh -S

刷新網絡組件的拉動。

基於安迪泥炭的拉力，以刷新網絡

用法

您的刷新處理程序功能可以resolve ，並reject在完成後告訴pulltorefresh組件。

 async handleRefresh ( ) {
  await asyncCode ( ) ;
}

您想在哪裡渲染組件：

 < 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

將示例中的CSS用作起點。

所有道具

 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>
• 圖標： ReactNode
  • 預設:

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

• 加載： ReactNode
  • 預設:

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

• 殘疾人： boolean
• className ： string
• 樣式： object
• distancetorefresh ： number
  • 默認值： 70
• 阻力： number
  • 默認值： 2.5
• 錘子： 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 ;
  } 

運行代碼

1. 結帳倉庫
2. 運行npm install
3. 運行npm run play以從/playground打開代碼

謝謝

安迪泥炭