react-native ListView下拉刷新上拉加载实现代码
程序员文章站
2022-05-14 19:13:02
本文介绍了react-native listview下拉刷新上拉加载实现。分享给大家,具体如下:
先看效果图
下拉刷新
react native提供了一个...
本文介绍了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滑动结束的标志是以该值作为判断条件的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Vue-router 类似Vuex实现组件化开发的示例
下一篇: JS数组操作之增删改查的简单实现