vue3-virtually-list

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	页面到达底部触发