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 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
layui table 参数设置方法
Aug 14 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
解决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防止form重复提交的方法
2013/07/01 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php接口技术实例详解
2016/12/07 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
python获得图片base64编码示例
2014/01/16 Python
python定时器使用示例分享
2014/02/16 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
浅谈python标准库--functools.partial
2019/03/13 Python
安装python及pycharm的教程图解
2019/10/10 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
党员的自我评价范文
2014/01/02 职场文书
家长会邀请书
2014/01/25 职场文书
业绩考核岗位职责
2014/02/01 职场文书
新年团拜会主持词
2014/04/02 职场文书
英语辞职信范文
2015/02/28 职场文书