webpack+vue+mint-ui 實(shí)現(xiàn)上拉加載更多（Loadmore組件）

LiuZh 發(fā)布于2019-08-20 15:35 / 3507人閱讀

摘要：因?yàn)闃I(yè)務(wù)的需要界面需要實(shí)現(xiàn)分頁的功能，所以我就研究了一下如何利用自帶的組件實(shí)現(xiàn)上拉加載更多功能。代碼如下上拉加載更多初始化方法如下下面便是上拉加載更多的方法這樣就大功告成啦

因?yàn)闃I(yè)務(wù)的需要界面需要實(shí)現(xiàn)分頁的功能，所以我就研究了一下如何利用mint-ui自帶的loadmore組件實(shí)現(xiàn)上拉加載更多功能。
首先在文件中引入組件

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

參考了一下組件中的一些參數(shù)

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

然后在HTML中寫法如下


          
            
              {{item.remark}}
              {{item.score}}
            
            
              {{item.operateTime}}
              {{item.recordTypeName}}

js中寫法如下

首先在data的方法中定義初始化加載中的數(shù)組getScoreLog，當(dāng)前頁數(shù)pageNo，是否加載allLoaded，上拉時加載的文字bottomText，初始化方法中的數(shù)量總數(shù)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);
      },

這樣就大功告成啦~