当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react-native ListView下拉刷新上拉加载实现代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

先看效果图

下拉刷新

react native提供了一个组件可以实现下拉刷新方法refreshcontrol

使用方法

<listview
 refreshcontrol={
 <refreshcontrol
 refreshing={this.state.refreshing}
 onrefresh={this._onrefresh.bind(this)}
 />
 }
 //...
</listview>

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

上拉加载

利用listview里的onendreached方法实现，listview在滚动到最后一个cell的时候,会触发onendreached方法

先在listview里添加一个footer

render() {
 const footerview = this.state.loadmore ?
 <view style={styles.footer}>
 <text style=>加载更多...</text>
 </view> : null;
 return <listview
 refreshcontrol={
 <refreshcontrol
  refreshing={this.state.refreshing}
  onrefresh={this._onrefresh.bind(this)}
 />
 }
 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

_onendreached() {
 this.setstate({
 loadmore: true,
 pageno: this.state.pageno + 1
 });
 this._fetchdata();
 }

说明

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网