uniapp实现下拉加载更多 u-loadmore

最新推荐文章于 2025-02-28 09:23:33 发布

Yoke______

最新推荐文章于 2025-02-28 09:23:33 发布

阅读量9k

点赞数 7

分类专栏： vue

本文链接：https://blog.csdn.net/Yoke______/article/details/119786737

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在前端使用u-loadmore组件实现数据下拉加载更多，包括设置状态、onReachBottom函数的使用以及数据的追加处理，重点在于解决页面滚动触发加载的细节和效果控制。

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

区别于官网教程，这里总结更为白话。

要实现的需求是，比如起初有十条数据，下拉至底部，追加某数量的数据。

比如我的项目中，我把它放在了数据展示的底部，上代码：

<view>
			<template>		
					<u-card :data="tableData" v-for="(item) in tableData" :key="item.id" :show-head="false" >
							<view class="" slot="body">
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2 u-flex u-row-between">
									仓库：{{item.storageName}}
									</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2 u-flex u-row-between">
										品类：{{item.pinleiName}}
										品目：{{item.pinmuName}}
									</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2">名称：{{item.name}} 规格：{{item.guige}} 型号：{{item.xinghao}}</view>
								</view>
								<view class="u-body-item u-flex u-row-between u-p-b-0">
									<view class="u-body-item-title u-line-2">数量：{{item.shuliang}}  单位：{{item.danwei}}</view>
								</view>
							</view>
						</u-card>
						<view class="wrap">
							<u-loadmore :status="status" />
						</view>				
			</template>
		</view>

此处强调的是u-loadmore。

通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore

加载前，显示"加载更多"，加入点击可选，是因为数据不够一页时，无法触发页面的onReachBottom生命周期加载中，显示"正在加载..."，2种动画可选加载后，如果还有数据，回到"加载前"状态，否则加载结束，显示"没有更多了"

核心功能是onReachBottom函数：注意不在methods里面

onReachBottom() {
				if(this.currentPage >= this.pages) return ;
				this.status = 'loading';
				this.currentPage = ++ this.currentPage;
				setTimeout(() => {
					this.getTongji()
					if(this.currentPage >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},

这里的currentPage是当前的页码，pages是总页数，

方法生效时，当前页码自增加一，调用查询数据的方法：

	getTongji:function(){
				this.$u.api.getTongji({"material":this.searchForm,"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
					if(res.code==200){
					res.data.records.forEach(e=>{
						this.tableData.push(e)
					})
					this.pages=res.data.pages
					this.currentPage=res.data.current
					this.totalCount=res.data.total
					}else if(res.code==401){
						uni.navigateTo({
							url:"../login/login"
						})
						
					}else{
							uni.showToast({
								title:"加载错误",
								icon:"none",
							})
						}
				})
			},

注意成功之后的数据应该push进数组中，而不是直接等于，否则就是下拉换页的效果了。