webpack+vue+mint-ui 實現上拉加載更多（Loadmore組件）

LiuZh 發布于2019-08-20 15:35 / 3513人閱讀

摘要：因為業務的需要界面需要實現分頁的功能，所以我就研究了一下如何利用自帶的組件實現上拉加載更多功能。代碼如下上拉加載更多初始化方法如下下面便是上拉加載更多的方法這樣就大功告成啦

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

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

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

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

然后在HTML中寫法如下


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

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);
      },

這樣就大功告成啦~

GPU云服務器云服務器上拉加載 js上拉加載數據 vue組件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82356.html

vue和mint-ui loadMore 實現上拉加載和下拉刷新

摘要：首先安裝組件庫在中引入和樣式然后在組件中引入在模板中寫法如下總計獎勵代碼如下分頁每次請求的個數是否加載完畢是否有更多數據上拉加載更多下拉刷新分頁查詢加載數據從中拿數據是否還有下一頁，如果沒有就禁止上拉刷新是禁止首先安裝mint-ui組件庫 npm install mint-ui 在main.js中引入mint-ui和樣式 import mint-ui/lib/style.css im...

libin19890520 2019-08-23 12:51 評論0 收藏0
基于 Vue.js 的移動端組件庫mint-ui實現無限滾動加載更多

摘要：網上找到很多的組件來實現上拉加載更多，由于上拉觸發相應的加載更多事件，所以當進入頁面的時候應該不會自動載入數據，則這里可以加一個獲取第一頁數據的函數。通過多次爬坑，發現了這些監聽滾動來加載更多的組件的共同點，因為這些加載更多的方法是綁定在需要加載更多的內容的元素上的，所以是進入頁面則直接觸發一次，當監聽到滾動事件之后，繼續加載更多，所以對于無限滾動加載不需要寫首次載入列表的函數...

huayeluoliuhen 2019-08-21 18:19 評論0 收藏0
記 vue 移動端開發中的經驗(2)

摘要：官網還不斷的訪問不了。在此推薦一個移動端庫按需引入二次封裝組件列表的下拉刷新和上拉加載更多是移動端必須的組件。不用寫死高度了，并且兼容對外提供了更加簡明易用的刷新，回到頂部，獲得和設置滾動條位置的方法統一的提示，免去重復代碼。按需引入mint-ui 本項目用了 mint-ui 作為基礎ui框架，在使用中遇到不少問題。官網doc 還不斷的訪問不了。不過還是很感謝 mint-ui 團隊。...

Flands 2019-08-23 15:42 評論0 收藏0
下拉刷新，上拉加載的基礎款（基本實現）

摘要：前言現在網上下拉刷新，上拉加載插件一搜一大堆，如果你想用在生產環境，那你可以直接網上搜一個靠譜的，我所做的就是不依賴任何插件，一步一步把這個插件的過程寫一下，各位同學可以在此基礎上定制，沒有寫過插件的，可以了解下插件怎么寫的，整個過程定位入前言現在網上下拉刷新，上拉加載插件一搜一大堆，如果你想用在生產環境，那你可以直接網上搜一個靠譜的，我所做的就是不依賴任何插件，一步一步把這個...

DrizzleX 2019-08-26 11:36 評論0 收藏0