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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JQuery实现自定义对话框的代码
Jun 15 Javascript
JavaScript基本编码模式小结
May 23 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
js获取图片的base64编码并压缩
Dec 05 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
图象函数中的中文显示
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
详解React 条件渲染
2020/07/08 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Python实现的矩阵类实例
2017/08/22 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
计算机本科生自荐信
2013/10/15 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
大一军训感言
2014/01/09 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
新学期标语
2014/06/30 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL