首頁 >web前端 >js教程 >React native ListView在行動端中加入頂部下拉式刷新與底部點擊刷新案例詳解

React native ListView在行動端中加入頂部下拉式刷新與底部點擊刷新案例詳解

php中世界最好的语言原創: 2018-05-15 10:36:421462瀏覽

這次帶給大家React native ListView在行動端新增頂部下拉刷新與底部點擊刷新案例詳解，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={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(&#39;addMoreOnFoot&#39;)
 // console.log(&#39;addMoreOnFoot&#39;)
 const url = &#39;http://127.0.0.1/getFootContent?lastid=&#39; + this.state.footLastId + &#39;&count=20&isTop=0&#39;
 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][&#39;id&#39;],
    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 = &#39;http://127.0.0.1/getFootContent?lastid=&#39; + this.state.topLastId + &#39;&count=20&isTop=1&#39;
  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][&#39;id&#39;],
     jsondata:rowData,
     data:new ListView.DataSource({rowHasChanged:(r1, r2) => r1 != r2}).cloneWithRows(rowData),
    })
    }
  })
  .catch((error)=>{
   alert(error);
  });
 }

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！