Heim > Artikel > Web-Frontend > 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
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> ) }
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('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); }); }
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> ); } }
Laden Sie die neuesten Header-Daten und fügen Sie sie zu this.State hinzu
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); }); }
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 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!