vue3-pull-to-refresh

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

vue3-pull-to-refresh

★ 9 Open GitHub ↗

vue3-pull-to-refresh

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

### 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:

```bash
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).                              |
| `ratio`    | `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:

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

### 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`:

```css
html,
body {
    overscroll-behavior-y: contain; /* disables vertical PTR bounce */
}
```

## Changelog

### [Version 1.2.17] - 2025-12-13

-  Fix A high-severity vulnerability related to `validator.js`

### [Version 1.2.16] - 2025-11-30

-   Fix janking on `reload-mode`
-   Fix `box-shadow` on pulling
-   Add `z-index:999999`

### [Version 1.2.15] - 2025-11-30

-   Fix `box-shadow` on pulling

### [Version 1.2.14] - 2025-11-30

### [Version 1.2.13] - 2025-10-24

-   Minor `package.json` fix

### [Version 1.2.12] - 2025-10-21

-   Minor fixes

### [Version 1.2.11] - 2025-10-21

#### Added

-   Add logo

### [Version 1.2.10] - 2025-10-21

#### Updated

-   Rename `coefficient` to `ratio`

### [Version 1.2.9] - 2025-10-21

#### Added

-   Add playground

### [Version 1.2.8] - 2025-10-21

#### Updated

-   Remove requirement to import Vue3PullToRefresh from "@amirafa/vue3-pull-to-refresh";

### [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

---

vue3-pull-to-refresh

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README