vant 组件二次封装上拉加载下拉刷新

<!--
 * 下拉刷新组件
 * 使用方法
    <yh-pull-refresh ref="pullRefresh" :postData="loadModel" @DataCallBack="DataCallBack">
		<template slot="content">
			<div class="row" v-for="(el,index) in list" :key="el.HomeWorkId"> </div>
		</template>
	</yh-pull-refresh>
    loadModel: {
		autoLoad: false,//是否自动加载
		getDataMethod: api_jxhd_HW_Evaluation_GetEvaluationHomeWorkInfoPageList, //获取分页数据的api方法
		params: {
			homeWorkStatus: 1, //作业发布状态 0未审核1已发布2未通过
			commentStatus: 0, //作业是否评价 0未评价1已评价
		}, //接口请求除分页外的其他参数
		page: 1,
		pagesize: 20,
    },
	DataCallBack(data) {
		this.list = data;
	},//组件列表返回数据
	getDataFun() {
		this.loadModel.params = this.params;
		if (this.$refs.pullRefresh) {
			this.$refs.pullRefresh.list = [];
			this.$refs.pullRefresh.getPostData()
		}
	},//主动去调用获取数据方法
-->
<template>
	<div class="van-pull-refresh">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
			<van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
				<slot name="content"></slot>
			</van-list>
		</van-pull-refresh>
	</div>
</template>
<script>
	export default {
		props: {
			postData: Object,
		},
		data() {
			return {
				list: [],
				refreshing: false, //下拉刷新
				loading: false, //上拉加载
				finished: false, //上拉加载完毕
				offset: 100, //滚动条与底部距离小于 offset 时触发load事件
				page: 1,
				pagesize: 10,
				getDataMethod: Object,
				autoLoad: true, //自动加载数据，默认开启
				params: {},
			};
		},
		created() {
			this.getPostData();
		},
		methods: {
			/* 获取初始值*/
			getPostData() {
				if (this.postData) {
					this.params = this.postData.params;
					this.page = this.postData.page;
					this.pagesize = this.postData.pagesize;
					this.getDataMethod = this.postData.getDataMethod;
					this.autoLoad = this.postData.autoLoad;
					this.finished = !this.autoLoad;
					this.onRefresh();
				}
			},
			// 下拉调用此函数
			onRefresh() {
				this.page = 1;
				this.finished = false;
				this.loading = true;
				this.onLoad();
			},
			onLoad() { // 上拉调用此函数
				if (this.refreshing) {
					this.list = [];
					this.refreshing = false;
				}
				let para = {
					page: this.page,
					pagesize: this.pagesize
				}
				para = Object.assign({}, para, this.params);
				this.getDataMethod(para).then((res) => {
					if (res && res.success == true) {
						if (res.response.data && res.response.data.length > 0) {
							this.page += 1;
							this.list = [...this.list, ...res.response.data];
							this.$emit("DataCallBack", this.list);
							if (this.page >= res.response.pageCount) {
								this.finished = true;
							}
						} else {
							this.finished = true;
							this.$emit("DataCallBack", this.list)
						}

					} else {
						this.list = [];
						this.$emit("DataCallBack", this.list)
						this.finished = true;
						this.$toast(res.msg)
					}
					this.loading = false;
				});
			},
		},
	};
</script>

<style lang="scss">
	.van-list {
		min-height: 1100px;
	}
</style>