mint-ui loadmore上拉載入與下拉刷新衝突處理方法

這次帶給大家mint-ui loadmore上拉加載與下拉刷新衝突處理方法，mint-ui loadmore上拉加載與下拉刷新衝突處理的注意事項有哪些，下面就是實戰案例，一起來看一下。

所遇問題：

頁面為雙選項卡聯動，四個部分都需要上拉加載和下拉刷新功能，使用的mint-ui的loadmore插件，分別加上上拉加載後，只有最後一個的this.$refs. loadmore.onTopLoaded();和this.$refs.loadmore.on<a href="//m.sbmmt.com/wiki/906.html" target="_blank">Bottom</a>Loaded();

有效，其他的三個都無效，這兩句話是意思是查詢完要呼叫一次，用於重新定位 

分析原因：

# 首先這四個模組都是用的     

<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，bottom-all-loaded分別賦予不同的事件名，前兩個事件分別表示下拉，上拉，第三個若為真，則bottomMethod 不會再次觸發，一般進入頁面我們預設為false

呼叫介面成功後進行的取消載入的判斷，這裡可以給介面的方法一個type值，如果type為top1時則證明正在進行的是下拉刷新執行this.$refs.loadmore1 .onTopLoaded();，上拉載入同理，其他三個模組同理

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

到了這裡就會出現開始所描述問題，

# 解決方法

一開始做了很多嘗試，例如利用v-if當一個模組顯示時讓其他三個隱藏，總是會出現不同的問題，後來將ref="loadmore"中ref後的參數在四個模組中做了區分例如分別為loadmore1，loadmore2…，這裡我是這樣理解的，ref 在此的作用為子元件指定一個索引 ID，類似dom元素的id，id名不能相同，所以我們將ref修改為不同的參數，問題解決,

#  附Vue官網連結https://vuejs.org/

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

# PS：mint-ui loadmore元件注意問題

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

例如在做下拉刷新的時候，切記在下拉刷新的函數中要加

this.$refs.loadmore.onTopLoaded();

這行程式碼，否則下拉載入之後一直顯示載入中，而不會載入完成。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

以上是mint-ui loadmore上拉載入與下拉刷新衝突處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！