CN115421691A - 一种基于虚拟列表的数据滚动方法、装置及计算机设备 - Google Patents

Abstract

本文涉及一种基于虚拟列表的数据滚动方法、装置及计算机设备。该方法包括根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并显示；确定用户滑动的当前显示区域中的指定数据与虚拟列表渲染的首个数据的滚动距离；当滚动距离超出第一预设距离阈值，在显示区域添加数据返回滚动标识；当用户点击所述数据返回滚动标识，根据滚动距离的值，设定数据返回滚动速度；将虚拟列表已渲染的数据从显示区域滚动返回至所述首个数据。本方案记录列表数据序号和滚动距离，对于超出渲染数据阈值的情况，先回到阈值，再设置每一步滚动的距离回到首个数据，在避免滚动过程中因未及时渲染而出现白屏的同时，也实现了动态滚动回到顶部的效果。

Description

一种基于虚拟列表的数据滚动方法、装置及计算机设备

技术领域

本文涉及程序开发领域，尤其是一种基于虚拟列表的数据滚动方法、装置及计算机设备。

背景技术

当前的技术论坛和网站上已有大量模拟页面回到列表顶部的方法，这些技术均依赖于div中加载的数据项已超出可视区域，且在div中出现滚动条的场景，在回到顶部的过程中需要操作滚动条回到列表顶部。

在不考虑设备性能的前提下，现有技术优先使用列表加载和渲染所有的数据，当设备的容器div因为加载和渲染的数据过多，超出设备可显示区域的范围而出现滚动条时，可以通过操作滚动条使列表快速回到顶部。但是，受设备实际性能的限制，在加载超一定数量的数据时，会出现内存溢出，导致页面白屏等异常。

针对目前技术中需要操作滚动条回到列表顶部、出现白屏的问题，需要一种基于虚拟列表的数据滚动方法及装置。

发明内容

为解决上述现有技术的问题，本文实施例提供了一种基于虚拟列表的数据滚动方法、装置、计算机设备、计算机可读存储介质及计算机程序产品。

本文实施例提供了一种基于虚拟列表的数据滚动方法，所述方法包括：根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示；确定用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离；当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识；当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度；根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首行数据。

根据本文实施例的一个方面，所述确定用户滑动的当前显示区域的指定数据与所述虚拟列表渲染的首个数据的滚动距离包括：对所述待显示数据中的每一项数据，设置数据序号；根据所述指定数据的序号、所述首个数据的序号及当前显示区域的数据容量，确定所述当前显示区域与所述虚拟列表渲染的首个数据的滚动距离，所述数据容量为当前显示区域能够容纳数据的数量。

根据本文实施例的一个方面，确定当前显示区域的数据容量包括：获取用户端设备的型号及用户设定的数据字体格式；根据用户端设备的型号，确定用户端显示区域的尺寸；根据用户设定的数据字体格式，确定用户端的显示区域中能够容纳的数据的数量。

根据本文实施例的一个方面，当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度包括：根据所有待显示数据的序号及当前显示区域的数据容量，确定所有待显示数据占据的长度；判断所述滚动距离的值与所有待显示数据占据的长度的比值，是否超过第一预设比例；若所述比值未超过第一预设比例，设定数据返回的第一滚动速度；判断所述比值是否超过第二预设比例，若所述比值大于所述第一预设比例，并未超过第二预设比例，设定数据返回的第二滚动速度；若所述比值大于第二预设比例，设定数据返回的第三滚动速度。

根据本文实施例的一个方面，根据所述返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据在所述显示区域滚动返回至所述首个数据包括：当所述比值未超过第一预设比例，根据所述滚动距离的值与所述第一滚动速度，将已渲染的数据滚动不厚返回；当所述比值大于第一预设比例，根据第二预设距离阈值及所述第二滚动速度或所述第三滚动速度，将已渲染的数据滚动返回。

根据本文实施例的一个方面，所述方法进一步包括：根据显示区域所属设备的硬件性能确定数据返回滚动速度，或根据虚拟列表的渲染数据高度，确定数据返回滚动速度。

根据本文实施例的一个方面，所述第一预设距离阈值为所述显示区域的尺寸的整数倍。

根据本文实施例的一个方面，所述方法还包括：获取用户在当前显示区域的特定数据，所述特定数据用户标记过的数据；根据所述数据滚动速度及滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述特定数据。

本文实施例提供了一种基于虚拟列表的数据滚动装置，所述装置包括：数据显示单元，用于根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示；距离确定单元，用于用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离；数据返回滚动标识增加单元，用于当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识；返回滚动速度设定单元，用于当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度；返回滚动单元，用于根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首个数据。

本文实施例提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现所述基于虚拟列表的数据滚动的方法。

本文实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现所述基于虚拟列表的数据滚动的方法。

本文实施例提供了一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现所述基于虚拟列表的数据滚动的方法。

本方案在基于虚拟列表的技术和场景下，通过记录当前展示的列表数据序号，和已滚动的数据距离首个数据的距离，对于超出虚拟列表设置的渲染数据阈值的情况下，先回到阈值，再通过设置每一步滚动的距离回到首个数据，在避免滚动过程中因未及时渲染而出现白屏的同时，也实现了动态滚动回到顶部的效果。

附图说明

为了更清楚地说明本文实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本文的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1所示为本文实施例一种基于虚拟列表的数据滚动方法的流程图；

图2所示为本文实施例一种确定滚动距离的方法流程图；

图3所示为本文实施例一种确定当前显示区域的数据容量的方法流程图；

图4所示为本文实施例一种设定数据返回滚动速度的方法流程图；

图5所示为本文实施例一种将数据在显示区域滚动返回至首个数据的方法流程图；

图6所示为本文实施例一种确定数据返回滚动速度的方法流程图；

图7所示为本文实施例一种基于虚拟列表的数据滚动方法的流程图；

图8所示为本文实施例一种基于虚拟列表的数据滚动装置的结构示意图；

图9所示为本文实施例基于虚拟列表的数据滚动装置的具体结构示意图；

图10所示为本文实施例一种计算机设备的结构示意图。

附图符号说明：

801、数据显示单元；

802、滚动距离确定单元；

8021、数据序号设置模块；

8022、显示区域数据容量确定模块；

803、数据返回滚动标识增加单元；

804、返回滚动速度设定单元；

8041、硬件性能获取模块；

8042、渲染数据高度获取模块；

805、返回滚动单元；

1002、计算机设备；

1004、处理器；

1006、存储器；

1008、驱动机构；

1010、输入/输出模块；

1012、输入设备；

1014、输出设备；

1016、呈现设备；

1018、图形用户接口；

1020、网络接口；

1022、通信链路；

1024、通信总线。

具体实施方式

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本文实施例中的附图，对本文实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本文一部分实施例，而不是全部的实施例。基于本文中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本文保护的范围。

需要说明的是，本文的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本文的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、装置、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本说明书提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的***或装置产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行。

需要说明的是，本文的基于虚拟列表的数据滚动方法可用于程序开发领域，也可用于金融领域，本文对基于虚拟列表的数据滚动方法及装置的应用领域不做限定。本申请技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。

图1所示为本文实施例一种基于虚拟列表的数据滚动方法，具体包括如下步骤：

步骤101，根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示。在本步骤中，待显示数据存储在服务器的数据库中。根据用户访问数据的需求，从数据库中的预先存储的待显示数据中，提取部分数据到内存中，并进一步在用户端的显示区域进行显示。具体的，由虚拟列表从大量的预先存储的待显示数据中提取部分数据到内存中，建立DOM树。虚拟列表操作DOM树，对提取的数据进行渲染，并显示在用户端的显示区域中。其中，DOM树为存储在内存中，用于表示网页等中所有内容的树形结构。

其中，虚拟列表为一种按需显示的技术，虚拟列表可以根据用户的在显示区域的滚动操作，仅将显示区域内的列表数据渲染成DOM树，将显示区域外的数据部分渲染，或者对于已渲染的DOM即刻销毁来释放内存，优化性能。在本说明书的一些实施例中，虚拟列表主要通过不断销毁、新建DOM对象以保证虚拟列表中的数据的渲染更新。由于虚拟列表不会一直建立DOM对象，因此，渲染的实际DOM树的高度有限。例如，显示区域的高度为550px，一个列表项数据的高度为55px，则用户在显示区域最多只能看到10个列表项对应的数据。虚拟列表在渲染时，需要一次渲染10个列表项的数据，并销毁此前的DOM，以节约内存。

在本说明书的一些实施例中，根据用户端显示区域的尺寸及高度，将设定虚拟列表实际渲染的DOM树的高度或实际渲染列表数据的行数，通过滚动距离或显示在显示区域中的数据的序号，确定当前在显示区域中的数据是否已经超出虚拟列表实际渲染的DOM树的高度。

在本步骤中，虚拟列表从数据库中提取部分数据并渲染后，显示在显示区域中。其中，显示区域中的数据为列表数据，具体的，列表数据就是要在显示区域上需要以列表的形式展示给用户的数。在本说明书的一些实施例中，列表数据可以是转账记录类型的数据。其中，列表数据中的每一行的信息包括但不限于：付款名称、付款人账号、收款人名称、收款人账号，转账金额，备注等数据。

步骤102，确定用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离。在本步骤中，用户通过点击或触摸用户端显示设备，对显示区域进行上划或下拉操作。随着用户的滑动，出现在显示区域的数据可能是不同的、不断发生变化的。将虚拟列表渲染的第一个数据作为首个数据，本步骤需要确定经过用户滑动的当前显示区域中某个特定数据与虚拟列表渲染的第一个数据之间的滚动距离。

在本说明书中，显示区域中显示的数据可以以一列多行数据的形式呈现，也可以以多列多行数据的形式出现。无论数据在显示区域中呈现的形式如何，本步骤中的首个数据始终是虚拟列表渲染的首个数据。在本步骤中，显示区域中的指定数据可以是用户指定的特定数据，也可以是预先由***或服务器设定的随机指定数据。例如，用户指定的特定数据为用户选中的某个具体的词、数字或字母；又例如，***或服务器预先设定的随时指定数据为：该显示区域中第100个词、数字或字母，或者，该显示区域中第80行数据等。本申请在此对显示区域中的指定数据的确定方式及形式不作限定。

步骤103，当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识。本步骤判断当前显示区域中的指定数据与虚拟列表渲染的首个数据的滚动距离，若滚动距离超过第一预设距离，在用户停留的当前显示区域中增加数据返回滚动标识。具体的，第一预设距离阈值可以根据虚拟列表渲染的DOM树的高度或虚拟列表实际渲染的列表数据的行数确定。若滚动距离超出第一预设距离阈值，可以通过操作该数据返回滚动标识。在本说明书的一些实施例中，第一预设距离阈值为可以是显示区域的尺寸的整数倍。在本说明书的另外一些实施例中，第一预设距离阈值也可以是预先设置的虚拟列表的支持最多渲染的数据项行数，或者是最多渲染数据项行数的高度。例如，虚拟列表支持最多渲染的DOM树最多渲染数据项函数的高度为30行，则第一预设距离阈值可以设置为30行。

步骤104，当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度。在本步骤中，***根据用户点击数据返回滚动标识的行为，进一步判断步骤103中滚动距离的大小，设定对应的数据返回滚动速度。具体的，当滚动距离的值越大，设定数据返回滚动速度较快；当滚动距离的值越小，设定数据返回滚动速度相对慢一些。

步骤105，根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首个数据。根据前述步骤确定的滚动距离及数据返回滚动距离，控制虚拟列表前述已渲染过的所有数据返回滚动。从视觉效果上，从当前显示区域的数据返回首个数据，该过程中，此前所有已被渲染的数据在滚动过程钟会被当前显示区域快速显示，并最终返回至首个被渲染的数据。

图2所示为本文实施例一种确定滚动距离的方法流程图，具体包括如下步骤：

步骤201，对所述待显示数据中的每一项数据，设置数据序号。在本步骤中，虚拟列表渲染后的数据，确定唯一编号。当每一项数据具有数据序号之后，无论用户在当前显示区域如何滑动数据，出现在显示区域的数据均具有其唯一不变的序号。

步骤202，根据所述指定数据的序号、所述首个数据的序号及当前显示区域的数据容量，确定所述当前显示区域与所述虚拟列表渲染的首行数据的滚动距离，所述数据容量为当前显示区域能够容纳数据的数量。在本步骤中，指定数据显示在显示区域时，其已经被虚拟列表使用DOM渲染，因此，指定数据也已经具有其数据序号了。进一步的，根据前述步骤中确定的虚拟列表渲染的首个数据的序号、当前显示区域的指定数据的序号，及当前显示区域的数据容量，确定滚动距离。其中，首个数据的序号为1，根据当前页面的指定数据的序号及首个数据的序号，可以确定当前页面的指定数据是虚拟列表渲染的第几个数据。

因为不同用户的用户端的显示区域的尺寸大小不同，且不同用户的阅读浏览偏好不同，可能在用户段的数据显示字体大小有不同的设置和跳转。若确定用户的当前显示区域的尺寸大小和字体大小后，可以确定当前显示区域的数据容量，即，确定当前页面能够容纳多少数据。更进一步的，前述步骤已经可以确定当前页面的指定数据是虚拟列表渲染的第几个数据之后，根据当前显示区域的数据容量，可以确定当前显示区域与首个数据之间的滚动距离。也就是，确定当前显示区域距离首个数据的距离。

图3所示为本文实施例一种确定当前显示区域的数据容量的方法流程图，具体包括如下步骤：

步骤301，获取用户端设备的型号及用户设定的数据字体格式。不同用户可能持有不同的用户端硬件设备；不同的用户根据自身阅读偏好及使用喜好，设定不同的显示区域的数据字体格式。其中，不同的数据格式可以影响显示区域能够显示多少数据。

步骤302，根据用户端设备的型号，确定用户端显示区域的尺寸。在本步骤中，可以自动获取用户端设备的型号，或经过用户授权后获取用户端设备的型号。根据不同的型号，确定用户端显示区域的尺寸。

步骤303，根据用户设定的数据字体格式，确定用户端的显示区域中能够容纳的数据的数量。例如，根据步骤302可以确定用户乙的用户端设备的型号为安卓***的设备，型号为K，该用户端的界面尺寸为720*1280，除去状态栏、导航栏、主菜单的尺寸大小后，显示区域中内容区域的720*1020px，常规文本字体大小为20px，则可以确定该用户端设备能够容纳的数据量。在本说明书的实施例中，若数据在显示区域中的呈现形式为一列多行，则显示区域中每行可以容纳36个数据，一共能容纳51行数据，则显示区域一共可以容纳36*15个数据。

图4所示为本文实施例一种设定数据返回滚动速度的方法流程图，具体包括如下步骤：

步骤401，根据所有待显示数据的序号及当前显示区域的数据容量，确定所有待显示数据占据的长度。根据对所有数据预先设定的数据序号，及用户端的显示区域可以容纳的数据量，确定所有待显示数据占据的长度。例如，所有待显示数据的序号为1-10000，一个显示区域所显示的数据为一列多行的形式，根据显示区域的尺寸，预先确定该显示区域的数据容量为50行数据，每行最大可以容纳20个数据，则可以确定所有待显示数据占据的长度为10个显示界页面的高度。

步骤402，判断所述滚动距离的值与所有待显示数据占据的长度的比值，是否超过第一预设比例。根据前述步骤确定的滚动距离的值，确定滚动距离是否超过所有待显示数据占据的总长度的第一预设比例。例如，所有待显示数据占据的长度相当于10个显示区域可显示区域的长度，而当前显示区域的指定距离与虚拟列表渲染的首个数据的滚动距离相当于3个显示区域占据的长度，则可以确定比值为3/10。在本步骤中，第一预设比例可以是预先设定的，也可以根据实际情况进行实时调整。

步骤403，若所述比值未超过第一预设比例，设定数据返回的第一滚动速度。比值不超过第一预设比例，则滚动距离比较小。则可以设定较小的第一滚动速度，当用户点击数据返回数据返回滚动标识，显示区域中的数据可以以第一滚动速度返回滚动至首个数据。

步骤404，判断所述比值是否超过第二预设比例，若所述比值大于所述第一预设比例，并未超过第二预设比例，设定数据返回的第二滚动速度。本步骤判断比值的方法与步骤403类似，本申请在此不作赘述。其中，第二预设比例相较于第一预设比例更大，若比值未超过第二预设比例但大于第一预设比例，则滚动距离处于中等水平。则可以设定常规的第二滚动速度，当用户点击数据返回数据返回滚动标识，显示区域中的数据可以以第二滚动速度返回滚动至首个数据。例如，所有待显示数据占据的长度相当于10个显示区域可显示区域的长度，而当前显示区域的指定距离与虚拟列表渲染的首个数据的滚动距离相当于5个显示区域占据的长度，则可以确定比值为1/2。在本说明书中，可以设定第二滚动速度为每2px/0.2秒，或其他数值。

步骤405，若所述比值大于第二预设比例，设定数据返回的第三滚动速度。与步骤403及步骤404一致，若比值超过第二预设比例，说明滚动距离较大，可以设定较快的第二滚动速度，当用户点击数据返回数据返回滚动标识，显示区域中的数据可以以第三滚动速度返回滚动至首个数据。

在本说明书的一些实施例中，第二滚动速度可以是与第三滚动速度数值相同的速度，第二滚动速度与第三滚动速度也可以是数值不同的速度。

图5所示为本文实施例一种将数据在显示区域滚动返回至首个数据的方法流程图，具体包括如下步骤：

步骤501，当所述比值未超过第一预设比例，根据所述滚动距离的值与所述第一滚动速度，将已渲染的数据滚动返回。与步骤402对应的，当滚动距离的值与所有待显示数据占据的长度的比值未超过第一预设比例，则将当前滚动距离的值直接作为待返回滚动的距离，并结合第一滚动速度，将显示区域的数据进行滚动返回。

例如，待显示数据的序号为1-10000，一个显示区域的高度为1000px，其可以容纳1000个数据，则待显示数据占据的长度相当于10个显示区域的长度。具体的，当前页面显示区域的指定数据为序号为第2500个数据，当前页面显示区域的指定距离与虚拟列表渲染的首个数据的滚动距离相当于3个显示区域占据的长度，且待显示数据中所有数据的高度统一为20px。则可以根据指定数据的序号与数据高度的乘积，计算得到当前显示区域中的指定数据的滚动距离。

例如，第2500个数据的滚动距离为2500px，则直接以该滚动距离以第一滚动速度进行返回滚动。

步骤502，当所述比值大于第一预设比例，根据第二预设距离阈值及所述第二滚动速度或所述第三滚动速度，将已渲染的数据滚动返回。与步骤403及步骤404对应的，当滚动距离的值与所有待显示数据占据的长度的比值超过第一预设比例，则将第二预设距离阈值作为待返回滚动的距离，并结合第二滚动速度或第三滚动速度，将显示区域的数据进行滚动返回。在本说明书中，当比值大于第一预设比例，认为该指定距离与首个数据的距离较远。

例如，待显示数据的序号为1-10000，一个显示区域的高度为1000px，可以容纳1000个数据，待显示数据占据的长度相当于10个显示区域的长度。具体的，当前页面显示区域的指定数据为序号为第4800个数据，当前页面显示区域的指定距离与虚拟列表渲染的首个数据的滚动距离相当于5个显示区域占据的长度，且待显示数据中所有数据的高度统一为20px。则可以根据指定数据的序号与数据高度的乘积，计算得到当前显示区域中的指定数据的滚动距离。

例如，第4800个数据的滚动距离为4800px，该滚动距离较大，则以第二预设距离阈值作为滚动距离，进行滚动返回。在本说明书的一些实施例中，第二预设距离可以是显示区域的尺寸的整数倍，第二预设距离阈值可以是与第一预设距离阈值的值相同的距离，也可以是与第一预设距离阈值的值不同的距离。第二预设距离阈值的值可以预先设定，也可以根据实际情况进行调整。例如，第二预设距离阈值为3000px。则本步骤中，直接以第二预设距离阈值作为返回滚动距离，结合第二滚动速度，将已渲染的数据滚动返回。

又例如，当前页面显示区域的指定数据为序号为第8200个数据，当前页面显示区域的指定距离与虚拟列表渲染的首个数据的滚动距离相当于9个显示区域占据的长度，且待显示数据中所有数据的高度统一为20px。则可以根据指定数据的序号与数据高度的乘积，计算得到当前显示区域中的指定数据第8200个数据的滚动距离为8200px，该滚动距离较大，则第二预设距离阈值作为滚动距离，进行滚动返回。

也就是说，当显示区域的指定数据的滚动距离较大时，该指定数据距离首个数据较远，因此为了节省滚动返回的时间，提高用户浏览体验，将滚动距离进行缩减处理。其中，当有多个指定数据的滚动距离与待显示数据占据的长度的比值大于第一预设比例获第二预设比例时，当可以对不同的指定数据的滚动距离缩减到统一的预设距离阈值，并以相同的滚动速度进行滚动返回；也可以对不同的指定数据的滚动距离缩减到不同的预设距离阈值，并以不同的滚动速度进行滚动返回，以确定不同位置处的指定数据在滚动返回的过程中具有相同的滚动视觉效果，且能有效避免超出虚拟列表实际渲染的DOM高度、进一步避免因页面重绘出现的白屏问题。

因此，本申请中也可以对滚动距离与待显示数据占据的长度的比值大于第二预设比例的数据，设定第三预设距离作为滚动距离，进行滚动返回，本申请在此对第三预设距离不作限定。

图6所示为本文实施例一种确定数据返回滚动速度的方法流程图，具体包括如下步骤：

步骤601，根据显示区域所属设备的硬件性能确定数据返回滚动速度。在本步骤中，不同的设备具有不同的硬件性能。硬件性能包括但不限于：设备内存、设备处理器速度、网络传输速度等。

例如，不同的智能手机的具有不同大小的内存，部分智能手机的内存不够，不足以缓存上万条待渲染的数据。又例如，用户滑动屏幕浏览数据的速度较快，也对虚拟列表渲染数据的速度提出了较高的要求，设备处理器的速度、网络传输速度较慢，不足以满足虚拟列表渲染数据的要求，容易造成白屏。因此，有必要根据不同设备的硬件性能，可以确定数据返回滚动速度的具体大小。

步骤602，根据虚拟列表的渲染数据高度，确定数据返回滚动速度。另外，也可以根据虚拟列表中的列表项渲染的数据高度，确定虚拟列表一次渲染的数据量的大小，进一步确定数据返回速度的大小。

图7所示为本文实施例一种基于虚拟列表的数据滚动方法的流程图，具体包括如下步骤：

步骤701，获取用户在当前显示区域的特定数据，所述特定数据用户标记过的数据。当用户在显示区域浏览数据的过程中，用户可以通过触屏或点击屏幕等方式，对显示区域中的部分数据进行标记。在本说明书中，将用户标记过的数据记为特定数据。在本说明书的一些实施例中，用户标记过的特定数据可以是用户关心的数据、用户认为关键的数据，用户认为可以收藏的数据、用户需要稍后返回当前位置复看的数据等。

步骤702，根据所述数据滚动速度及滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述特定数据。当利用本说明书中的基于虚拟列表的数据滚动方法时，可以根据前述步骤设定的数据滚动速度及指定数据与虚拟列表渲染的首个数据的滚动距离，将虚拟列表此前已渲染的数据返回至所述特定数据。或者，根据数据滚动方法，将虚拟列表此前已渲染的数据返回至所述特征数据后，进行暂停并计时，当时间达到预设时间阈值，继续滚动返回至用户标记的其他特定数据。重复以上操作，直到滚动返回的过程遍历了用户标记的所有特定数据，最终返回至虚拟列表渲染的首个数据，即，页面的顶部。

本说明书利用基于虚拟列表的数据滚动方法，将当前显示区域的指定数据滚动返回至用户在此前的浏览过程中标记的特定数据，能够在数据滚动返回的过程中，帮助用户记录用户可能感兴趣的数据或用户认为关键的数据，帮助用户快速返回其关注的数据，在满足虚拟列表渲染数据的性能前提下，提升用户浏览体验。

如图8所示为本文实施例一种基于虚拟列表的数据滚动装置的结构示意图，在本图中描述了基于虚拟列表的数据滚动装置的基本结构，其中的功能单元、模块可以采用软件方式实现，也可以采用通用芯片或者特定芯片实现，实现基于虚拟列表的数据滚动，该装置具体包括：

数据显示单元801，用于根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示；

滚动距离确定单元802，用于用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离；

数据返回滚动标识增加单元803，用于当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识；

返回滚动速度设定单元804，用于当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度；

返回滚动单元805，用于根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首个数据。

本方案在基于虚拟列表的技术和场景下，通过记录当前展示的列表数据序号，和已滚动的数据距离首个数据的距离，对于超出虚拟列表设置的渲染数据阈值的情况下，先回到阈值，再通过设置每一步滚动的距离回到首个数据，在避免滚动过程中因未及时渲染而出现白屏的同时，也实现了动态滚动回到顶部的效果。

作为本文的一个实施例，还可以参考如图9所示为本实施例基于虚拟列表的数据滚动装置的具体结构示意图。

作为本文的一个实施例，所述滚动距离确定单元802进一步包括：

数据序号设置模块8021，用于对所述待显示数据中的每一项数据，设置数据序号；

显示区域数据容量确定模块8022，用于确定用户端的显示区域中能够容纳的数据的数量。

作为本文的一个实施例，所述返回滚动速度设定单元804进一步包括：

硬件性能获取模块8041，用于获取显示区域所属设备的硬件性能；

渲染数据高度获取模块8042，用于根据虚拟列表的渲染数据高度，确定数据返回滚动速度。

如图10所示，为本文实施例提供的一种计算机设备，本文基于虚拟列表的数据滚动方法可以应用在所述计算机设备中，所述计算机设备1002可以包括一个或多个处理器1004，诸如一个或多个中央处理单元(CPU)，每个处理单元可以实现一个或多个硬件线程。计算机设备1002还可以包括任何存储器1006，其用于存储诸如代码、设置、数据等之类的任何种类的信息。非限制性的，比如，存储器1006可以包括以下任一项或多种组合：任何类型的RAM，任何类型的ROM，闪存设备，硬盘，光盘等。更一般地，任何存储器都可以使用任何技术来存储信息。进一步地，任何存储器可以提供信息的易失性或非易失性保留。进一步地，任何存储器可以表示计算机设备1002的固定或可移除部件。在一种情况下，当处理器1004执行被存储在任何存储器或存储器的组合中的相关联的指令时，计算机设备1002可以执行相关联指令的任一操作。计算机设备1002还包括用于与任何存储器交互的一个或多个驱动机构1008，诸如硬盘驱动机构、光盘驱动机构等。

计算机设备1002还可以包括输入/输出模块1010(I/O)，其用于接收各种输入(经由输入设备1012)和用于提供各种输出(经由输出设备1014)。一个具体输出机构可以包括呈现设备1016和相关联的图形用户接口(GUI)1018。在其他实施例中，还可以不包括输入/输出模块1010(I/O)、输入设备1012以及输出设备1014，仅作为网络中的一台计算机设备。计算机设备1002还可以包括一个或多个网络接口1020，其用于经由一个或多个通信链路1022与其他设备交换数据。一个或多个通信总线1024将上文所描述的部件耦合在一起。

通信链路1022可以以任何方式实现，例如，通过局域网、广域网(例如，因特网)、点对点连接等、或其任何组合。通信链路1022可以包括由任何协议或协议组合支配的硬连线链路、无线链路、路由器、网关功能、名称服务器等的任何组合。

对应于图1至图6中的方法，本文实施例还提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法的步骤。

本文实施例还提供一种计算机可读指令，其中当处理器执行所述指令时，其中的程序使得处理器执行如图1至图6所示的方法。

应理解，在本文的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本文实施例的实施过程构成任何限定。

还应理解，在本文实施例中，术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系。例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本文的范围。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的***、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本文所提供的几个实施例中，应该理解到，所揭露的***、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本文实施例方案的目的。

另外，在本文各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本文的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本文各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本文中应用了具体实施例对本文的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本文的方法及其核心思想；同时，对于本领域的一般技术人员，依据本文的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本文的限制。

Claims (12)

1.一种基于虚拟列表的数据滚动方法，其特征在于，所述方法包括：

根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示；

确定用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离；

当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识；

当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度；

根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首个数据。

2.根据权利要求1所述的基于虚拟列表的数据滚动方法，其特征在于，所述确定用户滑动的当前显示区域的指定数据与所述虚拟列表渲染的首个数据的滚动距离包括：

对所述待显示数据中的每一项数据，设置数据序号；

根据所述指定数据的序号、所述首个数据的序号及当前显示区域的数据容量，确定所述当前显示区域与所述虚拟列表渲染的首个数据的滚动距离，所述数据容量为当前显示区域能够容纳数据的数量。

3.根据权利要求2所述的基于虚拟列表的数据滚动方法，其特征在于，确定当前显示区域的数据容量包括：

获取用户端设备的型号及用户设定的数据字体格式；

根据用户端设备的型号，确定用户端显示区域的尺寸；

根据用户设定的数据字体格式，确定用户端的显示区域中能够容纳的数据的数量。

4.根据权利要求3所述的基于虚拟列表的数据滚动方法，其特征在于，所述当用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度包括：

根据所有待显示数据的序号及当前显示区域的数据容量，确定所有待显示数据占据的长度；

判断所述滚动距离的值与所有待显示数据占据的长度的比值，是否超过第一预设比例；

若所述比值未超过第一预设比例，设定数据返回的第一滚动速度；

判断所述比值是否超过第二预设比例，若所述比值大于所述第一预设比例，并未超过第二预设比例，设定数据返回的第二滚动速度；

若所述比值大于第二预设比例，设定数据返回的第三滚动速度。

5.根据权利要求4所述的基于虚拟列表的数据滚动方法，其特征在于，根据所述返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据在所述显示区域滚动返回至所述首个数据包括：

当所述比值未超过第一预设比例，根据所述滚动距离的值与所述第一滚动速度，将已渲染的数据滚动返回；

当所述比值大于第一预设比例，根据第二预设距离阈值及所述第二滚动速度或所述第三滚动速度，将已渲染的数据滚动返回。

6.根据权利要求5所述的基于虚拟列表的数据滚动方法，其特征在于，所述方法进一步包括：

根据显示区域所属设备的硬件性能确定数据返回滚动速度，或

根据虚拟列表的渲染数据高度，确定数据返回滚动速度。

7.根据权利要求1所述的基于虚拟列表的数据滚动方法，其特征在于，所述第一预设距离阈值为所述显示区域的尺寸的整数倍。

8.根据权利要求1所述的基于虚拟列表的数据滚动方法，其特征在于，所述方法还包括：

获取用户在当前显示区域的特定数据，所述特定数据用户标记过的数据；

根据所述数据滚动速度及滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述特定数据。

9.一种基于虚拟列表的数据滚动装置，其特征在于，所述装置包括：

数据显示单元，用于根据用户访问需求，从预先存储的待显示数据中，提取部分数据由虚拟列表渲染并在显示区域显示，其中，所述虚拟列表随着用户访问需求的变更，更新渲染数据并显示；

距离确定单元，用于用户滑动的当前显示区域中的指定数据与所述虚拟列表渲染的首个数据的滚动距离；

数据返回滚动标识增加单元，用于当所述滚动距离超出第一预设距离阈值，在当前显示区域添加数据返回滚动标识；

返回滚动速度设定单元，用于当所述用户点击所述数据返回滚动标识，根据所述滚动距离的值，设定数据返回滚动速度；

返回滚动单元，用于根据所述数据返回滚动速度及所述滚动距离，将虚拟列表已渲染的数据从所述显示区域滚动返回至所述首个数据。

10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8任意一项所述的方法。

11.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至8任意一项所述的方法。

12.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现权利要求1至8任意一项所述的方法。

Images