上拉加载更多和下拉刷新（uni-app）

最新推荐文章于 2025-09-20 11:05:27 发布

原创最新推荐文章于 2025-09-20 11:05:27 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #uni-app

javascript 同时被 3 个专栏收录

24 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

uni-app

10 篇文章

订阅专栏

本文介绍了如何在小程序和APP中实现下拉刷新和上拉加载更多的功能。首先，在pages.json配置文件中设置相应的距离触发事件，然后在页面的js文件中声明并实现onReachBottom和onPullDownRefresh事件处理函数，完成数据的更新和页面状态的控制。在处理完刷新后，记得调用uni.stopPullDownRefresh()来停止下拉刷新。这些技巧对于提升用户体验至关重要。

// 上拉加载更多数据
// 1. 打开项目根目录中的 pages.json 配置文件, 为需要上拉加载更多页面配置上拉触底距离, 如下:
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"onReachBottomDistance": 150  //滚动页面到距离底部150px时，就会触发onReachBottom事件
		}
	}]
// 2. 在上面的页面中, 和 methods 节点平级, 声明 onReachBottom 事件处理函数, 用来监听页面的上拉触底行为
	// 触底事件
	onReachBootom () {
		
	}

// 下拉刷新
// 1. 在 pages.json 配置文件中, 当前的页面单独开启下拉刷新效果
	pages:[{
		"path": "pages/index/index",
		"style": {
			"onReachBottomDistance": 150,
			"enablePullDownRefresh": true, // 开启下拉刷新功能
			"backgroundColor": "#F8F8F8"
		}
	}]
// 2.在上面的页面中, 和 methods 节点平级, 声明 onPullDownRefresh 事件处理函数, 用来监听下拉刷新行为
	// 下拉刷新事件
	onPullDownRefresh () {
	
	}
	// 当处理完数据刷新后, 可停止当前页面的下拉刷新。
	uni.stopPullDownRefrash()