语音聊天室软件开发，长列表虚拟滚动的实现
虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的
笔者以前做过一个特别奇葩的需求，一个C端web项目，列表数据需要通过触底加载，数据量比较庞大 ，如果不加虚拟列表的话，用户一直触底加载会导致页面DOM过多导致卡顿，这时候虚拟列表就排上用场了
实现方案用很多种，这里采用第三方插件形式(对性能要求不高的可以手动实现简易)
插件
虚拟滚动的插件有很多，比如 vue-virtual-scroller、vue-virtual-scroll-list、react-tiny-virtual-list、react-virtualized 等,这里使用vue-virtual-scroller

// 安装插件
npm install vue-virtual-scroller
// main.js
import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.use(VueVirtualScroller)

// 使用
<template> 
  <RecycleScroller 
    class="scroller" 
    :items="list" 
    :item-size="32" 
    key-field="id" 
    v-slot="{ item }"> 
      <div class="user"> {{ item.name }} </div>
  </RecycleScroller> 
</template>

以上就是语音聊天室软件开发，长列表虚拟滚动的实现， 更多内容欢迎关注之后的文章