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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
可以将word转成html的js代码
Apr 11 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
使用node.js搭建服务器
May 20 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 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
德生S2000电路分析
2021/03/02 无线电
CodeIgniter多语言实现方法详解
2016/01/20 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
详解jquery选择器的原理
2017/08/01 jQuery
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
python操作MongoDB基础知识
2013/11/01 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python中requests模块的使用方法
2015/04/08 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
银行求职自荐书
2014/06/25 职场文书
民主生活会发言材料
2014/10/20 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
如何基于python实现单目三维重建详解
2022/06/25 Python