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="//m.sbmmt.com/wiki/906.html" target="_blank">Bottom<code>this.$refs.loadmore.on<a href="//m.sbmmt.com/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>

-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“

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

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,

https://vuejs.org/

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

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!