react pull to refresh 다운로드 - react pull to refresh 소스 코드 다운로드

react pull to refresh

웹사이트 데이터

1.0.0

다운로드

반응 -Pull-to-refresh

npm install react-pull-to-refresh -S

웹의 구성 요소를 새로 고칠 수 있습니다.

Andy Peatling의 웹에 대한 새로 고침을 기반으로 웹.

데모 GIF

용법

새로 고침 핸들러 기능은 풀 로프 프리쉬 구성 요소가 완료되면 resolve 및 reject 수행합니다.

 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 ;
}