# vue3-scroll-loading

> 一个简单的vue3滚动加载组件

Latest version **0.1.5** (published 2023-07-25) · 0 weekly downloads

## Install

```sh
npm install vue3-scroll-loading
pnpm add vue3-scroll-loading
yarn add vue3-scroll-loading
bun add vue3-scroll-loading
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2023-07-25 |
| First published | 2023-07-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yt |
| Maintainers | dream-life |
| Keywords | vue, vue3, scroll, loading |

## Links

- npm: https://www.npmjs.com/package/vue3-scroll-loading
- Homepage: https://gitee.com/ytyqn/vue3-scroll-loading
- Issues: https://gitee.com/ytyqn/vue3-scroll-loading/issues
- npm.io page: https://npm.io/package/vue3-scroll-loading

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## Recent versions

- 0.1.5 (latest) — 2023-07-25
- 0.1.4 — 2023-07-25
- 0.1.3 — 2023-07-25
- 0.1.2 — 2023-07-25
- 0.1.1 — 2023-07-25
- 0.1.0 — 2023-07-25

## README

# vue3-scroll-loading

一个简单的vue3滚动加载组件

## vue3-scroll-loading的安装
##### pnpm 安装
```sh
pnpm add vue3-scroll-loading
```
##### npm 安装
```sh
npm install vue3-scroll-loading
```

## vue3-scroll-loading的使用
##### 配置
```sh
// 离尾部多少距离时，开始拉数据
// 默认50
props:loadingHeight 

// 获取数据
emits:getData
```
##### 使用范例
```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Scroll } from 'vue3-scroll-loading'
const demoData = ref<number[]>([])
const isLoading = ref(false)
const getData = () => {
  isLoading.value = true
  for (let i = 0; i < 50; i++) {
    demoData.value.push(i)
  }
  isLoading.value = false
}
getData()
</script>

<template>
  <Scroll class="scroll-demo" @getData="getData">
    <div class="demo-item" v-for="(item, index) in demoData" :key="`demo-${index}`">{{ item }}</div>
    <div v-if="isLoading">loading....</div>
  </Scroll>
</template>

<style scoped>
.scroll-demo {
  position: fixed;
  top: 0;
  height: 400px;
  width: 100px;
  background-color: #fff;
  left: 200px;
  color: #000;
}
.demo-item {
  height: 20px;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

```
##### 组件文件：src/components/Scroll.vue
##### 范例文件：App.vue

---
_Source: https://npm.io/package/vue3-scroll-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._