基于duilib的虚拟列表实现

本文由作者邹启文授权网易云社区发布。

在邮箱大师选择duilib作为UI开发库后，我们面临这样一个问题。随着时间的积累，用户数据会越来越多，如何保证我们的软件在展示这些数据时依然保持非常好的体验？

原生态duilib列表的实现是，数据与控件（列表的每一项）一一对应，即有多少数据，便有多少控件。通过粗略测试，我们发现，当数据量达到10000封邮件时，仅仅是构造这10000个控件就需要花费16s，也就是说在这16s内，用户无法操作软件，这是我们无法接受的。所以，我们决定改进duilib列表，通过虚拟化的方式解决这个问题。

虚拟化，就是，对于10000封邮件，我们并不需要构造10000个控件，因为真正可以让用户看见的不超过20（根据屏幕高度和控件高度计算）个控件，那么，我们可以通过反复利用这20个控件来达到展示10000封邮件的目的。

那么，具体如何实现呢？很简单，在鼠标上下滚动的时候，我们对这20个控件重新布局（更改其位置）和更新其内容。

但是，产品和视觉提出了一个需求，给列表滚动加上动画效果，即用户滚动列表松开鼠标后，列表内容仍要向上或向下以一定的速度前进，之后才停下来。那么，上面的方案便行不通，因为20个控件在滚动时不断重新布局和更新内容比较耗时，会导致列表出现卡顿式的前进，用户体验太差。如何解决这个问题呢？

我们的解决办法是采用100个控件。这样，在滚动时判断是否需要重新布局，如果不需要，则直接刷新绘制新的邮件内容，如果到了临界条件，那么再重新布局然后绘制新的邮件内容。具体做法如下：

临界条件的判断：

　　假设滚动条的位置为yScrollPos，列表的区域为rcList，第一个列表项的位置为rcFirst，最后一个列表项的位置为rcLast。

　　当yScrollPos > (rcLast.bottom-rcList.top)-rcList.Height时，为向下滚动的临界条件；

　　当yScrollPos < rcFirst.top-rcList.top时，为向上滚动的临界条件。

1，向下滚动到临界条件

特别注意：存在靠近最底部时重新布局的情况，100个列表项的后面不可见的一部分项可以置为无效。

2，向上滚动到临界条件

特别注意：存在靠近顶部时重新布局的情况，此时，与上面图不同的是，大部分项会布局在下面，少部分在上面，但是没有关系，因为此后向上滚动，不会再触发重新布局。

目前邮箱大师中，虚拟列表应用在邮件列表、通讯录列表、写信联系人列表等，极大提高了软件运行性能和体验，而且运行稳定。

免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐

更多网易技术、产品、运营经验分享请访问网易云社区。

相关文章：
【推荐】 npm和package.json那些不为常人所知的小秘密
【推荐】 视觉设计师的进化
【推荐】 验证码的作用