react-native ListView下拉刷新上拉加载实现代码

前端之家收集整理的这篇文章主要介绍了react-native ListView下拉刷新上拉加载实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家,具体如下:

先看效果

下拉刷新

React Native提供了一个组件可以实现下拉刷新方法RefreshControl

使用方法

} //...

在视图加载的时候的时候,将refreshing设置为true,数据加载完成设置为false即可

上拉加载

利用ListView里的onEndReached方法实现,ListView在滚动到最后一个Cell的时候,会触发onEndReached方法

先在ListView里添加一个Footer

加载更多... : null; return } style={[styles.listView]} dataSource={ds.cloneWithRows(this.state.dataSource)} enableEmptySections={true} renderRow={this._renderRow.bind(this)} onEndReachedThreshold={5} onEndReached={this._onEndReached.bind(this)} renderFooter={() => FooterView} /> }

方法_onEndReached里将Footer显示出来,在数据加载完成之后,再隐藏掉Footer

说明

ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用,它的意思是:像素的临界值,该属性和onEndReached配合使用,因为onEndReached滑动结束的标志是以该值作为判断条件的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章