# RefreshControl

- category: Components
- chinese: 含 h5 版本的下拉刷新组件
- type: 基本

---

## 设计思路
RefreshControl 是一个能够实现下拉刷新的子组件，且父组件只能是 `<Scrollview>` 或 `<ListView>`。


````js
// 完整 demo 请参考 ScrollView 组件的 Demo

//初始 state
constructor() {
  super();
  this.state={
    isRefreshing: false,
    refreshText: '↓ 下拉刷新',
    data:[
        //...省略部分代码
    ]
  }
}

handleRefresh =()=>{
  this.setState({
    isRefreshing: true,
    refreshText: '加载中',
  });
  // mock ajax 此处替换为你的 ajax 请求
  setTimeout(() => {
    this.setState({
      isRefreshing: false,
      data: [
          // data 字段变更
      ],
      refreshText: '↓ 下拉刷新',
    });

  }, 1000);
}
render(){
  return(
    <ScrollView>
      <RefreshControl isRefreshing={this.state.isRefreshing} style={{width:750,height:100}} onRefresh={this.handleRefresh}>
          <Text>{this.state.refreshText}</Text>
      </RefreshControl>
      {/* 此处为你的内容区域 */}
    <ScrollView>
  )
}
````

## API

| 参数         | 说明                               | 类型     | 默认值 |
| ------------ | ---------------------------------- | -------- | ------ |
| isRefreshing | 是否展示                           | false    |
| onRefresh    | refresh 事件                       | Function |
| style        | 样式，必须声明宽高否则可能无法展示 | object   |        |


## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />