亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

LiuZh / 3566人閱讀

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

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

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

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

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

然后在HTML中寫(xiě)法如下


          

            

              {{item.remark}}
              {{item.score}}
            

            

              {{item.operateTime}}
              {{item.recordTypeName}}

js中寫(xiě)法如下

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

這樣就大功告成啦~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82356.html

相關(guān)文章

  • vue和mint-ui loadMore 實(shí)現(xiàn)上拉加載和下拉刷新

    摘要：首先安裝組件庫(kù)在中引入和樣式然后在組件中引入在模板中寫(xiě)法如下總計(jì)獎(jiǎng)勵(lì)代碼如下分頁(yè)每次請(qǐng)求的個(gè)數(shù)是否加載完畢是否有更多數(shù)據(jù)上拉加載更多下拉刷新分頁(yè)查詢加載數(shù)據(jù)從中拿數(shù)據(jù)是否還有下一頁(yè)，如果沒(méi)有就禁止上拉刷新是禁止 首先安裝mint-ui組件庫(kù) npm install mint-ui 在main.js中引入mint-ui和樣式 import mint-ui/lib/style.css im...

    libin19890520 評(píng)論0 收藏0

  • 基于 Vue.js 的移動(dòng)端組件庫(kù)mint-ui實(shí)現(xiàn)無(wú)限滾動(dòng)加載更多

    摘要：網(wǎng)上找到很多的組件來(lái)實(shí)現(xiàn)上拉加載更多，由于上拉觸發(fā)相應(yīng)的加載更多事件，所以當(dāng)進(jìn)入頁(yè)面的時(shí)候應(yīng)該不會(huì)自動(dòng)載入數(shù)據(jù)，則這里可以加一個(gè)獲取第一頁(yè)數(shù)據(jù)的函數(shù)。 通過(guò)多次爬坑，發(fā)現(xiàn)了這些監(jiān)聽(tīng)滾動(dòng)來(lái)加載更多的組件的共同點(diǎn)， 因?yàn)檫@些加載更多的方法是綁定在需要加載更多的內(nèi)容的元素上的， 所以是進(jìn)入頁(yè)面則直接觸發(fā)一次，當(dāng)監(jiān)聽(tīng)到滾動(dòng)事件之后，繼續(xù)加載更多， 所以對(duì)于無(wú)限滾動(dòng)加載不需要寫(xiě)首次載入列表的函數(shù)...

    huayeluoliuhen 評(píng)論0 收藏0

  • 記 vue 移動(dòng)端開(kāi)發(fā) 中的經(jīng)驗(yàn)(2)

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

    Flands 評(píng)論0 收藏0

  • 下拉刷新，上拉加載 的基礎(chǔ)款（基本實(shí)現(xiàn)）

    摘要：前言現(xiàn)在網(wǎng)上下拉刷新，上拉加載插件一搜一大堆，如果你想用在生產(chǎn)環(huán)境，那你可以直接網(wǎng)上搜一個(gè)靠譜的，我所做的就是不依賴任何插件，一步一步把這個(gè)插件的過(guò)程寫(xiě)一下，各位同學(xué)可以在此基礎(chǔ)上定制，沒(méi)有寫(xiě)過(guò)插件的，可以了解下插件怎么寫(xiě)的，整個(gè)過(guò)程定位入 前言 現(xiàn)在網(wǎng)上 下拉刷新，上拉加載 插件一搜一大堆，如果你想用在生產(chǎn)環(huán)境，那你可以直接網(wǎng)上搜一個(gè)靠譜的，我所做的就是不依賴任何插件，一步一步把這個(gè)...

    DrizzleX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<