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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JS控制表单提交的方法
Jul 09 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
element tree树形组件回显数据问题解决
Aug 14 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/18 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
js实现点赞效果
2020/03/16 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
分享几种python 变量合并方法
2022/03/20 Python