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 <Scrollview> or <ListView>.

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

// 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(
        <ScrollView>
            <RefreshControl isRefreshing={this.state.isRefreshing} style={{width:750,height:100}} onRefresh={this.handleRefresh}>
                <Text>{this.state.refreshText}</Text>
            </RefreshControl>
            {/* Content */}
        <ScrollView>
    )
}

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