Ausführliche Erläuterung des Falles des Hinzufügens einer oberen Pulldown-Aktualisierung und einer unteren Klick-Aktualisierung in React Native ListView auf einem mobilen Endgerät-js-Tutorial-php.cn

Ausführliche Erläuterung des Falles des Hinzufügens einer oberen Pulldown-Aktualisierung und einer unteren Klick-Aktualisierung in React Native ListView auf einem mobilen Endgerät

php中世界最好的语言

Freigeben： 2018-05-15 10:36:42

Original

1467 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Fall des Hinzufügens von Top-Pulldown-Aktualisierung und Bottom-Click-Aktualisierung in React Native ListView auf dem mobilen Endgerät ausführlich erläutern. Welche Vorsichtsmaßnahmen gibt es für das Hinzufügen von Top-Pulldown-Aktualisierung und Bottom-Click-Aktualisierung? In React native ListView auf dem mobilen Endgerät werfen wir einen Blick auf praktische Fälle.

1. Klicken Sie unten auf „Aktualisieren“

1.1 Fügen Sie zunächst eine -Schaltfläche hinzu

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

Nach dem Login kopieren

Fügen Sie ListView eine renderFooter-Methode hinzu, um das untere Element zu zeichnen. Zeigen Sie darin eine Schaltfläche an.

Schaltflächenverarbeitungslogik:

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

Nach dem Login kopieren

Nach dem Klicken wird die Netzwerkverarbeitung durchgeführt und die letzte ID wird ebenfalls an den Server übergeben, und der Server gibt die 20 Datensätze nach dieser ID zurück. Dann resetState.

2. Head-Pulldown-Aktualisierung

ReshControl in ListView hinzufügen

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

Nach dem Login kopieren

Laden Sie die neuesten Header-Daten und fügen Sie sie zu this.State hinzu

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung von dynamischem und statischem Paging in Laui

Detaillierte Erläuterung der Schritte zum Implementieren der Winkelrouting-Hervorhebung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Falles des Hinzufügens einer oberen Pulldown-Aktualisierung und einer unteren Klick-Aktualisierung in React Native ListView auf einem mobilen Endgerät. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!