Vant 2.0 下拉刷新,上拉加载
核心代码如下:
<!-- -->
<template>
<div class="container">
<van-nav-bar title="测试标题"
left-text="返回"
left-arrow
@click-left="onClickLeft"
class="title"
fixed
:placeholder="isFixedHeight"
/>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" >
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<van-row v-for="(item,index) in dataList" :key="index"
style="margin-top: 10px;margin-left: 10px; margin-right: 10px"
gutter="10"
>
<van-col span="8">
<van-image
width="100px"
height="80px"
:src="getCoverImage(item.newsBanner)"
/>
</van-col>
<van-col span="16">
<div class="news-right">
<span class="van-multi-ellipsis--l3">{{ item.newsTitle }}</span>
<span class="van-ellipsis">{{ item.createTime }}</span>
</div>
</van-col>
</van-row>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import {
listNews
} from "@/api/business/news/news.js";
export default {
name: 'Test',
data() {
return {
isFixedHeight: true,
refreshing: false,
loading: false,
finished: false,
dataList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
newsTitle: undefined,
newsType: undefined,
status: undefined
},
};
},
methods: {
getCoverImage(res) {
return process.env.VUE_APP_BASE_API + res
},
onClickLeft() {
//返回上一页
this.$router.go(-1)
},
getList() {
listNews(this.queryParams).then(response => {
if (this.refreshing) {
this.dataList = [];
this.refreshing = false;
}
// 加载状态结束
this.loading = false;
this.dataList = this.dataList.concat(response.rows);//追加数据
this.finished = !response.hasNext;
this.queryParams.pageNum += 1;//页数+1
});
},
onRefresh() {
this.queryParams.pageNum = 1
// 清空列表数据
this.dataList=[]
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.getList();
},
},
created() {
// this.getList();
}
}
</script>
<style scoped>
.container{
width: 100%;
height: 100%;
}
.news-right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>