virtual-scroll-list-liudingkang
TypeScript icon, indicating that this package has built-in type declarations

6.2.0 • Public • Published

virtual-scroll-list

Is a virtual-scroll-list developed based on Vue3.

  • 💪 90%+ Unit test coverage
  • 💪 Written in TypeScript
  • 🍭 Support DynamicList and FixedSizeList
  • 🍭 Support Tree Shaking
  • 🍭 Support import on demand
  • 🍭 Support auto-import and provide a solver

Useage

Init

pnpm add virtual-scroll-list-liudingkang
import { createApp } from 'vue'
import App from './App.vue'
import Comps from 'virtual-scroll-list-liudingkang'
import 'virtual-scroll-list-liudingkang/es/style.css'

createApp(App).use(Comps).mount('#app')

Demo

<script setup lang="ts">
  const genText = (base = 15) => {
    const times = base + Math.ceil((Math.random() - 0.5) * base);
    return Array(times)
      .fill(1)
      .map(() => 'every')
      .join(' ');
  };
  const mockData = (num = 20) => {
    let data = [];
    for (let index = 0; index < num; index++) {
      const times = 30 + Math.ceil((Math.random() - 0.5) * 30);
      data.push(genText(times));
    }
    return data;
  };
  const data = mockData(5000);
</script>

<template>
  <LdkDynamicList
    :item-size="70"
    item-class="item"
    :width="300"
    :height="300"
    :data="data"
  >
    <template #default="{ item, index }">
      <div :class="['list-item', index % 2 ? 'list-item-odd' : 'list-item-even']">
        {{ item }}
      </div>
    </template>
  </LdkDynamicList>
</template>

<style scoped>
  .list-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-odd {
    background-color: rgb(229 178 38);
  }

  .list-item-even {
    background-color: cadetblue;
  }
</style>

Attributes

Name Description Type Default Other
itemSize 每一项的高度 number 70 单位为px
itemClass 每一项的自定义 class string
itemKey 每一项的 key string/number id
data 数据 any []
width 可视区域宽度 number/string 100%
height 可视区域高度 number/string 300 当是 number 时单位为px
cache 上下缓冲数量 number 2 单位为px
distance 触底加载阈值 number 0 单位为px

Events

Name Description Type
load 达到加载阈值时触发的事件 Function

Package Sidebar

Install

npm i virtual-scroll-list-liudingkang

Weekly Downloads

55

Version

6.2.0

License

MIT

Unpacked Size

543 kB

Total Files

101

Last publish

Collaborators

  • grey_coat