webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）

因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用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组件）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。