uni-app小程序开发-下拉刷新和上拉加载更多

下拉刷新

pages.json中添加enablePullDownRefresh属性

1
2
3
4
5
6
7
{
"path": "order/order_list",
"style": {
"navigationBarTitleText": "订单列表",
"enablePullDownRefresh": true
}
}

页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
data() {
return {
orderList: [],
page: 1,
size: 10,
hasMore: true
};
},
// 下拉刷新
async onPullDownRefresh() {
console.log('下拉刷新');
this.page = 1;
this.hasMore = true;
await this.actionList();
uni.stopPullDownRefresh();
},
}

上拉加载更多

1
2
3
4
5
6
7
<scroll-view
scroll-y="true"
@scrolltolower="loadMoreAction"
class="z_height_100vh"
>
<!--数据列表-->
</scroll-view>

注意scroll-view必须有明确的高度(比如固定的高度或者是应为弹性布局而有确定的高度)

JS中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
export default {
data() {
return {
orderList: [],
page: 1,
size: 10,
hasMore: true
};
},
mounted() {
this.actionList();
},
// 下拉刷新
async onPullDownRefresh() {
console.log('下拉刷新');
this.page = 1;
this.hasMore = true;
await this.actionList();
uni.stopPullDownRefresh();
},
methods: {
async loadMoreAction() {
if (this.hasMore) {
console.log('加载更多');
this.page += 1;
await this.actionList();
}
},
async actionList() {
let { page, size, status } = this;
let result = await apiGetOrderList(page, size);
if (result.code == 0) {
if (page == 1) {
this.orderList.length = 0;
}
this.orderList.push(...result.obj);
if (result.obj.length == 0) {
this.hasMore = false;
}
}
}
}
}