Vitrual-list虚拟列表

对数量大的数据进行按需渲染，只渲染可视区域和渲染部分非可视区域的数据

基础用法

将我们需要渲染额数据组件作为参数传入到virtual-scroll-list组件中

1

Shirley Jones

况消论所收们克题老位年他报革解身转交响况时只律见基办子前建它低走调广手你目温家到听运半外亲难众儿论非计所风数府石音率知次值工状属称新结主。

<script lang="ts" setup>
import mockjs from "mockjs";
const { Random } = mockjs;
import { ref, h } from 'vue';
import { DefineComponent, defineComponent } from 'vue';
const totalCount = 100

interface DataType {
  id: number,
  name: string,
  desc: string,
  index: number
}
const data: Array<DataType> = []
let index = 0  
while(index++ !== totalCount) {
  data.push({
    id: index,
    name: Random.name(),
    desc: Random.csentence(20, 120),
    index,
  })
}
const items = ref(data)
const Item = defineComponent({
  name: 'Item',
  props: {
    source: {
      type: Object,
      required: true,
    },
  },
  render() {
    // 使用 h 函数创建虚拟 DOM 节点，并从 props 中获取字段
    return h('div', {
      class: 'item',
      // 绑定 data-index 属性
      'data-index': this.$props.source.index,
    }, [
      // 头部区域
      h('div', {
        class: 'head',
        style: {
          color: '#3451B2',
          fontWeight: 'bold',
          marginBottom: '20px',
          fontSize: '35px',
        },
      }, [
        h('div', {}, this.$props.source.index),
        h('div', {}, this.$props.source.name),
      ]),
      // 内容区域
      h('div', {
        class: 'body',
        style: { fontSize: '18px' },
      }, [
        h('span', {}, this.$props.source.desc),
      ]),
    ]);
  },
});
</script>
  <vt-virtual-scroll-list
    class="virtual-list"
    :data-sources="items"
    data-key="id"
    :keeps="30"
    :estimate-size="70"
    :data-component="(Item as DefineComponent<{}, {}, any>)"
  >
  </vt-virtual-scroll-list>

<style lang="scss">
.virtual-list {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #afafaf;
  padding: 0 15px;
}
</style>

属性

名称	类型	默认值	说明
dataSources	Array	-	数据源
dataKey	string	-	渲染列表的key值
keeps	number	30	保持展示的数量
estimateSize	number	70	默认建立的大小
dataComponent	Object/Function		需要渲染的组件