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>