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>