mint-ui pull down不起作用及解决方案

<template>
  <div style="min-height:200px">
    <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
    
      <ul>
        <li v-for="(item,index) in list">[{{index}}]{{ item.text }}</li>
      </ul>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'loading'">上拉加载中...</span>
      </div>
      <div slot="bottom" class="mint-loadmore-bottom">
        <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↑</span>
        <span v-show="bottomStatus === 'loading'">下拉加载中...</span>
      </div>

    </mt-loadmore>
  </div>
</template>

<script>
import axios from 'axios';
import  * as _global from '../../plugs/global';
import TrendFun from '../../plugs/function';
import BUS from '../../plugs/bus.js';
import { Toast,Loadmore } from 'mint-ui';

let trendFun=new TrendFun(); //公共函数库
let __REQUEST=trendFun.__REQUEST();
let __URILIST=_global.default;

 

  export default {
    name: 'app',
    data(){
      return{
        allLoaded:false,
        page:0,
        list: [ ]   
        
      }
    },
    created(){

      //this.getList();
    },
      methods:{
              handleTopChange:function(status) {
                this.topStatus = status;
                console.log("this.topStatus = status; "+ status);
              },

              handleBottomChange:function(status) {
                this.bottomStatus = status;
                console.log("this.bottomStatus = status; "+ status);
              },

              getList:function(page){
                
                  __REQUEST.bizParams={
                    "bankCardId":"" ,// 银行卡ID ----非必填，只有在专门查一个银行卡时传
                    "cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填，不填查所有的
                    "type":"" // 卡类型 0：查询所有卡 1：只查储蓄卡 2：只查信用卡 ----- 非必填
                  }
                  let request=__REQUEST;
                  axios.get(__URILIST[2], {
                      params:request
                    })
                    .then(response=>{
                      let res=response.data; //axios返回的数据是用response.data包括的，和jquery不一样
                      if(res.data){
                        let tmparry=[];
                        //console.log(res.data.debitList);
                        res.data.msgList.map((e,i)=>{
                           if(e.msgType==1 && i<=3){
                              tmparry.push(e);
                            }
                          
                        });
                        this.list = this.list.concat(tmparry);
                        //this.list.push(tmparry);
                        console.log(tmparry);    
                      }
                      
                    })
                    .catch(function (error) {
                      console.log(error);
                    });


            },
            loadTop:function(){
                  console.log(this.page);
                  //默认是第三页，下拉刷新的时候获取第一页
                  //this.page=1;
                  this.getList(this.page);
                  this.$refs.loadmore.onTopLoaded(); //手动调用，组件定位
                  this.$refs.loadmore.onBottomLoaded();
                  console.log("上拉执行");
              },
              loadMore:function(){
                  console.log("loadMore");
                  
              },
              loadBottom:function() {
                  console.log("下拉在执行");
                  this.page=this.page+1;
                  
                  console.log("this.page:"+this.page);
                  this.getList(this.page);
                  if(this.page==20){
                    this.allLoaded=true;  //当所有数据 全部读取完成的时候 停止下拉读取数据 
                    //this.$refs.loadmore.onBottomLoaded();
                  }
      
            }

    },
    components: {
      
    }
  }
</script>

##后来如下解决，在外层放一个 div，此div是整个屏幕的高
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
主要就是这个：

<template>
   <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :top-method="loadTop" @top-status-change="handleTopChange"  ref="loadmore">
      <ul>
        <li v-for="(item,index) in list">[{{index}}]{{ item.name }}</li>
      </ul>

      <ul>
        <li v-for="(item,index) in list">[{{index}}]{{ item.name }}</li>
      </ul>
      <div slot="top" class="mint-loadmore-top">
        <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
        <span v-show="topStatus === 'loading'"><mt-spinner type="snake"></mt-spinner></span>
      </div>



        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner type="snake"></mt-spinner>
          </span>
        </div>


      
    </mt-loadmore>

  </div>
</template>

<script>
import axios from 'axios';
// import  * as _global from '../../plugs/global';
// import TrendFun from '../../plugs/function';
// import BUS from '../../plugs/bus.js';
import { Toast,Indicator,Loadmore } from 'mint-ui';

// let trendFun=new TrendFun(); //公共函数库
// let __REQUEST=trendFun.__REQUEST();
// let __URILIST=_global.default;

let __REQUEST={};

  export default {
    name: 'app',
    data(){
      return{
        allLoaded:false,
        page:0,
        list: [ 
              {
                "name": ".gitignore1"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore"    
              },
              {
                "name": ".gitignore100"    
              }
        ],
        topStatus:'',
        bottomStatus:'' ,
        wrapperHeight: 0        
        
      }
    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    },
      methods:{
              handleTopChange:function(status) {
                this.topStatus = status;
                console.log("this.topStatus = status; "+ status);
              },

              handleBottomChange:function(status) {
                this.bottomStatus = status;
                console.log("this.bottomStatus = status; "+ status);
              },

              getList:function(page){
                
                  __REQUEST.bizParams={
                    "bankCardId":"" ,// 银行卡ID ----非必填，只有在专门查一个银行卡时传
                    "cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填，不填查所有的
                    "type":"" // 卡类型 0：查询所有卡 1：只查储蓄卡 2：只查信用卡 ----- 非必填
                  }
                  let request=__REQUEST;
                  axios.get('https://api.github.com/repos/typecho-fans/plugins/contents/', {
                      params:request
                    })
                    .then(response=>{
                      let res=response.data; //axios返回的数据是用response.data包括的，和jquery不一样
                      console.log();
                      if(res){
                        let tmparry=[];
                        //console.log(res.data.debitList);
                        res.map((e,i)=>{
                           if(i<=3){
                              tmparry.push(e);
                            }
                          
                        });
                        this.list = this.list.concat(tmparry);
                        //this.list.push(tmparry);
                        console.log(tmparry);    
                      }
                      
                    })
                    .catch(function (error) {
                      console.log(error);
                    });


            },
            loadTop:function(){
                  console.log(this.page);
                  //默认是第三页，下拉刷新的时候获取第一页
                  //this.page=1;
                  this.getList(this.page);
                  this.$refs.loadmore.onTopLoaded(); //手动调用，组件定位
                  
                  console.log("上拉执行");
              },
              loadMore:function(){
                  console.log("loadMore");
                  
              },
              loadBottom:function() {
                  console.log("下拉在执行");
                  this.page=this.page+1;
                  this.$refs.loadmore.onBottomLoaded();
                  console.log("this.page:"+this.page);
                  this.getList(this.page);
                  if(this.page==5){
                    this.allLoaded=true;  //当所有数据 全部读取完成的时候 停止下拉读取数据 
                  }
      
            }

    },
    components: {
      
    }
  }
</script>

<style>
.page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle
}

.page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px
}

.page-loadmore-desc:last-of-type,.page-loadmore-listitem {
    border-bottom: 1px solid #eee
}

.page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center
}

.page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
}

.page-loadmore-wrapper {
    margin-top: -1px;
    overflow: scroll
}

.loading-background {
     100%;
    height: 50px;
    line-height: 50px;
    text-align: center
}

.loading-background,.mint-loadmore-top span {
    -webkit-transition: .2s linear;
    transition: .2s linear
}

.mint-loadmore-top span {
    display: inline-block;
    vertical-align: middle
}

.mint-loadmore-top span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle
}

.page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px
}

.page-loadmore-desc:last-of-type,.page-loadmore-listitem {
    border-bottom: 1px solid #eee
}

.page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center
}

.page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
}

.page-loadmore-wrapper {
    overflow: scroll
}

.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
}

.mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}


</style>