mescroll插件实现上拉刷新下拉滚动

　　html:

　　　　　　引入css

　　　　　　　　mescroll.min.css

　　　　　　　　scrollStyle.css

　　　　　　引入js　

　　　　　　　　vue.min.js // 我是用vue所以引入 　

　　　　　　　   框架版  mescroll.m.js

　　　　　　　　原生版 mescroll.min.js
　　　　
　　　　　　标签结构

<section>
    <div id="mescroll" class="mescroll" >
      <div class="mescroll-bounce">
      <div class="container relative">
        <ul id="dataList" class="iListGroup">
　　　　　　　　//内容区域 可diy
            <li class="overflow relative"  v-for="(item,i) in pdlist">
                <div class="left lf imgBgCover" :style="'background-image:url('+item.StoreLogo+')'">
                    <!--../../Content/Images/testImg/test1.png-->
                    <!--<img src="../../Content/Images/testImg/testShop1.png" class="imgScale" alt="">-->
                </div>
                <div class="right lf" >
                    <h5 class="ell">{{item.StoreName}}</h5>
                    <h6 class="ell2Line">预定时间：{{item.CreateTime}}</h6>
                </div>
                <div class="btnList">
                    <button class="btn1" @click="checkDal(item)">查看详情</button>
                    <button class="btn2" @click="cancelOrder(item)">取消预定</button>
                </div>
            </li>

　　　　　　//内容区域 可diy

        </ul>
     </div>
        </div>
    </div>
</section>

js: 

　　vue：

　　　　data中添加：pageIndex:1 //当前页数

　　　　　　　　   　pageSize:10 //请求数量

　　　　　　　　   　pdlist  //数据容器

　　　　

　　　　生命周期mouted:

　　　　　　　　

   self.mescroll = new MeScroll("mescroll", {
                up: {
                    callback: function(){self.getMyReserve(self.pageIndex,self.upCallback.bind(self))}, //上拉加载更多
                    //以下参数可删除,不配置
                    page:{size:self.pageSize}, //可配置每页8条数据,默认10
                    // toTop:{ //配置回到顶部按钮
                    //     src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    //     //offset : 1000
                    // },
                    empty:{ //配置列表无任何数据的提示
                        warpId:"dataList",
                        // icon : "../res/img/mescroll-empty.png" ,
                        tip : "亲,暂无相关数据哦~" ,
//                   btntext : "去逛逛 >" ,
//                   btnClick : function() {
//                      alert("点击了去逛逛按钮");
//                   }
                    }
                },
                down: {//下拉刷新
                    callback: function(){self.getMyReserve(1,self.downCallback.bind(self))}, //下拉刷新
                    //以下参数可删除,不配置
                    page:{size:self.pageSize}, //可配置每页8条数据,默认10
                    // toTop:{ //配置回到顶部按钮
                    //     src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    //     //offset : 1000
                    // },
                    empty:{ //配置列表无任何数据的提示
                        warpId:"dataList",
                        // icon : "../res/img/mescroll-empty.png" ,
                        tip : "-End-" ,
//                   btntext : "去逛逛 >" ,
//                   btnClick : function() {
//                      alert("点击了去逛逛按钮");
//                   }
                    }
                },


            });

            //初始化vue后,显示vue模板布局
            document.getElementById("dataList").style.display="block";


　　　　　　method:方法
　　　　

getMyReserve: function(pageIndex,fun) { //请求内容
    var data = {
        PageIndex : pageIndex,
        PageSize: this.pageSize,
    };
    ihotyi.iMyReserve(res=>{
        if(res.Data){
            this.pageIndex++;
            fun && fun(res.Data);
        }else
            mAlert('返回data数据为空')
    },data)
},

downCallback: function(curPageData) {//刷新
    log('up')
    this.pageIndex = 1;
    //联网加载数据
    var self = this;
    getListDataFromNet(self.pageIndex, self.pageSize, function() {
        //curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置
        //如果是第一页需手动制空列表
        if(self.pageIndex === 1) self.pdlist = [];

        //更新列表数据
        self.pdlist = self.pdlist.concat(curPageData);

        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;


        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        //self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //self.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
        //self.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.

        self.mescroll.endSuccess(curPageData.length);

    }, function() {
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        self.mescroll.endErr();
    });
},
upCallback: function(curPageData) {//加载更多
    log('asdf');
    //联网加载数据
    var self = this;
    getListDataFromNet(self.pageIndex, self.pageSize, function() {
        //curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置
        //如果是第一页需手动制空列表
        //更新列表数据
        self.pdlist = self.pdlist.concat(curPageData);

        //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
        //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;


        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
        //self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //self.mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
        //self.mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
        self.mescroll.endSuccess(curPageData.length);

    }, function() {
        //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        self.mescroll.endErr();
    });
},

　　　　　　　　

结构外定义function

getListDataFromNet

   function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
        //延时一秒,模拟联网
        setTimeout(function () {


            successCallback&&successCallback();//成功回调
//          })
//          .catch(function(error) {
//             errorCallback&&errorCallback()//失败回调
//          });
        },500)
    }

附上官网http://www.mescroll.com/