# 下拉刷新

pages.json设置对应页面enablePullDownRefresh属性,激活下拉。

{
	"path": "pages/pull_down/index",
	"style": {
		"navigationBarTitleText": "下拉测试",
		"enablePullDownRefresh":true
	}
}
1
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

# 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()

停止当前页面下拉刷新。