Maison >interface Web >js tutoriel >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+'walletdetail1'" @click="choose(index)"> <p class="checkboxOne"> <input type="checkbox" name="checkInput" :id="'id1' + index" v-model="item.checked" disabled/> <label :for="'id1' + 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 . 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 Ci-joint le lien du site officiel de Vuehttps://vuejs.org/
mint-ui:https://mint-ui.github.io/docs/#/en2/loadmorePS : 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!