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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
DWR Ext 加载数据
Mar 22 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 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
php mysql数据库操作分页类
2008/06/04 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
有关php运算符的知识大全
2011/11/03 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
详解使用vue实现tab 切换操作
2017/07/03 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
python3下载抖音视频的完整代码
2019/06/05 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
python提取log文件内容并画出图表
2019/07/08 Python
python+tkinter实现学生管理系统
2019/08/20 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
python接入支付宝的实例操作
2020/07/20 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
聘用意向书
2014/07/29 职场文书
运动会广播稿100字
2014/09/14 职场文书
全陪导游词
2015/02/04 职场文书
入党转正介绍人意见
2015/06/03 职场文书
单位政审意见范文
2015/06/04 职场文书
小学运动会通讯稿
2015/07/18 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang