React native ListView 增加顶部下拉刷新和底下点击刷新示例

2024-04-03 01:38:16

1. 底部点击刷新

1.1 先增加一个按钮

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);
  });
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

react-native中ListView组件点击跳转的方法示例
react-native组件中NavigatorIOS和ListView结合使用的方法
react-native ListView下拉刷新上拉加载实现代码
React Native之ListView实现九宫格效果的示例
ReactNative列表ListView的用法
React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）

React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）

在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum = 1; /
react-native中ListView组件点击跳转的方法示例

前言在上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明使用 this.prop
React Native之ListView实现九宫格效果的示例

概述在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性: dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合. renderRow:渲染某一行,类似于BaseAdapter中的getItem方法. onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要
ReactNative列表ListView的用法

最近在学习ReactNative,本文介绍了ReactNative列表ListView的用法,分享给大家,也给自己留个笔记 ListView 在Android中,如果我们需要显示一个ListView,有两项是比不可少的,首先是ListView的数据源,其次是ListView每个item的样式.ReactNative中一样.首先我们来看一个简单的例子: constructor(props) { super(props); var ds = new ListView.DataSource({rowH
react-native组件中NavigatorIOS和ListView结合使用的方法

前言本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先看效果使用方法 index.ios.js import React, {Component} from 'react'; import { AppRegistry, NavigatorIOS } from 'react-native'; import NewsList from './components/
react-native ListView下拉刷新上拉加载实现代码

本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List
React native ListView 增加顶部下拉刷新和底下点击刷新示例

1. 底部点击刷新 1.1 先增加一个按钮 render() { if(!this.state.data){ return( <Text>Loading... </Text> ) }else{ return( <ListView refreshControl={ <RefreshControl refreshing = {false} onRefresh = {this.reloadWordData.bind(this)} /> } dataSource={thi
React Native中的RefreshContorl下拉刷新使用

我们知道App中都有下拉加载,在React Native中也有类似的控件一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用用来设置下拉刷新功能是否可用 (5) progre
完美解决手机浏览器顶部下拉出现网页源或刷新的问题

问题如下图所示: 一般处理此类问题都会有一个属性:"event.preventDefault()",但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方式也与其类似. 因为滑动区域是向走的,所以滑动块的顶部到浏览器顶部的距离最大为0(其余为负值[$('#bodycthead').offset().top]),当为0的时候说明已经回到了顶部,继续向下拉动的时候就不应该有反应,可以禁止默认滑动,而向上拉动的时候应该取消默认的滑动,所以应该将"event.preve
Flutter listview如何实现下拉刷新上拉加载更多功能

目录下拉刷新 RefreshIndicator 上拉加载更多总结: 下拉刷新在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式与原生Android一样. 我们可以使用RefreshIndicator组件来实现Flutter中的下拉刷新,下面们还是先来看下如何使用吧 RefreshIndicator 构造方法: const RefreshIndicator({ Key key, @required this.child, this.disp
JS实现从顶部下拉显示的带动画QQ客服特效代码

本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-
Android实现微信右侧顶部下拉对话框

我们使用微信都知道,其右侧顶部有一个下拉对话框,我们可以执行添加好友,扫一扫等功能,今天我们就来模仿实现一下这个功能(实现的方式有很多种,我今天只说一种借助透明主题Activity的方式实现:如果有兴趣还可以移步至仿淘宝底部导航栏):本篇的实现的效果如下: 下面就来说一说实现的思路(重要): 第一步:创建弹出对话框布局 <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:andr
Android ScrollView的顶部下拉和底部上拉回弹效果

要实现ScrollView的回弹效果,需要对其进行触摸事件处理.先来看一下简单的效果: 根据Android的View事件分发处理机制,下面对dispatchTouchEvent进行详细分析: 在加载布局完成之后,获取ScrollView的第一个子元素,保存它的参数,left top right bottom参数,根据顶部下拉操作和底部上拉操作进行子View的布局参数根据滑动距离改变,ACTION_UP的时候判断是否存在回弹,如果需要则进行动画回弹到原来的位置,可以添加一个回弹结束监听,比如监听回
elementUI实现下拉选项加多选框的示例代码

目录下拉加多选框升级-添加全部选项需求改版完善因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框效果如下图: 封装如下: <template> <div class="select-checked">  <el-select v-model="value" multiple placeholder="请选择" :po
.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

搞了个不是局部刷新的百度搜索框下拉提示效果,在被领导批了n次后,问了n次后,弄出来了,真心感觉我这个小脑壳,太不灵光了,太懒了.记录下来,以免忘记. 大致思路:前台放一个input标签,然后当该标签内的值输入有变化的时候,调用后台代码查询符合条件的数据绑定ListBox. 具体实现思路:一个input,当输入值变化时,调用后台代码.但是怎么调用呢,这个是个问题了,在该input下放一个隐藏的服务器控件button,隐藏该控件,当input里值变化时,调用js,在js里触发该按钮的onclick
微信小程序实现顶部下拉菜单栏

本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.get

React native ListView 增加顶部下拉刷新和底下点击刷新示例

您可能感兴趣的文章:

相关推荐

随机推荐