PullToRefresh

Drag down to reload

Pull down at the top of a list to reload it, the way phone apps do. It only works by touch, so also give a visible refresh button for everyone else.

Basic

↓

• 第1話
• 第2話
• 第3話
• 第4話
• 第5話
• 第6話

Or drag down from the top of the list; past 64px the arrow flips — release to refresh.

<script setup lang="ts">
import { ref } from "vue";
import {
  BlessButton,
  BlessListItem,
  BlessList,
  BlessMockup,
  BlessPullToRefresh,
  BlessText,
} from "blessing-ui";
const items = ref(Array.from({ length: 6 }, (_, i) => `第${i + 1}話`));
let n = 6;
function refresh(done: () => void) {
  setTimeout(() => {
    items.value.unshift(`第${++n}話 (new)`);
    done();
  }, 900);
}
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessMockup type="phone" style="width: 260px">
      <BlessPullToRefresh style="height: 100%; overflow-y: auto" @refresh="refresh">
        <BlessList>
          <BlessListItem v-for="t in items" :key="t">{{ t }}</BlessListItem>
        </BlessList>
      </BlessPullToRefresh>
    </BlessMockup>
    <div class="col" style="max-width: 260px">
      <!-- pulling is touch-only: the same reload, for everyone else -->
      <BlessButton size="sm" variant="outline" @click="refresh(() => {})">Refresh</BlessButton>
      <BlessText size="sm" muted
        >Or drag down from the top of the list; past 64px the arrow flips — release to
        refresh.</BlessText
      >
    </div>
  </div>
</template>

• @refresh gets a done callback; call it when the reload has finished. "Refreshing" (refreshingLabel) is announced meanwhile.
• threshold is how far to pull; scrollTarget is the container whose top counts, when it isn't the wrapper.

Usage

import { BlessPullToRefresh } from "blessing-ui";

API

Props

Name	Type	Default	Description
threshold	number	64	px of pull that triggers a refresh
max	number	96	max visual travel
disabled	boolean	—
scrollTarget	HTMLElement | null	—	scroll container to check; default = the wrapper itself, falling back to window
refreshingLabel	string	"Refreshing"	announced while refreshing

Events

Name	Payload	Description
refresh	[done: () => void]

Slots

Name	Scope	Description
indicator	{ ready: boolean; busy: boolean; pull: number; }
default	—