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

以下是代码是在项目中抽取出来的，都是实现下拉刷新上拉加载的要点。

注：以下不是用vue-cli写的，用vue-cli的请绕过，抱歉~

1、mescroll 的页面的初始化

 1 initMescroll(){
 2             var _this = this;
 3             this.mescroll = new MeScroll("mescroll",{
 4                 down:{
 5                     callback: _this.downCallback  //下拉刷新的回调函数
 6                 },
 7                 up:{
 8                     callback: _this.upCallback,   //上拉加载的回调函数
 9                     auto:false, //是否在初始化完毕之后自动执行一次上拉加载的回调
10                     noMoreSize:5,//无数据时,可设置列表的总数量要大于5条才显示无更多数据
11                     htmlNodata:'<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
12                     toTop:{  //页面滚动到一定距离时,显示回到顶部的图标
13                         warpId : null,
14                         src : "img/totop.svg",
15                         html: null,
16                         offset : 1000,
17                         warpClass : "mescroll-totop",
18                         showClass : "mescroll-fade-in",
19                         hideClass : "mescroll-fade-out",
20                         duration : 300,
21                         supportTap : false,
22                         btnClick : null
23                     },
24                     empty:{    // 数据为空时，显示无数据的图片和提示            
25                         warpId : "scroll-box",
26                         icon : "img/nodata.svg",
27                         tip : "暂无相关数据~"                    
28                     }
29                 }
30             })            
31             
32         }

2、下拉刷新回调

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

3、上拉加载回调

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

4、数据请求的函数

 1 getDataList(){
 2     var _this = this;
 3     var url = "api接口地址";
 4     axios.get(url)
 5     .then(function(res){    
 6         _this.dataList = _this.dataList.concat(res.data.dataList);
 7             var totalPage = res.data.totalPage;
 8             var totalSize = res.data.totalSize; 
 9             var hasNext = res.data.hasNext;
10            _this.mescroll.endSuccess(res.data.pageSize,hasNext);
11         })
12     .catch(function(err){
13         _this.mescroll.endErr();
14     })
15 }

5、关键字搜索，页面刷新 （同切换菜单页面刷新效果）

1 searchCommit(){
2     this.curPageNum = 0;
3     this.dataList = [];
4     this.mescroll.resetUpScroll()
5 }

 

mescroll.js框架官网地址：http://www.mescroll.com/index.html

 

posted @ 2020-10-23 10:24  秃头的铲屎官  Views(890)  Comments(3)  Edit  收藏  举报