uniapp分页u-loadmore加载更多uview-ui小程序分页app分页处理

web前端妹子

已于 2023-03-23 11:42:45 修改

阅读量1.3k

点赞数 2

分类专栏： uniapp 文章标签： uni-app

于 2023-03-07 10:34:53 首次发布

本文链接：https://blog.csdn.net/qq_39695210/article/details/129376572

版权

本文介绍了如何在uniapp中使用u-view UI的u-loadmore组件进行分页加载更多数据。分为前端自定义分页条数通过page、pageSize参数传递给后端，以及后端固定分页条数不依赖pageSize，通过当前页和最后一页进行判断两种方式。同时，文章邀请读者点赞、收藏并提供了交流QQ群号。

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

uniapp分页u-loadmore加载更多uview-ui，小程序分页app分页处理

1.前端自定义分页条数传page、pageSize参数给后端，根据第一页、总条数判断

<template>
	<view>
		<!-- 页面 -->
		<u-loadmore class="loadmore" :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>

</template>
<script>
	export default {
		data() {
			return {
				page: 1,//当前页
				pageSize: 10,//每页条数
				status: 'loadmore', //加载的状态
				iconType: 'flower', //加载菊花icon
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				cateringList: [], //商家列表
			}
		}
	}



	//分页触底
	onReachBottom() {
			//正在加载或加载完退出
			if (this.status == 'loading' || this.status == 'nomore') {
				re