@webdevil/vue3-virtual-list v1.0.1

vue3-virtual-list

基于vue3的虚拟列表

安装

npm

npm install @webdevil/vue3-virtual-list --save

yarn

yarn add @webdevil/vue3-virtual-list

使用

<template>
  <div style="width: 300px; height: 500px; margin: 50px auto;">
    <virtual-list :items="items" itemKey="id">
      <template v-slot="{ item, index }">
        <div style="padding: 50px; border-bottom: 1px solid #eee">index：{{ index }}-{{ item.name }}</div>
      </template>
    </virtual-list>
  </div>
</template>

// js
import { defineComponent, onMounted, ref } from 'vue'
import VirtualList from '@webdevil/vue3-virtual-list'
import "@webdevil/vue3-virtual-list/lib/index.css"

interface IItems {
  name: string;
  id: number
}

export default defineComponent({
  name: 'VirtualListDemo',
  components: {
    VirtualList
  },
  setup() {
    // 所有数据列表
    const items = ref<IItems[]>([])

    onMounted(() => {
      const list: IItems[] = []
      for(let i=0;i<10000; i++) {
        list.push({
          name: 'item_' + i,
          id: i
        })
      }
      items.value = list
    })

    return {
      items
    }
  }
})

props参数

slot参数

效果展示

源码地址

github