解決Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題
所遇問題：
該頁面為雙選項卡聯(lián)動，四個部分都需要上拉加載和下拉刷新功能，使用的mint-ui的loadmore插件，分別加上上拉加載后，只有最后一個的this.$refs.loadmore.onTopLoaded();和this.$refs.loadmore.onBottomLoaded();
有效，其他的三個都無效，這兩句話是意思是查詢完要調(diào)用一次，用于重新定位
分析原因：
首先這四個模塊都是用的
<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分別賦予不同的事件名，前兩個事件分別表示下拉，上拉，第三個若為真，則 bottomMethod 不會被再次觸發(fā)，一般進(jìn)入頁面我們默認(rèn)為false
調(diào)用接口成功后進(jìn)行的取消加載的判斷，這里可以給接口的方法一個type值，如果type為top1時則證明正在進(jìn)行的是下拉刷新執(zhí)行this.$refs.loadmore1.onTopLoaded();，上拉加載同理，其他三個模塊同理
if(type=='top1'){
this.$refs.loadmore1.onTopLoaded();
}else if(type=='bottom1'){
this.$refs.loadmore1.onBottomLoaded();
｝
到了這里就會出現(xiàn)開始所描述問題，
解決方法
一開始做了很多嘗試，比如利用v-if當(dāng)一個模塊顯示時讓其他三個隱藏，總是會出現(xiàn)不同的問題，后來將ref="loadmore"中ref后的參數(shù)在四個模塊中做了區(qū)分比如分別為loadmore1，loadmore2……，這里我是這樣理解的，ref 在此的作用為子組件指定一個索引 ID，類似于dom元素的id，id名不能相同，所以我們將ref修改為不同的參數(shù)，問題解決,
附Vue官網(wǎng)鏈接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();
},
比如在做下拉刷新的時候，切記在下拉刷新的函數(shù)中要加
this.$refs.loadmore.onTopLoaded();
這行代碼，否則下拉加載之后一直顯示加載中，而不會加載完成。
總結(jié)
以上所述是小編給大家介紹的Vue使用mint-ui loadmore實現(xiàn)上拉加載與下拉刷新出現(xiàn)一個頁面使用多個上拉加載后沖突問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解vue項目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程,主要運(yùn)用的技術(shù)是vue+express+git+百度的應(yīng)用引擎BAE。需要的朋友可以參考下2018-03-03
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。接下來通過本文給大家介紹Vuejs第十二篇之動態(tài)組件，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
使用 Element UI Table 的 slot-scope方法
這篇文章主要介紹了使用 Element UI Table 的 slot-scope方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3如何使用echarts實現(xiàn)繪制一些特殊樣式的折線圖和柱狀圖,文中的示例代碼講解詳細(xì),需要的小伙伴可以了解下2024-02-02
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要為大家介紹了el?autocomplete支持分頁上拉加載使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文介紹了如何開發(fā)自定義全局公共組件的兩種方法,第一種方法是通過在components文件夾中創(chuàng)建新的組件文件夾,例如Loading文件夾,并在其中創(chuàng)建index.js和index.vue文件,通過在vue的入口文件main.js中進(jìn)行引入,可以實現(xiàn)組件的全局調(diào)用2024-10-10
在開發(fā)項目時遇到由于選擇了eslint導(dǎo)致的嚴(yán)格錯誤提示,如多個空格和多行報錯,解決方案包括在webpack.base.conf.js中進(jìn)行配置修改,創(chuàng)建項目時避免選擇eslint,本文給大家介紹了Vue關(guān)閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
這篇文章通過實例代碼給大家介紹了vue項目中添加electron的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11