下拉刷新

小明的学习圈子

下拉刷新

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

{
	"path": "pages/pull_down/index",
	"style": {
		"navigationBarTitleText": "下拉测试",
		"enablePullDownRefresh":true
	}
}

代码示例

<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>

onPullDownRefresh

在 js 中定义onPullDownRefresh处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。

  • 需要在pages.json里,找到的当前页面的pages节点,并在style选项中开启enablePullDownRefresh
  • 当处理完数据刷新后,uni.stopPullDownRefresh可以停止当前页面的下拉刷新

uni.startPullDownRefresh(OBJECT)

开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

OBJECT 参数说明

参数名类型必填说明
successFunction接口调用成功的回调
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

属性类型描述
errMsgString接口调用结果

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

Last Updated 2023/11/20 22:02:33