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高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
vue v-on监听事件详解
May 17 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
JavaScript利用html5新方法操作元素类名详解
Nov 27 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中目录,文件操作详谈
2007/03/19 PHP
PHP 编程安全性小结
2010/01/08 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
使用C++为node.js写扩展模块
2015/04/22 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[01:13]这,就是刀塔
2014/07/16 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
房屋改造计划书
2014/01/10 职场文书
《都江堰》教学反思
2014/02/07 职场文书
安全演讲稿大全
2014/05/09 职场文书
毕业生求职信
2014/06/10 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
工作经历证明范本
2015/06/15 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
企业团队精神心得体会
2016/01/19 职场文书
深入理解go slice结构
2021/09/15 Golang
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
关于MySQL中explain工具的使用
2023/05/08 MySQL