mescroll.js 实现上拉加载更多，下拉刷新（根据项目自己实际要求，我是自己记录下的）

这个是我项目的，我记录下的，具体也可以参考，但最好看注释

<template>
  <div class="box">
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">  <!-- 这些默认就可以了-->
    <homeRecommed ></homeRecommed>
        <!-- 这里面的内容，例如-->
     </mescroll-vue> <!--上拉下拉刷新组件功能 -->
  </div>

</template>

<script>

import homeRecommed from './home-recommed.vue'  //导入推荐热卖
import MescrollVue from 'mescroll.js/mescroll.vue' //引入mescroll的vue组件上拉刷新用
import {getHomeRecommend} from '../../api/get-recommend-info.js';  //获取热卖信息



export default {
  name:'home',
  data() {
    return {
      mescroll: null,
      mescrollDown:{},
      
      mescrollUp:{
        callback: this.upCallback,
        page: {
					num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 20 //每页数据条数,默认10 
          //page是作为参数传参的,这个根据自己的实际要求
				},
        dataList: [] // 列表数据
      },datase:[],  //这个数据传给推荐列表
      }    
    },
    components:{
      homeRecommed,
      MescrollVue,
      
    },
    methods:{
      mescrollInit (mescroll) {
			      //this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
			    },
			    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			    upCallback (page, mescroll) {
			      // 联网请求
            getHomeRecommend(page.num, page.size ) //我的jsop请求，具体可以写自己的请求
            .then((response) => {
              // 请求的列表数据
			        let arr = response.itemList
			        // 如果是第一页需手动置空列表
              if (response.currentPage === 1) this.dataList = []
			        // 把请求到的数据添加到列表
              this.dataList = this.dataList.concat(arr) 
              this.datase = this.dataList  // datase 数据传给推荐页面,这个数据非常重要，这个样做可以让加载更多的时候平稳过渡
              console.log(this.datase)
			        // 数据渲染成功后,隐藏下拉刷新的状态
			        this.$nextTick(() => {
			          mescroll.endSuccess(arr.length)
              })

              
			      }).catch((e) => {
			        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
			        console.log(e);
            })
          }      
    }    
};

</script>

<style lang='scss' scoped>
 .mescroll {
			    position: fixed;
			    top: 0px;
			    bottom: 0;
			    height: auto;
			  }

</style>

也可以参考官网：http://www.mescroll.com/api.html