在vue中運用mt-loadmore 實現上拉加載，下拉刷新（完整源碼）

<template>
  <div class="serverList">
    <ul class="scrollModeBox" :style="{'-webkit-overflow-scrolling': scrollMode,height: wrapperHeight + 'px'}">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" :bottom-all-loaded="allLoaded"
                   ref="loadmore" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange">
        <li class="bbb" v-for="item in playList" :key="item.index" @click="toRepairDetails(item.pkBill)">
          <p class="content">{{item.content}}</p>
          <p class="time">上報日期：{{item.submitTime}}</p>
          <p class="status red" v-if="item.billState === 'UNTREATED'">{{item.billStateValue}}</p>
          <p class="status orange" v-if="item.billState === 'IN_PROGRESS'">{{item.billStateValue}}</p>
          <p class="status orange" v-if="item.billState === 'SERVICE_COMPLETED'">{{item.billStateValue}}</p>
          <p class="status blue2" v-if="item.billState === 'RETURN_VISIT_COMPLETED'">{{item.billStateValue}}</p>
        </li>

        <div slot="top" class="mint-loadmore-top" style="text-align:center">
          <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
          <!--<mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>-->
          <span class="mint-loadmore-text">{{ topText }}</span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <!--<mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>-->
          <span class="mint-loadmore-text">{{ bottomText }}</span>
        </div>
      </mt-loadmore>
    </ul>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        playList: [],
        pageNum: 1,
        pageSize: 4,
        topStatus: '',
        bottomStatus: '',//底部上拉加載狀態
        allLoaded: false,
        scrollMode: 'auto',
        haveMore: true,
        // 下拉刷新
        topText: '',
        topPullText: '下拉刷新',
        topDropText: '釋放更新',
        topLoadingText: '加載中...',
        bottomText: '',
        bottomPullText: '上拉刷新',
        bottomDropText: '釋放更新',
        bottomLoadingText: '加載中...',
        wrapperHeight: 0,//容器高度

      }
    },
    mounted() {
      //獲取屏幕寬度
      this.wrapperHeight = document.documentElement.clientHeight;
      // 報修記錄
      let vm = this;
      vm.toServerList();
    },
    watch: {
      topStatus(val) {
        switch (val) {
          case 'pull':
            this.topText = this.topPullText;
            break;
          case 'drop':
            this.topText = this.topDropText;
            break;
          case 'loading':
            this.topText = this.topLoadingText;
            break;
        }
      },
      bottomStatus(val) {
        switch (val) {
          case 'pull':
            this.bottomText = this.bottomPullText;
            break;
          case 'drop':
            this.bottomText = this.bottomDropText;
            break;
          case 'loading':
            this.bottomText = this.bottomLoadingText;
            break;
        }
      }
    },
    methods: {
      toServerList() {//跳轉到投訴頁面。
        const _this = this;
        _this.$Indicator.open({
          text: '加載中',
          spinnerType: 'fading-circle'
        });
        _this.postRequest('', {
          pageNum: _this.pageNum,
          pageSize: _this.pageSize,
        }, function (data) {
          _this.$Indicator.close();
          if (data) {
            _this.playList = data.datas;
            // 判斷上拉刷新，下拉加載.
            if (_this.pageNum < data.pages) {
              // 當頁面相同時，最后一頁彈窗提示。
              _this.haveMore = true;
              _this.pageNum = data.pageNum;
            } else {
              _this.haveMore = false;
            }
            if(_this.pageNum>1){
              _this.isHaveMore(_this.haveMore)
            }
            _this.$nextTick(function () {
              _this.scrollMode = 'touch';
            })
          } else {
           // 此處需要加一個全局的類名，修改Toast 否則可能會報錯
            _this.$Toast({
              message: '暫無記錄',
              duration: 2000,
              className: 'noticeErrorToast'
            });
          }

        })
        setTimeout(function () {
          _this.$Indicator.close();
        }, 5000);

      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      loadTop() {
        // 下拉刷新數據
        this.handleTopChange("loading");//下拉時 改變狀態碼
        this.pageNum = 1;
        this.allLoaded = false;//下拉刷新時解除上拉加載的禁用
        // 查詢數據
        this.toServerList();
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        // 上拉加載
        this.more();
        this.allLoaded = true;
        this.handleBottomChange("loadingEnd");//數據加載完畢 修改狀態碼
        this.$refs.loadmore.onBottomLoaded();
      },
      more() {
        const _this = this;
        _this.handleBottomChange("loading");//上拉時 改變狀態碼
        _this.pageNum = parseInt(_this.pageNum) + 1;
        console.log(this.pageNum, '1111')
        this.toServerList();
      },
      isHaveMore(isHaveMore) {
        this.allLoaded = true; // true 是禁止上拉加載；
        if (isHaveMore) {
          //isHaveMore 為true 有下一頁，不禁止上拉
          this.allLoaded = false
        } else {
          //false 沒有下一頁，禁止下拉，默認為true
          this.$Toast({
            message: '沒有更多了',
            duration: 2000,
            className: 'noticeErrorToast'
          });
          this.allLoaded = true;
          return;
        }
      },
      toRepairDetails(id) {
        this.$router.push({
          path: '/complaindetails',
          query: {id: id}
        })
      }
    }
  }
</script>
<style scoped>
  /*狀態的判斷*/
  .red {
    color: red;
  }

  .orange {
    color: #F69203;
  }

  .blue2 {
    color: #0585C8;
  }

  .yellow {
    color: yellow;
  }

  .current {
    background-color: #fff;
    color: #0585C8;
  }

  .serverList {
    width: 100%;
    /* height: 100%; */
    background-color: #f2f2f2;
    padding-bottom: 20px;
  }

  .serverList ul {
    padding-top: 10px;
  }

  .serverList ul li {
    box-sizing: border-box;
    background-color: #fff;
    margin: 40px 26px 0 26px;
    border-radius: 10px;
    padding: 34px 23px;
  }

  /*待處理狀態*/
  .serverList ul li .status {
    font-size: 28px;
    text-align: right;
    height: 60px;
    line-height: 60px;
    padding-top: 8px;
    box-sizing: border-box;
    padding-right: 20px;
  }

  /*報修內容*/
  .serverList ul li .content {
    font-size: 28px;
    width: 550px;
    color: #333;
    text-align: left;
    margin-left: 30px;
    line-height: 48px;
  }

  /*上報時間*/
  .serverList ul li .time {
    text-align: left;
    font-size: 24px;
    color: #999;
    margin: 10px 0 0 30px;
    padding-bottom: 20px;
  }

  .load-more-normal {
    text-align: center;
    line-height: 60px;
  }

  .load-more-hide {
    height: 0;
  }
</style>