使用mescroll-uni插件实现上拉加载和下拉刷新

1、首先将到uni-app插件市场下载mescroll-uni https://ext.dcloud.net.cn/plugin?id=343
或者去mescroll官网下载 http://www.mescroll.com/load.html?v=190725/
2、将下载到（mescroll-uni目录）的.vue文件复制到自己的项目中components目录下
3、在全局  /  页面中引入插件

全局引入：
main.js文件

import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
Vue.component('mescroll-uni', MescrollUni)


页面引入：
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
components: {
	MescrollUni
},

4、在具体页面中的简单示例 :

<template>
  <view class="container">
    <mescroll-uni mescroll-body
                  ref="mescrollRef"
                  @init="mescrollInit"
                  @down="downCallback"
                  @up="upCallback"
                  :down="downOption"
                  :up="upOption"
                  :top='40'>

      <!-- 页面显示的内容 -->
      <yongsuoItem />
      
    </mescroll-uni>
  </view>
</template>

<script>
import { wllib } from '@/utils/index.js'
import yongsuoItem from '@/components/yewu/yongsuoItem'
export default {
  components: {
    yongsuoItem,
  },
  data() {
    return {
      upOption: {
        page: {
          num: 0,
          size: 10, // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        textNoMore: '没有更多了',
        empty: {
          tip: '暂无相关数据',
        },
      },
      // 列表数据
      dataList: [],
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    //下拉刷新时触发
    downCallback() {
      // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    //上拉加载时触发
    upCallback(page) {
      this.getList(page.num, page.size)
    },
    getList(num, size) {
      if (num == 1) {
        this.dataList = []
      }
      let memberId = uni.getStorageSync('loginInfo').userInfo.userId
      wllib.net.wlPost('/LockRecord/GetPageLockRecord.do', {
          memberId,
          curr_page: num,
          page_size: size,
        })
        .then((dataList) => {
          console.log(dataList)
          this.mescroll.endSuccess(dataList.data_list.length,dataList.total_page)
          //追加新数据
          this.dataList = [...this.dataList, ...dataList.data_list]
        })
        .catch(() => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding-top: 40upx;
}
</style>

5、注意点

（1）该组件全部数据加载完毕后下拉刷新，若单页请求显示的数据没有铺满整页，则无法触发上拉加载的操作

解决办法：

   1、设置单次请求的数据量能够铺满整页（size：10 //每页返回10条数据）

    2、在 upOption上拉配置对象中添加属性 offset：750（属性值可以设置大点，单位默认是rpx）

         offset：距底部多远时,触发upCallback

( 2 ) this.mescroll.endUpScroll(true) 直接结束触发上拉加载