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实现两个值相加alert出来精确到指定位
Sep 25 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
echarts整合多个类似option的方法实例
2018/07/10 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python骚操作之动态定义函数
2019/03/26 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python3让print输出不换行的方法
2020/08/24 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
计算机求职信
2014/07/02 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL