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" v->
			<ul 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.versionCode(() => {
					mescroll.endSuccess(arr.length)// 数据渲染成功后,隐藏下拉刷新的状态
				})
				if(this.list.length == 0){
					this.dataShow = false;//暂无数据
				}else{
					this.dataShow = true;//有数据
				}
			}
		}).catch((e) => {
				mescroll.endErr();
				this.dataErr = true;//报错显示加载错误,请刷新
		});
	},
},
<style>
	.mescroll{
		position: fixed;
		top:0;
		bottom: 0;
		height: auto;
	}
</style>