vue下拉加载和上拉刷新
zyfen 人气:0以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点。
注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~
1、mescroll 的页面的初始化
initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback, //上拉加载的回调函数 auto:false, //是否在初始化完毕之后自动执行一次上拉加载的回调 noMoreSize:5,//无数据时,可设置列表的总数量要大于5条才显示无更多数据 htmlNodata:'<p class="upwarp-nodata">-- 没有更多数据了 --</p>', 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 : "暂无相关数据~" } } }) }
2、下拉刷新回调
downCallback(){ this.curPageNum =0; //默认为0, this.pageSize = 10; this.dataList = []; this.mescroll.resetUpScroll(true); //重置列表为第一页curPageNum会变成1 ,实现下拉刷新 }
3、上拉加载回调
upCallback(){ this.curPageNum += 1; this.pageSize = 10; this.getDataList(); //上拉加载数据请求函数 }
4、数据请求的函数
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(); }) }
5、关键字搜索,页面刷新 (同切换菜单页面刷新效果)
searchCommit(){ this.curPageNum = 0; this.dataList = []; this.mescroll.resetUpScroll() }
mescroll.js框架官网地址:http://www.mescroll.com/index.html
加载全部内容