# vue3-scroll-loading

**Repository Path**: ytyqn/vue3-scroll-loading

## Basic Information

- **Project Name**: vue3-scroll-loading
- **Description**: vue3下拉式分页
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-25
- **Last Updated**: 2023-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

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