基于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，向上滚动到临界条件

特别注意：存在靠近顶部时从新布局的状况，此时，与上面图不一样的是，大部分项会布局在下面，少部分在上面，可是没有关系，由于此后向上滚动，不会再触发从新布局。

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

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

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

相关文章：
【推荐】 网易蜂巢（云计算基础服务）MongoDB服务重磅来袭
【推荐】 用双十一的故事串起碎片的网络协议（中）