<!--
* 下拉刷新组件
* 使用方法
<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>
vant 组件二次封装上拉加载下拉刷新
最新推荐文章于 2024-07-08 10:44:16 发布