react-nativeListView下拉刷新上拉加载实现代码
本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家,具体如下:
创新互联公司成都企业网站建设服务,提供网站制作、成都网站建设网站开发,网站定制,建网站,网站搭建,网站设计,成都响应式网站建设,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:18982081108
先看效果图

下拉刷新
React Native提供了一个组件可以实现下拉刷新方法RefreshControl
使用方法
} //...
在视图加载的时候的时候,将refreshing设置为true,数据加载完成设置为false即可
上拉加载
利用ListView里的onEndReached方法实现,ListView在滚动到最后一个Cell的时候,会触发onEndReached方法
先在ListView里添加一个Footer
render() {
const FooterView = this.state.loadMore ?
加载更多...
: 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
_onEndReached() {
this.setState({
loadMore: true,
pageNo: this.state.pageNo + 1
});
this._fetchData();
}
说明
ListView里还设置了一个参数onEndReachedThreshold这个参数与onEndReached配合使用,它的意思是:像素的临界值,该属性和onEndReached配合使用,因为onEndReached滑动结束的标志是以该值作为判断条件的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站标题:react-nativeListView下拉刷新上拉加载实现代码
浏览地址:http://www.jxjierui.cn/article/jegiic.html


咨询
建站咨询
