vue3长列表优化，使用vue-virtual-scroller实现直播间弹幕列表虚拟滚动效果

<template>
  <div class="live-danmaku-container">
    <vue-virtual-scroller
      :items="danmakuList"
      :item-height="30"
      :remain="7"
      @update="scrollToBottom"
    >
      <template v-slot:default="{ item }">
        <div class="live-danmaku-item">{{ item.text }}</div>
      </template>
    </vue-virtual-scroller>
  </div>
</template>
 
<script>
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
export default {
  components: {
    VueVirtualScroller
  },
  data() {
    return {
      danmakuList: [] // 假设这里是一个长达弹幕列表数据
    }
  },
  methods: {
    scrollToBottom(startIndex) {
      // 滚动到列表底部
      this.$nextTick(() => {
        const container = this.$el.querySelector('.live-danmaku-container')
        container.scrollTop = container.scrollHeight
      })
    },
    addDanmaku(danmaku) {
      // 添加新弹幕，并保持列表在底部
      this.danmakuList.push(danmaku)
    }
  }
}
</script>
 
<style scoped>
.live-danmaku-container {
  height: 150px; /* 设置合适的高度 */
  overflow-y: auto;
  position: relative;
}
.live-danmaku-item {
  height: 30px; /* 设置每个弹幕项的高度 */
}
</style>

这个代码实例展示了如何在Vue 3项目中使用vue-virtual-scroller组件来优化长列表的渲染性能。通过设置合适的高度和每个列表项的高度，可以确保在有大量数据的情况下也能高效地进行滚动。scrollToBottom方法确保了在数据更新时列表能自动滚动到底部，提供了更好的用户体验。