Vue 3 Pull-to-Refresh

A Vue 3 package that enables a pull-to-refresh experience for touch screens.

Installation

To install the package, use the following command:

npm i @amirafa/vue3-pull-to-refresh

Usage

Props

| Prop | Type | Default | Description | |---------------|-----------------|---------|----------------------------------------------------| | distance | Number | 50 | Specifies the height of pulling. | | duration | Number | 2000 | Delay (in milliseconds) since the refresh action. | | size | Number | 32 | Size of the icon (in pixels). | | coefficient | Number | 2.5 | Power of reaching the distance. | | noreload | Boolean | false | Reload window on refresh. | | options | Object | {} | Customization options for icon color and background color. |

Options Object Properties

| Property | Type | Default | Description | |------------|----------|-----------|----------------------------------------------| | color | String | #000 | The color of the icon. | | bgColor | String | #fff | The background color of the icon or element. |

Emit

| Emit | Description | |-------------|-------------------------------------------------------------------------------| | onrefresh | Emit after refreshing |

Slot

| Slot | Description | |-------------|-------------------------------------------------------------------------------| | default | Customized Element for icon |

Example Usage

Here's an example of how to use the vue3-pull-to-refresh component in your Vue 3 project:

<template>
  <Vue3PullToRefresh 
    :distance="50" 
    :duration="2000" 
    :size="32" 
    noreload
    :options="{ color: '#111', bgColor: '#fff' }"
    @onrefresh="()=>{console.log('refreshed')}"
  />
</template>

<script setup lang="ts">
//@ts-ignore
import Vue3PullToRefresh from '@amirafa/vue3-pull-to-refresh';
//import '@amirafa/vue3-pull-to-refresh/dist/style.css'; deprecated
</script>

Note on @ts-ignore

To prevent TypeScript type-checking errors when importing third-party libraries that may lack complete type definitions, you can use // @ts-ignore above the import statement. This directive tells the TypeScript compiler to ignore the next line, avoiding potential type-related warnings or errors.

Preventing Interference with Chrome Mobile Refresh

To prevent conflicts with the native refresh mechanism on Chrome Mobile, add the following CSS to the body:

body {
  overscroll-behavior: none;
}

Changelog

[Version 1.2.7] - 2024-11-06

Updated

• Remove requirement to import style.css

[Version 1.2.2] - 2024-11-06

Added

• Github packages config

[Version 1.2.1] - 2024-11-06

Updated

• add ChangeLog to README

[Version 1.2.1] - 2024-11-06

Fixed

• bug on interference with touch clicks