React native ListView 增加顶部下拉刷新和底下点击刷新示例


Posted in Javascript onApril 27, 2018

1. 底部点击刷新

1.1 先增加一个按钮 

React native ListView 增加顶部下拉刷新和底下点击刷新示例

render() {
  if(!this.state.data){
   return(
     <Text>Loading... </Text>
   )
  }else{
   return(
     <ListView
      refreshControl={
       <RefreshControl 
         refreshing = {false}
         onRefresh = {this.reloadWordData.bind(this)}
       />
      }
      dataSource={this.state.data}
      renderRow={(rowData)=>this.renderRow(rowData)}
      renderFooter={this.renderFooter.bind(this)}
     >
      </ListView>
 
   );
  }
 }
 
renderFooter(){
   return (
   <View style={{marginVertical: 10, marginBottom:20}} >
      <Button
       onPress={this.addMoreOnFoot.bind(this)}
       title="点击载入更多"
      />
    </View>
   )
 }

给ListView 增加一个renderFooter 方法来绘制底部元素。在里面显示一个按钮。

按钮处理逻辑:

addMoreOnFoot(){
 // alert('addMoreOnFoot')
 // console.log('addMoreOnFoot')
 const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.footLastId + '&count=20&isTop=0'
 fetch(url)
 .then((response)=>response.json())
 .then((jsondata)=>{
   if (jsondata.data && jsondata.data.length > 0){
   const rowData = this.state.jsondata.concat(jsondata.data);
   this.setState({
    footLastId:jsondata.data[jsondata.data.length - 1]['id'],
    jsondata:rowData,
    data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
   })
   }
 })
 .catch((error)=>{
  alert(error);
 });
}

点击后进行网络处理,把之前最后一条id也传给服务器,让服务器返回这个id后面的20条记录。然后重新setState即可。

2. 头部下拉刷新

ListView中增加RefeshControl

render() {
  if(!this.state.data){
   return(
     <Text>Loading... </Text>
   )
  }else{
   return(
 
     <ListView
      refreshControl={
       <RefreshControl 
         refreshing = {false}
         onRefresh = {this.reloadWordData.bind(this)}
       />
      }
      dataSource={this.state.data}
      renderRow={(rowData)=>this.renderRow(rowData)}
      renderFooter={this.renderFooter.bind(this)}
     >
      </ListView>
 
   );
  }
 }

载入最新的头部数据添加到this.State中

reloadWordData(){
  // alert(this.state.topLastId)
  const url = 'http://127.0.0.1/getFootContent?lastid=' + this.state.topLastId + '&count=20&isTop=1'
  fetch(url)
  .then((response)=>response.json())
  .then((jsondata)=>{
    if (jsondata.data && jsondata.data.length > 0){
    const rowData = jsondata.data.concat(this.state.jsondata);
    this.setState({
     topLastId:jsondata.data[0]['id'],
     jsondata:rowData,
     data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
    })
    }
  })
  .catch((error)=>{
   alert(error);
  });
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
es6中let和const的使用方法详解
Feb 24 Javascript
React Native日期时间选择组件的示例代码
Apr 27 #Javascript
vue实现点击展开点击收起效果
Apr 27 #Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 #Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 #Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 #Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 #Javascript
Node.js文件编码格式的转换的方法
Apr 27 #Javascript
You might like
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
详解Python中find()方法的使用
2015/05/18 Python
Python实现的科学计算器功能示例
2017/08/04 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
中软国际Java程序员机试题
2012/08/19 面试题
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
运动会横幅标语
2014/06/17 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
五年级学生期末评语
2014/12/26 职场文书
Golang并发工具Singleflight
2022/05/06 Golang
SQL Server中锁的用法
2022/05/20 SQL Server