mescroll上拉加载下拉刷新总结

//npm
npm install --save mescroll.js

//main.js引入
//MescrollVue; //上拉加载,下拉刷新
import MescrollVue from 'mescroll.js/mescroll.vue'
Vue.component('mescroll-vue', MescrollVue);

//在页面中使用
<template>
	<div class="vote_record">
		<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" >
			<ul v-if="dataShow">
				<li v-for="(item,index) in list" :key="index" :class="{red:item.status == 0}">
					{{item}}
				</li>
			</ul>
			//暂无数据
			<no-data type="1" v-if="!dataShow"></no-data>
			//报错提示
			<no-data type="2" v-if="dataErr"></no-data>
		</mescroll-vue>
	</div>
</template>
data(){
	return{
		dataShow:true,//默认有数据
		dataErr:false,//加载错误
		mescroll: null,
		mescrollDown: { auto: false, },
		mescrollUp: { callback: this.upCallback, },
		list:[],
	}
},
methods:{
	mescrollInit(mescroll) {
		this.mescroll = mescroll;
	},
	upCallback(page, mescroll) {
		this.axios.post('/api',{
            page: page.num,
		}).then(res=>{
			if(res.status == 1){
				let arr = res.data.list;// 请求的列表数据
				if (page.num === 1) this.list = [];// 如果是第一页需手动置空列表
				this.list = this.list.concat(arr);// 把请求到的数据添加到列表
				this.$nextTick(() => {
					mescroll.endSuccess(arr.length)// 数据渲染成功后,隐藏下拉刷新的状态
				})
				if(this.list.length == 0){
					this.dataShow = false;//暂无数据
				}else{
					this.dataShow = true;//有数据
				}
			}
		}).catch((e) => {
				mescroll.endErr();
				this.dataErr = true;//报错显示加载错误,请刷新
		});
	},
},
// 要想回复到初始位置，路由必须配合使用keep-alive 
// 进入路由时,恢复列表状态
beforeRouteEnter(to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
         // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
         vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
     })
 },
 // 离开路由时,记录列表状态
 beforeRouteLeave(to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
     // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
     this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
     next()
 },
<style>
	.mescroll{
		position: fixed;
		top:0;
		bottom: 0;
		height: auto;
	}
</style>

mescroll常用方法：(参考官网：http://www.mescroll.com)

1、mescroll.triggerDownScroll();	主动触发下拉刷新

2、mescroll.triggerUpScroll();	主动触发上拉加载

3、mescroll.scrollTo( y, t );	滚动列表到指定位置
y=0,则回到列表顶部; 如需滚动到列表底部,可设置y很大的值,比如y=99999
t时长,单位ms,默认300; 如果不需要动画缓冲效果,则传0 (需更新至1.2.3版本)

4、mescroll.endByPage(dataSize, totalPage, systime);  (v 1.2.1 新增)	
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据总数(注意是当前页)
totalPage : 列表的总页数
systime : 加载第一页数据的服务器时间 (可空);

5、mescroll.endBySize(dataSize, totalSize, systime);  (v 1.2.1 新增)	
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据总数(注意是当前页)
totalSize : 列表的总数据量
systime : 加载第一页数据的服务器时间 (可空);

6、mescroll.endSuccess(dataSize, hasNext, systime);  (v 1.2.1 调整)	
隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
dataSize : 当前页获取的数据量(注意是当前页)
hasNext : 是否有下一页数据true/false
systime : 加载第一页数据的服务器时间 (可空);

7、mescroll.endErr();	
隐藏下拉刷新和上拉加载的状态, 在联网获取数据失败后调用;
mescroll内部会自动恢复原来的页码,时间等变量;

8、mescroll.resetUpScroll( isShowLoading );	
重置列表为第一页 (常用于列表筛选条件变化或切换菜单时重新刷新列表数据)
内部实现: 把page.num=1,再主动触发up.callback
isShowLoading 是否显示进度布局;
1.默认null,不传参,则显示上拉加载的进度布局
2.传参true, 则显示下拉刷新的进度布局
3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)