uniapp懒加载分页

最新推荐文章于 2025-05-25 15:09:26 发布

有思想的前端

最新推荐文章于 2025-05-25 15:09:26 发布

阅读量2.2k

点赞数 4

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/weixin_46381442/article/details/119541524

版权

uniapp 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在uniapp移动端项目中实现列表的懒加载分页功能。通过使用`<u-cell-group>`和`<u-cell-item>`组件展示数据，并结合`<u-loadmore>`组件进行状态管理。关键代码包括数据的初始化、列表数据的更新以及上拉刷新事件的处理。当数据不足一页时，更新状态为‘nomore’，完成分页加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp懒加载分页

前言：
最近一直在写uniapp移动端项目，在写到列表时常常会有懒加载分页的功能，那么接下来我们来进行实现懒加载分页的功能，话不多说直接上代码！

<u-cell-group>
	<u-cell-item v-for="(item,index) in cellData" :key="index" @click="goDetails(item)" :title="item.name" :arrow="true">
		<template slot="label">
			<span>{{"技术类别："+item.type}}</span>
		</template>
	</u-cell-item>
</u-cell-group>

<u-loadmore :status="status" v-show="status != 'nomore'" :load-text="loadText"/>  //重要代码

在data中定义：
cellData: [],
status: 'loadmore',
loadText: {  //重要代码
	loadmore: '',
	loading: '',
	nomore: ''
},
page:1,
size:15

js:
getMessage(){
	uni.showLoading({
		title: "加载中……"
	});
	const mess = {
		name:this.keyword,
		page:this.page,
		size:this.size
	}
	getLegalWorker(mess).then(response => {
		uni.hideLoading();
		if(response.data.code == 200){
			if(response.data.data.length < this.size){  //重要代码
				this.status = "nomore";
			}
			this.cellData.push(...response.data.data)  //重要代码
		} 
	})
}
//上拉刷新事件  //重要代码
onReachBottom() {
	if(this.status == 'nomore'){
		return
	}
	this.page++;
	this.getMessage();
}