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


Posted in Javascript onAugust 03, 2017

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

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

Javascript 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 #Javascript
浅谈pc端rem字体设置的问题
Aug 03 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
jQuery 表格工具集
2010/04/25 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python 多线程的实例详解
2017/09/07 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
优秀教师主要事迹
2014/02/01 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
八月迷情观后感
2015/06/11 职场文书
投诉书格式范本
2015/07/02 职场文书