uniapp使用mescroll-uni實現下拉刷新、上拉加載功能

mescroll-uni官網地址：http://www.mescroll.com/uni.html?v=20200315

<template>
  <mescroll-body ref="mescrollRef"
     @init="mescrollInit" 
     @down="downCallback" 
     @up="upCallback" :up="upOption" >
    <view class="list-one row-shadow" v-for="(item,index) in list" :key="index" @click="showDetail(index)">
      <view class="content">
        <text>{{item.date}}</text>
        <text class="text-sub">消費記錄</text>
      </view>
      <view class="text-total arr-more"><text class="color-blue">{{item.total|formatTotal}}</text>元</view>
    </view>
  </mescroll-body>
</template>

<script>
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
  export default {
    mixins: [MescrollMixin], // 使用mixin (在main.js註冊全局組件)
    data() {
      return {
        list: [], //列表
        upOption:{
        	auto: false,
        	page:{
        	  num : 0, 
        	  size : 15, 
        	  time : null 
        	},
          noMoreSize:4,
        },
      }
    },
    methods: {
      // 上拉回調
      upCallback(page){
      	this.getList(page);
      },
      getList(page){
        let pageNum = page.num; // 頁碼, 默認從1開始
        let pageSize = page.size; // 頁長, 默認每頁10條
        let params = {
          uin: this.$common.getGlobalUserInfo().id,
          pageNum: pageNum,
          pageSize: pageSize
        }
        this.$request.setRequest('/consumelist', params)
          .then(res => {
            if (res.data.status == 1) { //<=0:人工返回的錯誤信息
              let result=res.data.data;
              let curPageData = result&&result.list?result.list:[];
              let curPageLen = curPageData.length; 
              let totalPage = result&&result.list?result.pages:0;
              
              //設置列表數據
              if (page.num == 1) this.list = []; //如果是第一頁需手動制空列表
              this.list = this.list.concat(curPageData); //追加新數據
              
              //聯網成功的回調,隱藏下拉刷新和上拉加載的狀態;
              this.mescroll.endByPage(curPageLen,totalPage);
             
            } else if (res.data.status < 1) { //<=0:人工返回的錯誤信息
              this.$request.setErrorMessage(res.data.msg);
              this.mescroll.endErr()
            } else {
              this.$request.setErrorMessage();
              this.mescroll.endErr()
            }
          }, (err) => {
            this.mescroll.endErr()
          });
      },
      
    }
  }
</script>