vue3-scroll-loading

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

vue3-scroll-loading的安装

pnpm 安装

pnpm add vue3-scroll-loading

npm 安装

npm install vue3-scroll-loading

vue3-scroll-loading的使用

配置

// 离尾部多少距离时，开始拉数据
// 默认50
props:loadingHeight 

// 获取数据
emits:getData

使用范例

<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