# 下拉刷新
pages.json设置对应页面enablePullDownRefresh属性,激活下拉。
{
"path": "pages/pull_down/index",
"style": {
"navigationBarTitleText": "下拉测试",
"enablePullDownRefresh":true
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 代码示例
<template>
<view>
{{ text }}
</view>
</template>
<script>
// 仅做示例,实际开发中延时根据需求来使用。
export default {
data() {
return {
text: 'ruoyi-app'
}
},
onLoad: function(options) {
setTimeout(function() {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
}
}
</script>
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
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
# onPullDownRefresh
在 js 中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
- 需要在
pages.json里,找到的当前页面的pages节点,并在style选项中开启enablePullDownRefresh - 当处理完数据刷新后,
uni.stopPullDownRefresh可以停止当前页面的下拉刷新
# uni.startPullDownRefresh(OBJECT)
开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
OBJECT 参数说明
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success 返回参数说明
| 属性 | 类型 | 描述 |
|---|---|---|
| errMsg | String | 接口调用结果 |
# uni.stopPullDownRefresh()
停止当前页面下拉刷新。