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获取事件对象代码
Aug 05 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
js只执行1次的函数示例
Jul 20 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
python 获取字典键值对的实现
2020/11/12 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
护理专业自荐信
2013/12/03 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
运动会入场式解说词
2014/02/18 职场文书
服装设计师求职信
2014/06/04 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
python三子棋游戏
2022/05/04 Python