vue移动端下拉刷新，上拉加载（mintui）

这里使用的是mint UI的loadmore组件

文档地址： minui

效果图：

引入：

import { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore);

代码：

至于这个结构的话，我发现把方法都写在组件上，会有分页bug，所以把下拉方法写在了组件内部的盒子上

 <mt-loadmore 
            :top-method="loadTop"
            :bottom-all-loaded="GETDealData.input.allLoaded" 
            ref="loadmore"
            :auto-fill="false">
          <div v-infinite-scroll="loadBottom"
            :infinite-scroll-disabled="GETDealData.input.loadBottom"
            infinite-scroll-distance="5">
            <business-orderCard  v-for="(item,index) in GETDealData.output.value.rows" :key="index" :info="item" @toPage="toPage(item)" :dataType="activeTabId"></business-orderCard>
          </div>
</mt-loadmore>


data(){
	return{
		 //数据列表
		  GETDealData:{
		    input:{
		      value:{
		        pIdx:0,
		        pSize:8,
		        "sort": 'fee',                                   // 排序字段
		        "sortType": 'DESC',                             // 排序方式
		        plateColor:undefined,
		        plateNumber:undefined,
		        isPresence:1
		      },
		      isPresence:true,
		      //
		      allLoaded:false,
		      loadBottom:false,
		      //
		      loading: false,
		      error: false,
		      finished: false,
		    },
		    output:{
		      value:{
		        total:0,
		        rows:[]
		      }
		    }
		  },
	}
}

methods:{
	 //下拉刷新
	  async loadTop () {
	    this.$refs.loadmore.onTopLoaded()
	    let data = await this.methods('loadMore', 1)
	    this.methods('setDataList', 'top', data)
	  },
	
	  //上拉 加载更多
	  async loadBottom () {
	    // console.log('自动执行')
	    if(this.GETDealData.input.allLoaded)return
	    let data = await this.methods('loadMore', this.GETDealData.input.value.pIdx + 1)
	    this.methods('setDataList', 'bottom', data)
	  },
	
		//下拉刷新  加载更多  
	  @Model('GETDealData')
	  async loadMore (index) {
	    let data
	    this.GETDealData.input.value.pIdx = index
	    await this.http({
	      cmd: 'GETChasepayWait',
	      input: this.GETDealData.input.value,
	      success (res) {
	        if (res.code === 200) {
	          data = res.data
	          if(res.data.rows.length<this.GETDealData.input.value.pSize){
	            this.GETDealData.input.allLoaded = true
	          }
	        }
	      }
	    })
	    return data
	  }
}