语音聊天室软件开发，长列表虚拟滚动的实现

语音聊天室软件开发，长列表虚拟滚动的实现
虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的
笔者以前做过一个特别奇葩的需求，一个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>

 

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