PullToRefresh 下拉刷新

通常与 InfiniteScroll 无限滚动组件组合使用。

目前仅支持 touch 事件，请切换到移动端调试模式尝试。

示例

基础用法

<PullToRefresh onRefresh={handleRefresh}>
  <!-- 内容 -->
  {@render content()}
</PullToRefresh>

自定义+震动

<PullToRefresh
  class="-mt-[1px] h-full"
  vibrate
  completeDuration={0}
  onRefresh={handleRefresh}
>
  <!-- 内容 -->
  {@render content()}
  <!-- 自定义头部 -->
  {#snippet header(status, offset)}
    <div class="flex items-center justify-center p-2">
      {#if status === 'refreshing'}
        <Icon
          class="animate-spin rounded-full bg-white p-1 text-blue-600"
          name="refresh"
          size={32}
        />
      {:else}
        <Icon
          class="rounded-full bg-white p-1 {status === 'loosing'
            ? 'text-blue-600'
            : 'text-gray-400'}"
          style="rotate: {offset * 5}deg"
          name="reset-right"
          size={32}
        />
      {/if}
    </div>
  {/snippet}
</PullToRefresh>

PullToRefresh

属性

Header Snippet

Snippet<[status: PullToRefreshStatus, offset: number]>

PullToRefreshStatus

/** 下拉刷新组件状态 */
export type PullToRefreshStatus =
  /** 空闲状态 */
  | 'idle'
  /** 下拉中 */
  | 'pulling'
  /** 下拉超过阈值，释放会触发刷新 */
  | 'loosing'
  /** 刷新中 */
  | 'refreshing'
  /** 完成 */
  | 'complete'

事件