# nuke-refresh-control

> 下拉刷新组件

Latest version **2.3.12** (published 2019-09-26) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install nuke-refresh-control
pnpm add nuke-refresh-control
yarn add nuke-refresh-control
bun add nuke-refresh-control
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.12 |
| Published | 2019-09-26 |
| First published | 2017-05-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 35.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leanhunter |
| Maintainers | doub, leanhunter |
| Keywords | nuke, pull-to-refresh, refresh-control |

## Links

- npm: https://www.npmjs.com/package/nuke-refresh-control
- Repository: git@gitlab.alibaba-inc.com:nuke/refresh-control
- npm.io page: https://npm.io/package/nuke-refresh-control

## Dependencies (2)

- [nuke-env](https://npm.io/package/nuke-env.md) ^2.3.12
- [nuke-view](https://npm.io/package/nuke-view.md) ^2.3.12

## Recent versions

- 2.3.12 (latest) — 2019-09-26
- 2.1.3 (beta) — 2018-08-15
- 2.3.11 — 2019-09-26
- 2.3.10 — 2019-09-26
- 2.3.9 — 2019-09-26
- 2.3.8 — 2019-09-25
- 2.3.7 — 2019-07-24
- 2.3.6 — 2019-07-19
- 2.3.5 — 2019-07-02
- 2.3.4 — 2019-05-10
- 2.3.3 — 2019-04-28
- 2.3.2 — 2019-01-15
- 2.3.0 — 2018-11-14
- 0.0.7 — 2018-10-29
- 2.2.29 — 2018-10-09
- … 40 more at https://npm.io/package/nuke-refresh-control/versions

## README

# 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" />

---
_Source: https://npm.io/package/nuke-refresh-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._