vant 结合 tabs 实现上拉加载 下拉刷新
<template>
<div>
<van-tabs @click="handleClick">
<van-tab v-for="(item, index) in types" :key="index" :title="item.name">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"
>
<!-- 这里是要展示的页面内容 -->
</van-list>
</van-pull-refresh>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import dayjs from 'dayjs'
export default {
name: "index",
components: {
},
data() {
return {
types: [
{
name: "我发起的",
state: 1,
},
{
name: "我的会议",
state: 2,
},
{
name: "已完成会议",
state: 3,
},
],
page: 1,
pageSize: 10,
total: 0,
list: [],
loading: false,
finished: false,
refreshing: false,
state: 1,
};
},
methods: {
onLoad() {
this.page++;
this.getList();
},
onRefresh() {
this.page = 1;
this.getList();
},
handleClick(name) {
this.page = 1;
this.state = name +1;
this.queryParams.pageNum = 1
this.list=[]
document.documentElement.scrollTop = 0
this.getList();
},
getList() {
this.$toast.loading({
duration: 0,
forbidClick: true,
message: '加载中...',
});
this.$http
.post('www.baidu.com/api/list', {
rangeType: this.state,
page: this.page,
pageSize: this.pageSize,
})
.then((res) => {
this.$toast.clear();
this.refreshing = false;
this.loading = false;
this.total = res.data.total;
if (this.list.length == 0||this.list.length>=this.total) {
this.finished = true
this.page = 1
}else{
this.finished = false
}
if(res.state==0){
if (this.page == 1) {
this.list = res.data.list;
} else {
this.list.push(...res.data.list);
}
}
});
}
},
created() {
this.getList();
},
};
</script>