VueEasyPullRefresh

VueEasyPullRefresh is a lightweight, easy-to-use pull-to-refresh plugin for Vue 3. With just a few lines of code, you can add pull-to-refresh functionality to your app, supporting both mobile and desktop platforms. Customize the loader, control refresh behavior, and manage asynchronous tasks seamlessly.

Installation

Install VueEasyPullRefresh via npm:

1npm install vue-easy-pull-refresh

Setup

To use VueEasyPullRefresh in your Vue 3 project, follow these simple steps:

Import

Import the component into your Vue component:

1<template>
2  <VueEasyPullRefresh>
3    <!-- content -->
4  </VueEasyPullRefresh>
5</template>
6
7<script setup>
8import { VueEasyPullRefresh } from 'vue-easy-pull-refresh';
9</script>

Props

Prop	Type	Default	Description
isRefreshContent	Boolean	true	Enable or disable refresh content
isAppearAnimation	Boolean	true	Enable or disable the opacity animation (only when isRefreshContent is true)
isDisabled	Boolean	false	Disable pull-to-refresh functionality
pullDownThreshold	Number	64	The distance required for the user to pull down to trigger refresh

Events

• reached: Emitted when the pull-to-refresh threshold is reached and the refresh process begins.
• settled: Emitted when the refresh animation is fully completed and the component has returned to its idle state.

Slots

• loader: Customize the loading indicator shown during refresh. If not provided, a default loader will be used.

Usage with useEasyPullRefresh

In some cases, you may need to interact directly with the pull-to-refresh logic within your component. You can use the useEasyPullRefresh function to add asynchronous tasks to the refresh queue.

1<template>
2  <VueEasyPullRefresh ref="refRefresh" :is-refresh-сontent="false">
3    <TestScreen />
4  </VueEasyPullRefresh>
5</template>
6
7<script setup>
8import { VueEasyPullRefresh, useEasyPullRefresh } from 'vue-easy-pull-refresh';
9
10const { refRefresh, pullDownQueueAdd } = useEasyPullRefresh();
11
12const request = () => {
13  return new Promise(resolve => setTimeout(resolve, 2000)); // Simulate async task
14};
15
16pullDownQueueAdd(request);
17</script>

License

This project is licensed under the MIT License - see the LICENSE file for details.