mint-ui下拉加载更多

最近做的好几个项目都有下拉加载操作，本人对于这个组件的使用也有点模糊，记录一下。
步骤一：下载依赖包

cnpm install mint-ui --save

步骤二：在main.js中引入全局样式

import Mint from 'mint-ui'
import 'mint-ui/lib/style.min.css'
Vue.use(Mint)

步骤三：在需要使用的页面引入相关组件

 import { Loadmore } from 'mint-ui'

下面就开始写自己的一些逻辑啦！
**.vue

<template>
	<mt-loadmore :auto-fill="false" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" bottom-pull-text="上拉加载更多" bottom-drop-text="释放加载更多" :bottomDistance="30" ref="loadmore">
	    <div class="disManaTeamOne">
	        <div class="DTO_List" v-for="(obj,index) in List" :key="index">
	            ---内容--
	        </div>
	    </div>
	    </mt-loadmore>
</template>

<script>
  export default {
    data() {
      return {
        allLoaded:false,//已加载所有数据
        currentPage:1,
        List:[],
      }
    },
    methods: {
    //  上拉加载
      loadBottom(){
        this.getList(parseInt(this.currentPage)+1);
      },
      //获取列表
      getList(page) {
        let that = this;
        that.$get(URL.接口地址, {
          leader:this.$route.query.leader,
          page_selected: page,
          rownum: 10
        }).then(res => {
          that.loadEnd();
          if (res.data.data && res.data.data.length > 0) {
            that.currentPage = res.data.current_page;
            that.List = that.List.concat(res.data.data);
          } else {
            that.allLoaded = true;  //全部加载完毕
            that.errorToast("数据已全部加载");
          }
          if (res.data.current_page != 1 || that.allLoaded) {
            that.$nextTick(() => {
              that.$refs.loadmore && that.$refs.loadmore.onBottomLoaded();
            })
          }
        }, error => {
          that.$nextTick(() => {
            that.errorToast("数据已全部加载");
            that.$refs.loadmore && that.$refs.loadmore.onBottomLoaded();
          })
        })
      },
    },
    computed: {},
    created(){
      this.getList(1)
    }
  }
</script>

注意：加粗样式
一定要给<mt-loadmore>的父级元素加上 overflow: scroll; height: 49rem;属性，不然会拉不动