在做移动端的页面，难免会遇到列表的懒加载，下面是使用Vue和vant实现的List组件懒加载功能，但是根据每个人传递的参数不同可能方法也会不同，仅供大家参考。

<template>
		<div class="message-list-info">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getMessageList" >
					<van-swipe-cell v-for="item in messageList"  :key="item.InfoID">
						<van-cell class="cell"  is-link>
						 	 <template #title>
								<van-tag class="custom-tag">已读</van-tag>
								<div class="custom-title"  @click="toDetail(item.InfoID,item.SendId)">{
   
   {item.MessageContent}}</div>
							</template>
						</van-cell>
						<template #right>
							<van-button square type="danger" text="删除" />
						</template>
					</van-swipe-cell>
				</van-list>
			</van-pull-refresh>
		</div>
</template>

<script>
	import {List,PullRefresh,NoticeBar,Swipe,SwipeItem,Lazyload,SwipeCell,Card,Tag,Cell,Button  } from 'vant';
	// import {mapState,mapActions,mapGetters} from 'vuex';
	export default{
		data(){
			return{
				messageList: [],
				loading: false,
				finished: false,
				refreshing: true,
				datatotal:0, //数据总数
				curpage:0,  //当前页数 
				perpagecount:20, //每页条数
			
			}
		},
		components:{
			[List.name]:List,
			[PullRefresh.name]:PullRefresh,
			[NoticeBar.name]:NoticeBar,
			[Swipe.name]:Swipe,
			[SwipeItem.name]:SwipeItem,
			[Lazyload.name]:Lazyload,
			[SwipeCell.name]:SwipeCell,
			[Card.name]:Card,
			[Tag.name]:Tag,
			[Cell.name]:Cell,
			[Button  .name]:Button  
		},
		computed:{
		},
		methods:{
			getMessageList(num){
				if (this.refreshing) {
				  this.messageList = [];
				  this.refreshing = false;
				}
				let paramsObj={
					status:"MessageInfo",
					userid:5,
					curpage:this.curpage,  //当前页数
					perPageCount:this.perpagecount,  //每页消息数目
				}
				this.$axios.get('http://localhost:3000/server',paramsObj).then((data)=>{
					console.log(JSON.stringify(data));
					this.total=data.count;
					this.messageList.push(...data.list);
					this.curpage++;
					//判断消息是否加载完毕
					this.loading = false;
					if (this.messageList.length >= this.total) {
					  this.finished = true;
					}
				});
			},
			onRefresh() {
			  // 清空列表数据
			  this.finished = false;
			  // 重新加载数据
			  // 将 loading 设置为 true，表示处于加载状态
			  this.loading = true;
			  this.curpage=0;
			  // console.log("onRefresh:"+this.curpage);
			  this.getMessageList();
			},
			toDetail(){
				this.$router.push({
					path:'/message/detail'
				})
			}
		}
	}
</script>

<style  scoped>
	.mesage-cell{
		height:40px;
		/* line-height:40px; */
		margin-bottom:1px;
		padding-left: 6px;
		background-color: #fff;
	}
	.message-list-info{
		padding-bottom: 50px;
	}
	.cell{
		width:100vw;
		height:40px;
		overflow: hidden;
	}
	.custom-tag{
		position: relative;
		top:-2px;
		left:0
	}
	.custom-title{
		position: relative;
		top:-26px;
		left:40px;
		width:77vw;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>

若有疑问欢迎大家评价