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

2024年2月25日 223次阅读 来源: 李木子

由于营业的须要界面须要完成分页的功用，所以我就研讨了一下怎样应用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);
      },

如许就功德圆满啦~

    原文作者：李木子
    原文地址: https://segmentfault.com/a/1190000008955098
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞