auto-infinite-scroll

基于 vue3 的自动无限滚动插件，常用于大屏滚动数据展示

使用

1. npm i auto-infinite-scroll-component -S
2. 在 main.js 中注册vue插件

import { createApp } from 'vue';
import App from './App.vue';
import AutoInfiniteScroll from 'auto-infinite-scroll-component'

createApp(App).use(AutoInfiniteScroll).mount('#app');

3. 在页面中使用

<template>
  <div style="width: 300px;height: 100px;">
    <auto-infinite-scroll :list="data1.arr" :columns="data1.columns" :speed="0.5" />
  </div>
</template>

<script setup>
import {reactive} from 'vue';

const data1 = reactive({
  columns: [
    { field: 'name', header: '关键字', width: '70%', align: 'left' },
    { field: 'plat', header: '平台' },
    { field: 'num', header: '总量' },
  ],
  arr: [
    { name: '订单1下载失败', plat: '淘宝', num: 10 },
    { name: '订单2下载失败', plat: '京东', num: 20 },
    { name: '订单3下载失败', plat: '拼多多', num: 30 },
  ],
});

</script>