Vue使用三方工具vueUse实现虚拟列表

<template>
  <div v-bind="containerProps" style="height: 500px" class="container">
    <div v-bind="wrapperProps" class="slot">
      <div v-for="item in list" :key="item.data.id" style="height: 40px">
        Row: {{ item.data }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useVirtualList } from '@vueuse/core'
import { onMounted, ref } from 'vue'
type Item = {
  id: number
  name: string
}

// 所有的数据，比如这个数组存放了十万条数据
const allListData = ref<Item[]>([])
// 获取十万条数据
const getData = () => {
  for (let i = 0; i < 10000; i++) {
    allListData.value.push({ name: `第${i}条数据`, id: i })
  }
}

onMounted(() => {
  getData()
})

const { list, containerProps, wrapperProps } = useVirtualList(allListData, {
  // 此处配置的高度一定要和31行渲染时每一行的高度相同
  itemHeight: 40
})
</script>

<template>
  <div v-bind="containerProps" style="height: 500px" class="container">
    <div v-bind="wrapperProps" class="slot">
      <div v-for="item in list" :key="item.data.id" style="height: 40px">
        Row: {{ item.data }}
      </div>
    </div>
  </div>
</template>
  
<style scoped lang="scss">
.container {
  border: 1px solid black;
}
</style>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

type Item = {
  id: number
  name: string
}

// 所有的数据，比如这个数组存放了十万条数据
const allListData = ref<Item[]>([])
// 获取十万条数据
const getData = () => {
  for (let i = 0; i < 10000; i++) {
    allListData.value.push({ name: `第${i}条数据`, id: i })
  }
}

onMounted(() => {
  getData()
})

// 每一项的高度，比如 40 像素
const itemHeight = ref(40)
</script>

<template>
  <RecycleScroller
    class="viewport"
    :items="allListData"
    :item-size="itemHeight"
    key-field="id"
    v-slot="{ item }"
    item-class="item"
  >
    {{ item.name }}
  </RecycleScroller>
</template>

<style scoped lang="scss">
.viewport {
  box-sizing: border-box;
  width: 240px;
  height: 400px;
  border: solid 1px #000000;
  // 开启滚动条
  overflow-y: auto;

  <!-- 由于模板中使用了 item-class 属性将渲染的每一项的类名改为 item，所以这里开启深层次的样式修改-->
  :deep(.item) {
    box-sizing: border-box;
    width: 100%;
    height: 40px;		// 高度设置得和 item-size 属性的值一致。表示每一项的高度
    display: flex;
    justify-content: center;
    align-items: center;
    // 隔行变色
    &:nth-child(even) {
      background: skyblue;
    }
    &:nth-child(odd) {
      background: red;
    }
  }
}
</style>