uniapp 配置上拉加载、下拉刷新

web前端

1、在 pages.json 中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
	"path": "",
	"style": {
		"navigationBarTitleText": "",
    <!-- 是否使用下拉刷新 -->
		"enablePullDownRefresh": true,
    <!-- 配置上拉加载距离 -->
		"onReachBottomDistance": 100,
		"h5": {
      <!-- 配置下拉刷新距离 -->
			"pullToRefresh": {
				"offset": "30px"
			}
		}
	}
},

2、页面使用 API 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 下拉刷新
async onPullDownRefresh() {
  <!-- 停止下拉刷新 -->
	uni.stopPullDownRefresh();
},
// 上拉加载(一般与<uni-load-more :status="status" />配合使用)
async onReachBottom() {
  <!-- 正在加载 -->
  this.status = "loading";
  <!-- 上拉加载 -->
	this.status = "more";
  <!-- 没有更多 -->
	this.status = "noMore";
},