快捷導(dǎo)航

解決Vue使用mint-ui loadmore實(shí)現(xiàn)上拉加載與下拉刷新出現(xiàn)一個(gè)頁(yè)面使用多個(gè)上拉加載后沖突問(wèn)題

更新時(shí)間：2017年11月07日 12:06:51 作者：竹生云野處

這篇文章主要介紹了解決Vue使用mint-ui loadmore實(shí)現(xiàn)上拉加載與下拉刷新出現(xiàn)一個(gè)頁(yè)面使用多個(gè)上拉加載后沖突問(wèn)題,需要的朋友可以參考下

所遇問(wèn)題：

該頁(yè)面為雙選項(xiàng)卡聯(lián)動(dòng)，四個(gè)部分都需要上拉加載和下拉刷新功能，使用的mint-ui的loadmore插件，分別加上上拉加載后，只有最后一個(gè)的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded();

有效，其他的三個(gè)都無(wú)效，這兩句話是意思是查詢完要調(diào)用一次，用于重新定位

分析原因：

首先這四個(gè)模塊都是用的　　　　　

<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)">
      <div class="checkboxOne">
      <input type="checkbox" name="checkInput" :id="'id1' + index" v-model="item.checked" disabled/>
      <label :for="'id1' + index"></label>
      </div>
      <div class="left-text">
      <p class="award">{{item.a}}</p>
      <p class="time">{{item.b}}</p>
      </div>
      <div class="right-text">
      <p class="addinfo">￥{{item.c}}</p>
      </div>
     </li>
     </ul>
    </mt-loadmore>

top-method和bottom-method，bottom-all-loaded分別賦予不同的事件名，前兩個(gè)事件分別表示下拉，上拉，第三個(gè)若為真，則 bottomMethod 不會(huì)被再次觸發(fā)，一般進(jìn)入頁(yè)面我們默認(rèn)為false

調(diào)用接口成功后進(jìn)行的取消加載的判斷，這里可以給接口的方法一個(gè)type值，如果type為top1時(shí)則證明正在進(jìn)行的是下拉刷新執(zhí)行this.$refs.loadmore1.onTopLoaded();，上拉加載同理，其他三個(gè)模塊同理

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

到了這里就會(huì)出現(xiàn)開(kāi)始所描述問(wèn)題，

解決方法

一開(kāi)始做了很多嘗試，比如利用v-if當(dāng)一個(gè)模塊顯示時(shí)讓其他三個(gè)隱藏，總是會(huì)出現(xiàn)不同的問(wèn)題，后來(lái)將ref="loadmore"中ref后的參數(shù)在四個(gè)模塊中做了區(qū)分比如分別為loadmore1，loadmore2……，這里我是這樣理解的，ref 在此的作用為子組件指定一個(gè)索引 ID，類似于dom元素的id，id名不能相同，所以我們將ref修改為不同的參數(shù)，問(wèn)題解決,

附Vue官網(wǎng)鏈接https://vuejs.org/

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

PS：mint-ui loadmore組件注意問(wèn)題

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

比如在做下拉刷新的時(shí)候，切記在下拉刷新的函數(shù)中要加

this.$refs.loadmore.onTopLoaded();

這行代碼，否則下拉加載之后一直顯示加載中，而不會(huì)加載完成。

總結(jié)

以上所述是小編給大家介紹的Vue使用mint-ui loadmore實(shí)現(xiàn)上拉加載與下拉刷新出現(xiàn)一個(gè)頁(yè)面使用多個(gè)上拉加載后沖突問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: