分类：实现虚拟列表

2021
04-09

React实现一个高度自适应的虚拟列表

近期在某平台开发迭代的过程中遇到了超长List嵌套在antdModal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。改造前：我们可以看出来在改造之前，打开编辑窗口Modal的时候会出现短暂的卡顿，并且在点击Cancel关闭后也并不是立即响应而是稍作迟疑之后才关闭的改造后：改造完成后我们可以观察到整个Modal的打开比之前变得流畅了不少，可以做到立即响应用户的点击事件唤起/关闭Modal性能... 继续阅读 >

2020
10-08

vue实现虚拟列表功能的代码

当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10wdom节点,是极其耗费时间的,那我的Macbookair举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data(){return{list:[],//贼大的数组li:{//列表项信息height:50,... 继续阅读 >