antd-mobile中的PullToRefresh組件(拉動刷新)

  PullToRefresh組件:(往下拉or往上刷新)

 onRefresh的函數內容:

 //refresh
  onRefresh = () => {
    this.setState({ refreshing: true });
    this.getPatientList(); //請求數據的函數
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 1000);
  };

 PullToRefresh放在要刷新的內容的上一級,具體的看官網https://mobile.ant.design/components/pull-to-refresh-cn/

屬性 說明 類型 默認值
direction 拉動方向,可以是 up 或 down String down
distanceToRefresh 刷新距離 number 25
refreshing 是否顯示刷新狀態 bool false
onRefresh 必選, 刷新回調函數 () => void -
indicator 指示器配置 { activate: ReactNode, deactivate: ReactNode, release: ReactNode, finish: ReactNode } Object -
damping 拉動距離限制, 建議小於 200 number 100
<div>
  <PullToRefresh
          damping={200}
          refreshing={this.state.refreshing}
          onRefresh={this.onRefresh}
          style={{
            height: this.state.height,
            overflow: 'auto',
          }}
          ref={el => this.ptr = el}
          distanceToRefresh={80}
        >      
      <Tabs>
          ...
      </Tabs>
  </PullToRefresh>
</div>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章