欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-28 12:52:04
1. 底部点击刷新 1.1 先增加一个按钮  render() { if(!this.state.data){ return...

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

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