RN使用scrollview实现下拉刷新和上拉刷新

2016-06-21 14:54:00
hainuo
原创 3573
下拉刷新比较简单 可以通过scrollview的refresh属性调用refreshcontroller来做到。但是上拉刷新就不是这么好弄了,他需要使用onScroll属性来检测是否已经到了scrollview的底部 具体代码示例``` handleScroll(e) { console.log(e.nativeEvent); let scrollH = e.nativeEvent.contentSize.height; let y = e.nativeEvent.contentOffset.y; let height = e.nativeEvent.layoutMeasurement.height; console.log('handle scroll', scrollH, y, height); if (scrollH - height < y) this._onEndfresh(); } //上拉刷新 _onRefresh() { this.setState({ refreshing: true }); console.log('下拉刷新'); fetch('https://www.baidu.com').then(()=> { this.setState({refreshing: false}); }) } //上拉刷新 _onEndfresh() { this.setState({ refreshing: true }); // alert('aaa'); console.log('上拉刷新'); setTimeout(()=>fetch('https://www.baidu.com').then(()=> { this.setState({refreshing: false}); }) ,5000); } render() { return ( { _scrollView = scrollView; }} automaticallyAdjustContentInsets={false} onScroll={(e)=>this.handleScroll(e)} refreshControl={ } scrollEventThrottle={200} style={styles.scrollView}> {THUMBS.map(createThumbRow)} {this.state.refreshing? : { _scrollView.scrollTo({y: 0}); }}> Scroll to top } ) }```视频已经录制 可以到这里来领取http://v.youku.com/v_show/id_XMTYxNTcxMDYzMg==.html
发表评论
壹 加 捌 =
评论通过审核后显示。