手机页面上拉刷新vue

最近做手机页面用到了下拉刷新 在网上搜到一款非常好用的插件mint-ui 在此记录下用法
首先 安装
# Vue 1.x
  npm install mint-ui@1 -S
# Vue 2.0
  npm install mint-ui -S
然后import 

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
最后html

<div class="contentView page-infinite-wrapper">
  <course-list :course-list="latestCourse" 
               v-infinite-scroll="loadMore"
               infinite-scroll-disabled="loading"
               :infinite-scroll-distance="footerHeight"
  ></course-list>
  <div  v-show="loading" class="page-infinite-loading">
    <div class="loadingCon">
      <span  class="loadingIcon fl"></span>
      <span class="fl">加载中...</span>
    </div>
  </div>

</div>
<style scped>
.page-infinite-wrapper{overflow: scroll;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;}
.page-infinite-loading{width:100%;height:1rem;background-color: #fff}
.page-infinite-loading .loadingCon{width:50%;height:1rem;margin:0 auto}
.page-infinite-loading span{display:block;height:1rem;line-height:1rem;font-size:0.4rem;}
.page-infinite-loading .loadingIcon{width:1rem;background: url("../assets/imgs/loading.gif") no-repeat center center;background-size: 50%}
</style>
注意几点 1 loadMore是加载时的方法 逻辑按照自己的实际情况具体写，

        
loadMore:function(){
  var ctx=this;
  var itemList=[];
  if(ctx.ifLoading){
      ctx.pageNo++;
      ctx.loading = true;
      ctx.$http.get(ctx.url+"&pageSize="+ctx.pageSize+"&pageNo="+ctx.pageNo+"&status="+ctx.msstatus+"&orgType="+ctx.orgtype).then(response=>{
          console.info(response.body.result.data);
          itemList=response.body.result.data;
          if(itemList.length<ctx.pageSize){
            ctx.ifLoading=false;
          }
          setTimeout(function(){
            for(let i=0;i<itemList.length;i++){
              ctx.msdata.push(itemList[i])
            }
            ctx.loading = false;
          },2500)
      },response=>{})
  }
}

，加载的gif效果也是自己写，
   2 列表的外层父级的overflow:hidden 且高度要写死，我这里是根据手机屏幕高度动态去计算列表的高度，只要让它把整个页面撑起来就可以了