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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
TypeScript之调用栈的实现
Dec 31 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
详解Python爬虫的基本写法
2016/01/08 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python将视频转换为全字符视频
2019/04/26 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python re.match()用法相关示例
2021/01/27 Python
销售团队激励口号
2014/06/06 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
企业挂职心得体会
2014/09/10 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
摩登时代观后感
2015/06/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
python字符串的一些常见实用操作
2022/04/06 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS