vant-list官网示例 ,vant-list各参数释义如下:
效果如图:
<template>
<van-list
v-if="listData.length > 0"
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"
:offset="'50'"
>
<div class="list-item" v-for="(item, index) in listData" :key="index"></div>
</van-list>
</template>
<script>
import { List } from "vant";
components: { vanList: List },
data() {
return {
loading: true,//加载中
finished: false,//加载完成
listData: [],//列表数据
pageConfig: { //分页数据
total: 0,
pageNum: 1,
pageSize: 20,
pages: 1,
},
};
},
methods: {
//获取列表数据
getListData() {
let parm = {
pageNumber: this.pageConfig.pageNum,
pageSize: this.pageConfig.pageSize
};
getList.call(this, parm).then((res) => {
if (res.data == null) {
this.listData = [];
} else {
this.listData = this.listData.concat(res.data);
this.loading = false;
if (res.data.length < this.pageConfig.pageSize) {
this.finished = true;
} else {
this.finished = false;
}
}
});
}
//滚动加载
onLoad() {
this.loading = true;
console.log("触底");
this.pageConfig.pageNum++;
this.getListData();
},
</script>
注意:
1.列表初始化后会触发一次 load 事件,用于加载第一屏的数据,这个特性可以通过immediate-check属性关闭,即:immediate-check=“false”
2.在从接口拿到的数据是每页的数据,那么渲染出来也就是固定条数,为了实现上拉加载下拉刷新效果,需要concat拼接已拿到数据listData和新获取数据res.data。
3.触底后,显示加载中,页数自增,请求接口。