因為業務的需要界面需要實現分頁的功能，所以我就研究了一下如何利用mint-ui自帶的loadmore組件實現上拉加載更多功能。
首先在文件中引入組件

import {Indicator, Loadmore} from 'mint-ui';

參考了一下組件中的一些參數

bottomMethod 是上拉刷新執行的方法 bottomPullText 為 pull 時加載提示區域的文字 默認值為上拉刷新，一般我會定義為上拉加載更多 bottomAllLoaded 若為真，則 bottomMethod 不會被再次觸發

然后在HTML中寫法如下

<mt-loadmore :bottom-method="loadBottomUse":bottom-all-loaded="allUseLoad" :bottomPullText='bottomText'ref="loadmore"><div class="tab-list" v-for='item in useScoreLog'><div class="tab-list-top"><span class="tab-name">{{item.remark}}</span><span class="tab-num">{{item.score}}</span></div><div class="tab-list-bottom"><span class="tab-time">{{item.operateTime}}</span><span class="tab-class">{{item.recordTypeName}}</span></div></div></mt-loadmore>

js中寫法如下

首先在data的方法中定義初始化加載中的數組getScoreLog，當前頁數pageNo，是否加載allLoaded，上拉時加載的文字bottomText，初始化方法中的數量總數totalCount。

代碼如下

data(){return {getScoreLog: [],pageNo: 1,allLoaded: false,bottomText: '上拉加載更多...',totalCount: '',}},初始化方法如下getData(){this.$http.post(commonUrl + "/restful/", {typeFlag: '1'}).then(response => {if (response.data.errcode == 0) {this.getScoreLog = response.data.scoreLog;this.totalGetCount = (response.data.recordCount + 9) / 10;}}, response => {});},

下面便是上拉加載更多的方法

loadBottom() {this.pageNo += 1;if (this.pageNo == this.totalGetCount) {this.allLoaded = true;}setTimeout(() => {this.$http.post(commonUrl + "/restful/", {pageNo: this.pageNo,typeFlag: '1'}).then(response => {if (response.data.errcode == 0) {this.getScoreLog = this.getScoreLog.concat(response.data.scoreLog);}}, response => {});}, 1500);},

這樣就大功告成啦~

總結

以上是生活随笔為你收集整理的webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。