méthode de gestion des conflits de chargement et d'actualisation déroulant mint-ui loadmore pull-up

Cette fois, je vais vous expliquer comment gérer le conflit entre le chargement du pull-up mint-ui loadmore et l'actualisation du pull-down. Quelles sont les précautions pour gérer le conflit entre mint-ui. loadmore pull-up chargement et pull-down rafraîchissement ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Problèmes rencontrés :

Cette page est une liaison à deux onglets. Les quatre parties nécessitent des fonctions de chargement pull-up et d'actualisation pull-down. Le plug-in loadmore de mint-ui est utilisé respectivement. Après avoir ajouté le chargement pull-up, seul le dernier this.$refs.loadmore.onTopLoaded();. et ce .$refs.loadmore.on<a href="http://www.php.cn/wiki/906.html" target="_blank">Bottom<code>this.$refs.loadmore.on<a href="http://www.php.cn/wiki/906.html" target="_blank">Bottom</a>Loaded();Loaded();

Valide, les trois autres sont invalides. Ces deux phrases signifient que doit être appelé une fois après avoir interrogé pour le déménagement

Analyse de la raison :

Tout d'abord, ces quatre modules sont utilisés 　　　　

<mt-loadmore :top-method="loadTop"
     :bottom-method="loadBottom"
     :bottom-all-loaded="allLoaded"
     ref="loadmore">
     <ul class="ul-box">
     <li class="list-cell ta-line" v-for="(item,index) in gridNoPayMail" :key="item+&#39;walletdetail1&#39;" @click="choose(index)">
      <p class="checkboxOne">
      <input type="checkbox" name="checkInput" :id="&#39;id1&#39; + index" v-model="item.checked" disabled/>
      <label :for="&#39;id1&#39; + index"></label>
      </p>
      <p class="left-text">
      <p class="award">{{item.a}}</p>
      <p class="time">{{item.b}}</p>
      </p>
      <p class="right-text">
      <p class="addinfo">￥{{item.c}}</p>
      </p>
     </li>
     </ul>
    </mt-loadmore>

Top-method, bottom-method et bottom-all-loaded reçoivent respectivement des noms

d'événement différents. Les deux premiers événements représentent respectivement le pull-down et le pull-up. Si le troisième est vrai, bottomMethod le fera. ne soit pas chargé à nouveau, généralement lors de l'entrée dans la page, nous avons par défaut la valeur false

. Pour déterminer s'il faut annuler le chargement après avoir appelé avec succès l'

interface , vous pouvez donner à la méthode d'interface une valeur de type. Si le type est top1, cela prouve que l'exécution de l'actualisation déroulante est en cours , et il en va de même pour le chargement pull-up, les trois autres modules sont les mêmes this.$refs.loadmore1.onTopLoaded();

if(type=='top1'){
   this.$refs.loadmore1.onTopLoaded();
   }else if(type=='bottom1'){ 
this.$refs.loadmore1.onBottomLoaded();
｝

Une fois arrivé ici, le problème décrit au début apparaîtra,

Solution

J'ai fait beaucoup de tentatives au début, comme utiliser v-if pour masquer les trois autres modules lorsqu'un module est affiché, mais différents problèmes sont toujours survenus. Plus tard, les paramètres après ref dans ref="loadmore" ont été utilisés dans quatre. modules Par exemple, la distinction est Loadmore1, Loadmore2..., voici comment je la comprends, réf. La fonction ici est de spécifier un

index ID pour le sous-composant, qui est similaire à l'identifiant de l'élément dom. Les noms d'identifiant ne peuvent pas être les mêmes, nous changeons donc la référence en différents paramètres et le. le problème est résolu,

Ci-joint le lien du site officiel de Vue

https://vuejs.org/

 mint-ui：https://mint-ui.github.io/docs/#/en2/loadmore

PS : problèmes d'attention aux composants Mint-ui Loadmore

loadTop(){
    this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size});
    this.$refs.loadmore.onTopLoaded();
},

Par exemple, lorsque vous effectuez une actualisation déroulante, n'oubliez pas d'ajouter

this.$refs.loadmore.onTopLoaded();

dans la fonction d'actualisation déroulante. Cette ligne de code, sinon le chargement sera toujours affiché après le chargement déroulant, et le chargement ne sera pas terminé.

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 :

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!