uniapp处理下拉刷新与上拉加载

原创于 2020-05-26 22:31:56 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了在uni-app中实现下拉刷新和上拉加载功能的方法。包括在pages.json中配置页面的下拉刷新和上拉加载属性，以及在页面中编写对应的onPullDownRefresh和onReachBottom事件处理函数。

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

下拉刷新

1.在pages.json里面想要下拉刷新的页面配置下拉刷新
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh":true
			}
		}
	]
2.在页面中与生命周期同级写上onPullDownRefresh(){}函数
3.通过点击事件触发startPullDownRefresh()函数

注：下面依赖与上面，我第一个没写，第二个就没有执行

上拉加载

1.在pages.json里面想要下拉刷新的页面配置下拉刷新
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh":true,
				"onReachBottonDistance":200    // 距离底部多少距离的时候触发
			}
		}
	]
2.在页面中与生命周期同级写上onReachBotton(){}函数