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-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-05-15 10:36:42

original

1467 Les gens l'ont consulté

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

1.1 Ajoutez d'abord un bouton

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

Copier après la connexion

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(&#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);
 });
}

Copier après la connexion

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

Copier après la connexion

Chargez les dernières données d'en-tête et ajoutez-les à 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);
  });
 }

Copier après la connexion

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!