vue3-virtrally-list vue虚拟滚动列表组件

vue3-virtrally-list 使用

import 'vue3-virtually-list/style.css';
import VueVirtualList from 'vue3-virtually-list'
// items属性传入要渲染的列表数据，比如virtualList，itemHeight 属性是每一项的高度
<VueVirtualList :items="virtualList" :itemHeight="60">
  <template #default="{ item }">
    <div class="virtual-item">{{ item }}</div>
  </template>
</VueVirtualList>
const virtualList = Array.from({ length: 1000 }, (_, i) => `列表项 ${i + 1}`)

如果 scrollImmediate 属性为false时，请设置 scroll-container 列表高度要小于滚动的高度，才能正常滚动。比如每一项高度为50，每一页为10条数据，就设置scroll-container 高度小于500 。

/* 自定义虚拟滚动列表高度 */
  .scroll-container {
    height: 400px;
  }
  /* 自定义列表每一项的样式 */
  .virtual-item {
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
  }

属性 Props

| 属性名 | 类型 | 描述 | Default | | :--: | :--: | :--: | :--: | | items | Array | 列表数据 | [] | | itemHeight | Number | 行高 | 50 | | scrollImmediate | Boolean | 是否立即执行onreachBottom加载方法，以防初始状态下内容无法撑满容器。 | true |

事件

| 事件名 | 类型 | 描述 | | :--: | :--: | :--: | | onreachBottom | Function | 页面到达底部触发 |