您现在的位置是：首页 >技术杂谈 >虚拟滚动-Vue 展示巨量数据，vue3 使用vue-virtual-scroller 网站首页技术杂谈

上次说到 使用 vue-virtual-scroller  有坑

节后又做了一次，没啥问题了~~

main.ts

// main.ts 引用vue-virtual-scroller

import VueVirtualScroller from "vue-virtual-scroller" // 引入vue-virtual-scroller
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"

const app = createApp(App)
app.use(VueVirtualScroller)

页面使用
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const list=ref<any[]>([]) 

onMounted(()=>{
  list.value=Array.from({ length: 1000000 }).map((_, i) => ({ name: `name-${i}`, id: i }))
})

</script>
<template>
  <div class="staffAwardResult whiteBox">
    <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
     My name is： {
  
  { item.name }}, 18 years old this year
    </div>
  </RecycleScroller>
  </div>
</template>

<style >

.staffAwardResult{
  height: 100vh;
}

.scroller {
  width: 100%;
  height: 100%;
}

.user {
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;

}

.vue-recycle-scroller__item-wrapper .vue-recycle-scroller__item-view {

  &:nth-of-type(2n+1) {
    background-color: rgb(56, 219, 219);
  }

  &:nth-of-type(2n+2) {
    margin-top: 10px;
    background-color: rgb(201, 46, 141);
  }
}

</style>

依旧有一点延迟，但比之前好太多了

但也遇到一些bug，例如：

1. 报错Error in v-on handler: “Error: Rendered items limit reached”

外层div应该设置固定高度，不然 虚拟列表 不起作用

暂时就遇到这些问题，这只是一个demo，后续用到项目上有坑或者bug再分享！！