基于duilib的虚拟列表实现

勿忘初心2018-12-13 17:15

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



在邮箱大师选择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,向上滚动到临界条件

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


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


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

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


相关文章:
【推荐】 react技术栈实践(2)
【推荐】 编写一个供浏览器端使用的NPM包
【推荐】 InnoDB记录压缩及使用分析