更新记录

1.0.0（2026-04-30） 下载此版本

• 支持 uni-refresh-box 组件

平台兼容性

uni-app x(5.0)

自定义下拉刷新组件。

本组件封装了 scroll-view/list-view等滚动容器的下拉刷新功能，使用者只需在滚动容器中加入本组件，设置组件的属性和样式，即可实现自定义下拉刷新功能。

本组件自带一个全平台通用的下拉刷新样式，即左边一个 loading 圈，右边为下拉刷新相关的文字。也提供了各种自定义方法，包括文字、样式，甚至通过插槽传入完全不同的自定义下拉效果。

基本用法

<template>
  <scroll-view
  style="flex: 1;"
  :refresher-enabled="true"
  :refresher-triggered="refreshing1"
  refresher-default-style="none"
  :refresher-threshold="45"
  refresher-max-drag-distance="200px"
  @refresherpulling="onRefresherpulling1"
  @refresherrefresh="onRefresherrefresh1"
  @refresherrestore="onRefresherrestore1"
  @refresherabort="onRefresherabort1"
>
  <!-- 列表内容 -->
  <view v-for="i in listCount1" :key="i" class="content-item">
    <text class="text">item-{{ i }}</text>
  </view>

  <!-- refresher 插槽使用 uni-refresh-box 组件 -->
  <uni-refresh-box
    slot="refresher"
    :pulling-distance="pullingDistance1"
    :refreshing="refreshing1"
  ></uni-refresh-box>
</scroll-view>
</template>

<script setup lang="uts">
const listCount1 = ref(3)
const refreshing1 = ref(false)
const pullingDistance1 = ref(0)

function onRefresherpulling1(e: RefresherEvent) {
  pullingDistance1.value = e.detail.dy
}

function onRefresherrefresh1() {
  refreshing1.value = true
  console.log('列表1 触发刷新')
  setTimeout(() => {
    listCount1.value += 5
    refreshing1.value = false
    console.log('列表1 刷新完成')
  }, 1500)
}

function onRefresherrestore1() {
  pullingDistance1.value = 0
}

function onRefresherabort1() {
  pullingDistance1.value = 0
}
</script>

state 状态说明

Slots