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打开代码

谢谢

安迪泥炭