vant-list的应用（详细版本）

html部分

<template>
	<van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="onLoad"
	>
		<van-cell v-for="item in list" :key="item.id">
		</van-cell>
	</van-list>
</template>
<script>
export default {
	data() {
	    return {
	      loading: true,
	      finished: false,
	      curPage: 1,
	      list: [],
	      total: 0
	    }
  	},
}
</script>

methods部分

onLoad() {
	this.curPage += 1
	this.getList()
},
// 方法一
async getList() {
	try {
		const params = {
			curPage: this.curPage,
			pageSize: 10
		}
		const { list, total } = await this.$api.demo(params)
		if (list.length === 0) {
			this.loading = false // 关闭加载状态
			this.finished = true // 加载结束
			return
		}
		this.loading = false // 关闭加载状态
		this.total = total  //数据总条数
		this.list= this.list.concat(list)
		// 如果合并之后的数组长度大于返回的数据总条数
		if (this.list.length >= this.total) {
			this.finished = true // 加载结束
		}
	} finally{

	}
}
// 方法二
getList() {
	const params = {
		curPage: this.curPage,
		pageSize: 10
	}
	this.$api.demo(params).then(res=>{
		if (res.list.length === 0) {
			this.loading = false // 关闭加载状态
			this.finished = true // 加载结束
			return
		}
		this.loading = false // 关闭加载状态
		this.total = res.total  //数据总条数
		this.list= this.list.concat(res.list)
		// 如果合并之后的数组长度大于返回的数据总条数
		if (this.list.length >= this.total) {
			this.finished = true // 加载结束
		}
	}).finally((_)=>{
	})	
}