Vue Refreshable Scroll View

iOS Style Vue component (for Vue 3.0) that you can pull to refresh.

See Example (sources)

🛠 Installation

npm i vue-refreshable-scroll-view # not available now

🕹 Usage

import { createApp } from 'vue'
import RefreshableScrollView from 'vue-refreshable-scroll-view'

const app = createApp(/* */)

app.use(RefreshableScrollView)

Local Registration

Vue3 Local Registration Guide

<template>
  <div class="h-screen overflow-y-hidden">
    <RefreshableScrollView
      class="h-full overflow-y-auto"
      :on-refresh="onRefersh"
    >
      <template #loading="{ state, progress }">
        <div>
          {{ state }}
        </div>
      </template>
      <div>
        <template v-for="(item, index) in items" :key="index">
          <div>
            {{ item }}
          </div>
        </template>
      </div>
    </RefreshableScrollView>
  </div>
</template>
<script>
import { RefreshableScrollView } from 'vue-refreshable-scroll-view'

export default {
  components: {
    RefreshableScrollView,
  },
  methods: {
    async onRefersh() {
      await work()
    },
  },
}
</script>

⚙️ Options

Props

Name	Type	Default	Description
distanceToRefresh	number	42
damping	number	224
scale	number	0.6	0 ~ 1
onRefresh	function	null	async () => { sleep() }

Events

Name	Type
scroll:event	event

Slots

Name	Prop	Default
default	{ }
loading	{ state: string, progress: number }	{{ state }}