DropRefresh 下拉刷新组件

何时使用#

该组件只存在于native端，html5场景并不渲染。

如需满足多端场景，需用户结合自己的布局规则在H5自行实现。

说明#

refresh组件的高度必须超过视窗屏幕，使得滚动效果的出现
组件内的一层子组件必须指定ref='RefreshTitle,用于区分head和content的内容，具体用法可以参考demo

API#

属性	说明	类型	默认值
onRefresh	下拉刷新触发的事件，可选择在该事件中重新拉取数据	function	无
style	最外层scollview的样式，可指定宽稿	object	{}
display	是否显示刷新动作，建议在拉取数据完毕后手动控制动作的显示隐藏，可参考demo	string	show,可选值hide

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text,TouchableHighlight} from 'nuke-components';
import { DropRefresh } from 'nuke';
import {mount} from 'nuke-mounter';
import Util from 'nuke-util';
let Dimensions=Util.Dimensions;

let {height} = Dimensions.get('window');

const styles ={
    wrapper:{
      width:'750rem',
      height:'2000rem'
    },
    refresh:{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }
}

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            show:'show'
        }
    }

    refreshHandler(){
        console.log('下拉刷新了');
        this.setState({
           show:'show' 
        });
        setTimeout(()=>{
            this.setState({
                 show:'hide' 
            });
        },2000);
    }

    render() {
        return (
                <DropRefresh onRefresh = {this.refreshHandler.bind(this)} style={styles.wrapper}>
                    <View ref="refreshTitle"  show={this.state.show}>
                      <Text>下拉刷新333333</Text>
                      <Text>222222</Text>
                    </View>
                    <Text>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</Text>
                    <Text>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</Text>
                </DropRefresh>

        );
    }
}
mount(<App/>, mountNode);

下拉刷新

下拉刷新，只在native端可用。