Mint-UI-Loadmore-Pull-Up-Lade- und Pull-Down-Aktualisierungskonfliktbehandlungsmethode

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+&#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-Methode, Bottom-Methode und Bottom-All-Loaded erhalten jeweils unterschiedliche

-Ereignis--Namen. Die ersten beiden Ereignisse repräsentieren Pull-Down bzw. Pull-Up. Wenn das dritte Ereignis wahr ist, gilt dies für BottomMethod Wird nicht erneut geladen. Beim Betreten der Seite verwenden wir standardmäßig den Wert „false“

Um zu bestimmen, ob der Ladevorgang nach erfolgreichem Aufruf der

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();
｝

Wenn Sie hier ankommen, wird das eingangs beschriebene Problem auftreten,

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

Index--ID für die Unterkomponente anzugeben, die der ID des Dom-Elements ähnelt. Die ID-Namen können nicht identisch sein, daher ändern wir die Referenz in unterschiedliche Parameter und die Problem ist gelöst,

Im Anhang finden Sie den Link zur offiziellen Vue-Website

https://vuejs.org/

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

PS: 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();
},

Wenn Sie beispielsweise eine Pulldown-Aktualisierung durchführen, denken Sie daran,

this.$refs.loadmore.onTopLoaded();

in die Pulldown-Aktualisierungsfunktion einzufügen. Diese Codezeile, andernfalls wird der Ladevorgang immer nach dem Dropdown-Laden angezeigt und der Ladevorgang wird nicht abgeschlossen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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!