关于mint-ui的下拉上拉刷新的使用

案例只涉及功能，css未设置

效果如下



代码

<template>
	<div class="mys">
		<mt-loadmore :top-method="loadTop"    @top-status-change="handleTopChange"   @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :topDistance="50" ref="loadmore"  :auto-fill="false" :style="{width:loadwidth,height:loadheight,background:lk}">
    <div>
      <span v-for="value in list" style="display:block">{{value}}</span>
     
     
    </div>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus === 'pull'">{{la}}</span>
      <span v-show="topStatus === 'drop'">↑</span>           
      <span v-show="topStatus === 'loading'"><mt-spinner type="fading-circle" color="blue"></mt-spinner></span>
    </div>
     <span v-show="allLoaded">我是有底线的哟</span>
    <div slot="bottom" class="mint-loadmore-bottom">
      <span v-show="bottomStatus === 'pull'">上拉刷新</span>
     <span v-show="bottomStatus === 'drop'">↓</span>           
      <span v-show="bottomStatus === 'loading'">正在刷新</span>
      
    </div>
  </mt-loadmore>
	</div>
	
</template>
<!-- 注意api和方法的写法:event和vue事件写法一致,api前面必须加冒号	 -->
<!-- status会默认依次调用pull，drop，loading三个值，所以不必太关心这个状态，只需要设置里面的内容样式即可，至少我做的这个例子没有太大影响 -->

<script>
 export default {
 	data:function(){
 		return {
 			topStatus:'',
 			loadwidth:'',
 			loadheight:'',
 			lk:'',
 			bottomStatus:'',
 			list:0,
 			la:'',
 			
 			allLoaded:false,
 			 pageNum: 1
 		}
 	},
 	mounted:function(){
 		this.loadwidth=document.documentElement.clientWidth
 		this.loadheight=document.documentElement.clientHeight
 	  this.list=30
 	},

  methods:{
  	handleTopChange:function(status){
  		// status会依次取值pull，drop，loading
  		// 写法一：
  			this.topStatus=status
  			// 写法二：直接给内容赋值，因为status会默认依次调用pull，drop，loading三个值
  			this.la="快拉我呀"
  			       
  	},
  	
  	loadTop:function(){
  		// 加载数据区
  		// 上拉依然刷新第一页
  	this.list=40
   		// 重置下拉次数
   		this.pageNum = 1;
   		// 容许下拉
        this.allLoaded = false;
        setTimeout(()=>{
  		//加载完成对应的slot会消失,loading状态会持续2s
  		this.$refs.loadmore.onTopLoaded();
        	console.log(1)
        },2000)
  	},

  	loadBottom:function(){
  		
   		// 控制下拉次数
   		this.pageNum+=1
        setTimeout(()=>{
  		//加载完成对应的slot会消失,loading状态会持续2s
  		if(this.pageNum<3){
  			// 下拉在上一页下面添加内容,ajax请求写在这里，可以避免页面闪烁
         this.list=50
  		
  		}else{
  			// 禁止下拉
  			this.allLoaded=true
  		}        
  		this.$refs.loadmore.onBottomLoaded();
        },2000)
  		
  	},
  	 handleBottomChange:function(status){
  	 	this.bottomStatus=status
  	},
  }
 
}
</script>
<style scoped>
.mys{height: 100%}
.keys{
	color:blue;
}

	
</style>