<template>
<div class="nc-discover">
<van-nav-bar title="发现" fixed />
<van-pull-refresh
v-model="isLoading"
@refresh="onRefresh"
:disabled="finished"
>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="item" v-for="item in list" :key="item.Id">
<p class="iname">{{ item.name }}</p>
<p class="idname">信息提供方{{ item.dname }}</p>
</div>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import request from "@/units/request";
export default {
name: "discover",
data() {
return {
parms: {
currentPage: 1,
fileid: "",
id: "30702405070328",
pageSize: "10",
share: "",
type: "",
userid: null
},
list: [],
loading: true, //第一次进入页面不触发load事件,接口数据回来后改为false
finished: false,
isLoading: false
};
},
created() {
this.getlist();
},
methods: {
async getlist(isRefresh) {
const { data: res } = await request.post(
"/open/dataPool/dataPoolPager",
this.parms
);
//手动改成请求到第4页返回数据为空
//if (res.data.currentPage == 4 || res.data.currentPage > 4) {
//res.data.rows = [];
//}
if (isRefresh) {
//如果上拉刷新,拼接在前
this.list = [...res.data.rows, ...this.list];
this.isLoading = false;
} else {
this.list = [...this.list, ...res.data.rows];
this.loading = false;
}
if (res.data.rows.length == 0) {
this.finished = true;
}
},
onLoad() {
this.parms.currentPage += 1;
this.getlist();
},
onRefresh() {
this.parms.currentPage += 1;
this.getlist(true);
}
}
};
</script>
<style lang="less" scoped>
.nc-discover {
padding-top: 46px;
padding-bottom: 50px;
background: #f5f5f5;
box-sizing: border-box;
.van-nav-bar {
background: #118ffb;
.van-nav-bar__title {
color: #fff;
}
}
.item {
background: #fff;
margin-bottom: 7px;
padding: 20px 15px 20px;
.iname {
font-size: 16px;
}
.idname {
font-size: 14px;
margin-top: 15px;
color: #999;
}
}
}
</style>
vant-下拉刷新,上拉加载2-调接口实现
最新推荐文章于 2023-11-09 15:42:38 发布