Maison >interface Web >js tutoriel >Explication détaillée du cas de l'ajout de l'actualisation déroulante supérieure et de l'actualisation par clic inférieur dans React Native ListView sur le terminal mobile
Cette fois, je vais vous apporter une explication détaillée du cas d'ajout d'une actualisation déroulante supérieure et d'une actualisation par clic inférieur dans React Native ListView sur le terminal mobile. Quelles sont les précautions à prendre pour ajouter une actualisation déroulante supérieure et une actualisation par clic inférieur. dans React Native ListView sur le terminal mobile ? Voici quelques cas pratiques.
1. Cliquez sur Actualiser en bas
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> ) }
Ajoutez une méthode renderFooter à ListView pour dessiner l'élément du bas. Affichez un bouton à l’intérieur.
Logique de traitement des boutons :
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); }); }
Effectuez le traitement réseau après avoir cliqué, transmettez le dernier identifiant au serveur, et laissez le serveur renvoyer les 20 enregistrements après cet identifiant. Puis réinitialisezState.
2. Actualisation du menu déroulant Head
Ajouter RefeshControl dans 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> ); } }
Chargez les dernières données d'en-tête et ajoutez-les à 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); }); }
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Explication détaillée des étapes pour implémenter la pagination dynamique et statique dans layui
Explication détaillée de la étapes pour mettre en œuvre la mise en évidence du routage angulaire
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!