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 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
node 命令方式启动修改端口的方法
May 12 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
?繁体转换的class
2006/10/09 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
菜单效果
2006/10/14 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python正则表达式面试题解答
2020/04/28 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Python 线程池用法简单示例
2019/10/02 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
三严三实对照检查材料
2014/09/22 职场文书
单位单身证明样本
2014/10/11 职场文书
八年级作文之友谊
2019/12/02 职场文书