RefreshControl

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

---

Design

RefreshControl is a sub component that can pull down and refresh, and the parent component can only be or .

In use, it can be directly used as a container, corresponding to the internal rendering logic.

```js
// Please refer to the ScrollView Component Demo

//初始 state
constructor() {
super();
this.state={
isRefreshing: false,
refreshText: '↓ 下拉刷新',
data:[
//...Omit part of the code
]
}
}

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

}, 1000);
}
render(){
return(


{this.state.refreshText}

{/ Content /}

)
}
```

API

| Argument | Description | Type | Default |
| ------------ | -------------------------------------------------------------- | -------- | ------- |
| isRefreshing | show, or not | false |
| onRefresh | refresh event | Function |
| style | style must be declared wide, otherwise it may not be displayed | object |

The Other

- Chat with @翊晨[yichen] in Dingtalk desktop App Download
- DingTalk Group