nuke-refresh-control

RefreshControl

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

---

设计思路

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

// 完整 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、建议联系 @翊晨
• 钉钉交流群