Dieses Mal werde ich Ihnen zeigen, wie Sie mit dem Konflikt zwischen Mint-UI Loadmore Pull-Up Loading und Pull-Down Refresh umgehen können. Was sind die Vorsichtsmaßnahmen für den Umgang mit dem Konflikt zwischen Mint-UI? Loadmore-Pull-Up-Laden und Pull-Down-Aktualisierung? Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Aufgetretene Probleme:
Bei dieser Seite handelt es sich um eine Dual-Tab-Verknüpfung. Das Loadmore-Plugin von mint-ui wird jeweils nur im letzten this.$refs.loadmore.onTopLoaded();
verwendet und dieser .$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();
Gültig, die anderen drei sind ungültig. Diese beiden Sätze bedeuten, dass nach der Abfrage von zum Umzug einmal aufgerufen werden muss
Analyse des Grundes:
Zunächst werden diese vier Module verwendet
<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>
Schnittstelle abgebrochen werden soll, können Sie der Schnittstellenmethode einen Typwert zuweisen. Wenn der Typ top1 ist, beweist dies, dass die Ausführung der Pulldown-Aktualisierung im Gange ist . und das Gleiche gilt für das Pull-up-Laden, die anderen drei Module sind gleich this.$refs.loadmore1.onTopLoaded();
if(type=='top1'){ this.$refs.loadmore1.onTopLoaded(); }else if(type=='bottom1'){ this.$refs.loadmore1.onBottomLoaded(); }
Lösung
Ich habe am Anfang viele Versuche unternommen, z. B. die Verwendung von v-if, um die anderen drei Module auszublenden, wenn ein Modul angezeigt wird, aber es traten immer unterschiedliche Probleme auf. Später wurden die Parameter nach ref in ref="loadmore" in vier verwendet Die Unterscheidung ist zum Beispiel „loadmore1“, „loadmore2...“, so verstehe ich es, siehe Die Funktion hier besteht darin, eine Im Anhang finden Sie den Link zur offiziellen Vue-Websitehttps://vuejs.org/
mint-ui:https://mint-ui.github.io/docs/#/en2/loadmorePS: Probleme mit der Mint-UI beim Laden weiterer Komponenten
loadTop(){ this.$store.dispatch('getNewsList',{channelId:this.id,page:0,size:this.size}); this.$refs.loadmore.onTopLoaded(); },
this.$refs.loadmore.onTopLoaded();
Das obige ist der detaillierte Inhalt vonMint-UI-Loadmore-Pull-Up-Lade- und Pull-Down-Aktualisierungskonfliktbehandlungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!