欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:13:02
本文介绍了react-native listview下拉刷新上拉加载实现。分享给大家,具体如下: 先看效果图 下拉刷新 react native提供了一个...

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

先看效果图

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滑动结束的标志是以该值作为判断条件的

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