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 相关文章推荐
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php支付宝APP支付功能
2020/07/29 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
py中的目录与文件判别代码
2008/07/16 Python
python基础教程之序列详解
2014/08/29 Python
Python 正则表达式的高级用法
2016/12/04 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
运动会跳远加油稿
2014/02/20 职场文书
师德师风个人反思
2014/04/28 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android