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 或 downStringdown
distanceToRefresh刷新距离number25
refreshing是否显示刷新状态boolfalse
onRefresh必选, 刷新回调函数() => void-
indicator指示器配置 { activate: ReactNode, deactivate: ReactNode, release: ReactNode, finish: ReactNode }Object-
damping拉动距离限制, 建议小于 200number100
<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>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值