vue 使用mescroll.js框架实现下拉加载和上拉刷新功能_vue.js_

initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback, //上拉加载的回调函数 auto:false, //是否在初始化完毕之后自动执行一次上拉加载的回调 noMoreSize:5,//无数据时,可设置列表的总数量要大于5条才显示无更多数据 htmlNodata:'
-- 没有更多数据了 --
', toTop:{ //页面滚动到一定距离时,显示回到顶部的图标 warpId : null, src : "img/totop.svg", html: null, offset : 1000, warpClass : "mescroll-totop", showClass : "mescroll-fade-in", hideClass : "mescroll-fade-out", duration : 300, supportTap : false, btnClick : null }, empty:{ // 数据为空时，显示无数据的图片和提示 warpId : "scroll-box", icon : "img/nodata.svg", tip : "暂无相关数据~" } } }) }

downCallback(){ this.curPageNum =0; //默认为0, this.pageSize = 10; this.dataList = []; this.mescroll.resetUpScroll(true); //重置列表为第一页curPageNum会变成1 ,实现下拉刷新 }

upCallback(){ this.curPageNum += 1; this.pageSize = 10; this.getDataList(); //上拉加载数据请求函数 }

getDataList(){ var _this = this; var url = "api接口地址"; axios.get(url) .then(function(res){ _this.dataList = _this.dataList.concat(res.data.dataList); var totalPage = res.data.totalPage; var totalSize = res.data.totalSize; var hasNext = res.data.hasNext; _this.mescroll.endSuccess(res.data.pageSize,hasNext); }) .catch(function(err){ _this.mescroll.endErr(); }) }

searchCommit(){ this.curPageNum = 0; this.dataList = []; this.mescroll.resetUpScroll() }