antd-mobile中的PullToRefresh组件（拉动刷新）

最新推荐文章于 2025-10-23 10:27:30 发布

原创最新推荐文章于 2025-10-23 10:27:30 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

7 篇文章

订阅专栏

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>