版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Amy_cloud/article/details/83144428
上拉加载，下拉刷新，页面缓存：
1.页面有3个不同的 tab 选项卡，切记每一个选项卡里面的列表数据不能用同一个 数据源，每一个列表的数据源必须单独定义
2.点击每一个报修单号的信息进入其详情页面，返回的时候依旧停留在离开时的tab标签页，这个需求我们采用 vue 提供的 keep-alive 来对页面数据进行缓存处理，在进入路由的时候，我们采用 keep-alive 本地存储的方法重新初始化数据
3.在HTML页面上必须采用 mescroll-vue 标签包住整个数据dom
代码如下：
//data 里面初始化数据源
data(){
return{
heardList:['全部','待审核','已审核'],
count:0,
mescroll: null, // mescroll实例对象
mescrollDown:{ }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
mescrollUp: { // 上拉加载的配置.
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
auto:false, //是否在初始化完毕之后自动执行一次下拉刷新的回调 callback
page: {
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10, //每页数据条数,默认10,
},
toTop:{ //当页面滑动到一定高度展示回到顶部按钮，图片必须放到static文件夹里面
src : '../../static/mescroll-totop.png' ,
offset : 1000 ,
warpClass : "mescroll-totop" ,
showClass : "mescroll-fade-in" ,
hideClass : "mescroll-fade-out" ,
duration : 300 ,
}
},
status:99, // 0 待审核 1待处理 2待验收 3已审核 4已维修 99全部
select_type:null,
repairList0:[], //对应每一个不同的标签页的数据源
repairList1:[],
repairList2:[],
nodata0:false, //控制页面没有数据情况下的图片展示,每一个页面都是独立的
nodata1:false,
nodata2:false,
show_audit_mes:null, //校长/非校长状态码
}
},
//页面挂载阶段
//切换tab
handTab(i){
this.count = i;
this.mescroll.setPageNum(2); //设置当前page.num的值
switch(this.count){
case 0:
this.status=99;
this.mescrollUp.page.num=1;
this.mescrollUp.page.status=0;
if(this.repairList0.length ==0){//第一次切换或无数据时才加载数据
this.upCallback ( this.mescrollUp.page,this.mescroll)
}
break;
case 1:
this.status=0
this.mescrollUp.page.num=1;
this.mescrollUp.page.status=1;
if(this.repairList1.length ==0){//第一次切换或无数据时才加载数据
this.upCallback ( this.mescrollUp.page,this.mescroll)
}
break;
case 2:
this.status=3
this.mescrollUp.page.num=1;
this.mescrollUp.page.status=2;
if(this.repairList2.length ==0){//第一次切换或无数据时才加载数据
this.upCallback ( this.mescrollUp.page,this.mescroll)
}
break;
}
},
// 上拉加载，下拉刷新
mescrollInit (mescroll) {
this.mescroll = mescroll;
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) {
// 联网请求，获取申请列表
var _this =this
var pageIndex = page.num -1 // 后台默认数据请求的页面从0开始
getrepairRecord(_this.status,_this.select_type,pageIndex,page.size).then((response) => {
// 请求的列表数据
if( response.res > 0){
// 请求的列表数据
let arr = response.list;
// 如果是第一页需手动制空列表
if (pageIndex === 0){
switch(_this.status){
case 99:
_this.repairList0 = []
if(arr.length ==0){
_this.nodata0 = true;
}
break;
case 0:
_this.repairList1 = []
if(arr.length ==0){
_this.nodata1 = true;
}
break;
case 3:
_this.repairList2 = []
if(arr.length ==0){
_this.nodata2 = true;
}
break;
}
}
if(_this.status ==99 ){ //全部数据
_this.repairList0 = _this.repairList0.concat(arr);
}else if(_this.status ==0){
_this.repairList1 = _this.repairList1.concat(arr);
}else if(_this.status ==3){
_this.repairList2 = _this.repairList2.concat(arr);
}
}
this.$nextTick(() => {
mescroll.endSuccess(arr.length)
})
}
}).catch((e) => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr()
})
},
//从详情页面返回到列表页面，保存离开时的标签页：
beforeRouteEnter(to, from, next) {
next(vm => { // 通过 `vm` 访问组件实例
if (from.name == 'wantRepair' && to.name == 'applyManagement') {
vm.mescrollUp = { // 上拉加载的配置.
callback: vm.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
auto:false, //是否在初始化完毕之后自动执行一次下拉刷新的回调 callback
page: {
num:0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10, //每页数据条数,默认10,
},
};
vm.nodata0 = false;
vm.nodata1 = false;
vm.nodata2 = false;
vm.repairList0 = [];
vm.repairList1 = [];
vm.repairList2 = [];
vm.status = 99;
vm.handTab(0);
}
});
next();
},
总而言之，mescorll.js 坑很多，附上API地址：
http://www.mescroll.com/api.html?v=0929