vue3-virtual-list

A virtual list component based on vue3 + ts

Install

npm i vue3-virtual-list-ts --save

or

yarn add vue3-virtual-list-ts

How to use

import { VirtualList } from "vue3-virtual-list-ts"

For Example

<template>
  <div>
    <div class="container">
      <VirtualList :data="data" :onCompelete="onCompelete">
        <template v-slot="{ item }">
          <div class="item" :style="{background: item.background}">
            <div>{{ item.__index__ + 1 }}</div>
          </div>
        </template>
      </VirtualList>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VirtualList from "./index.vue";
const mock = (length = 99999) => {
  return Array.from(Array(length).keys())
  .map(i => ({
    id: i,
    text: i + '项',
    background: `rgb(${~~(Math.random() * 255)},${~~(Math.random() * 255)},${~~(Math.random() * 255)})`
  }))
}

export default defineComponent({
  name: "App",
  data() {
    return {
      data: mock()
    };
  },
  components: {
    VirtualList
  },
  methods: {
    onCompelete(){
      this.data.push(...mock(100))
    }
  }
});
</script>

<style scoped>
.container {
  width: 700px;
  height: 500px;
  margin: 0 auto;
}
.item {
  height: 40px;
  text-align: center;
  line-height: 40px;
}
</style>

Parameter

| parameter | description | type | required | default | | :---------: | :---------------------------------------------------: | :------: | :------: | :-----: | | data | array of all data | Array | √ | | | dataKey | The key used by the loop node | string | √ | id | | itemHeight | the height of each row | number | × | 40 | | dataBuffer | The amount of data retained outside the viewable area | number | × | 50 | | showLoading | show bottom loading | boolean | × | true | | onCompelete | Trigger callback when sliding to the bottom | Function | × | |