虚拟列表数据渲染方法、装置、设备和存储介质制造方法及图纸

本申请涉及一种虚拟列表数据渲染方法、装置、设备和存储介质，通过创建选择器，将选择器注册至包括可视区域和缓冲区域的虚拟列表，通过选择器选择待渲染对象，当待渲染对象的数据量小于或等于第一阈值时，对待渲染对象中处于可视区域的全部数据进行渲染；当待渲染对象的数据量大于第一阈值时，对待渲染对象中处于可视区域内的第一数据进行渲染，将待渲染对象中处于可视区域外的第二数据列入缓冲区域，保证了每次渲染不超过第一阈值数据量的数据，解决了选择器数据量过大时虚拟列表出现卡顿的问题，提高了数据渲染的效率。提高了数据渲染的效率。提高了数据渲染的效率。

【技术实现步骤摘要】
虚拟列表数据渲染方法、装置、设备和存储介质


[0001]本申请涉及数据渲染领域，特别是涉及一种虚拟列表数据渲染方法、装置、设备和存储介质。

技术介绍

[0002]在使用后台管理平台进行数据选择时，通常需要在多个选项中筛选确定目标选项。常规的选项数据一般在百条以内，但是如果数据超过百条甚至达到上千条，在点击选择器展开下拉框的瞬间就会出现界面卡顿的现象。此时滚动下拉条，选择更多数据时，下拉条的滚动也会出现卡顿或直接卡死。
[0003]目前相关技术中，主要是通过虚拟框架的下拉框和虚拟树结合的方式将选择器组件渲染到目标页面中，以避免在选择器组件下拉框数据量较大时，页面出现卡顿的问题。该方法虽然可以降低数据过多时界面的卡顿，但是其在通过虚拟树对数据进行渲染时，需要先进行数据类型的转化，给数据源增加了额外的属性，增加了计算量。并且在快速拖拽滚动部件时，会出现部分区域空白的现象，不利于数据的选择。
[0004]目前，针对相关技术中，选择器数据量过大时虚拟列表页面出现卡顿的问题，尚未提出有效的解决办法。

技术实现思路

[0005]本申请实施例提供了一种虚拟列表数据渲染方法、装置、设备和存储介质，以解决相关技术中选择器数据量过大时虚拟列表页面出现卡顿的问题。
[0006]第一方面，本申请实施例提供了一种虚拟列表数据渲染方法，其特征在于，包括：
[0007]创建选择器，将所述选择器注册至虚拟列表，其中，所述虚拟列表包括可视区域与缓冲区域；
[0008]通过所述选择器选择待渲染对象，当所述待渲染对象的数据量小于或等于第一阈值时，对所述待渲染对象中处于所述可视区域内的全部数据进行渲染；
[0009]当所述待渲染对象的数据量大于所述第一阈值时，对所述待渲染对象中处于所述可视区域内的第一数据进行渲染，将所述待渲染对象中处于所述可视区域外的第二数据列入缓冲区域。
[0010]在其中一些实施例中，对待渲染对象进行渲染包括：
[0011]确定所述待渲染对象的标签属性和取值属性，根据所述标签属性和所述取值属性，确定所述待渲染对象的标签值；
[0012]将所述标签值传递至所述选择器，根据所述标签值将所述待渲染对象渲染至所述选择器的选择框。
[0013]在其中一些实施例中，在对所述待渲染对象中处于所述可视区域内的第一数据进行渲染，将所述待渲染对象中处于所述可视区域外的第二数据列入缓冲区域之后，所述方法还包括：
[0014]对虚拟列表的滚动部件进行监听；
[0015]当滚动部件发生移动时，将滚动范围外的所述第一数据进行剔除，并将所述滚动范围对应的所述第二数据更新为所述第一数据；
[0016]对更新后的所述可视区域内的所述第一数据进行渲染。
[0017]在其中一些实施例中，将滚动范围对应的所述第一数据进行剔除，并将所述滚动范围对应的所述第二数据更新为所述第一数据包括：
[0018]获取每条所述第一数据与所述第二数据的间距填充属性；
[0019]当滚动部件发生移动时，根据所述滚动范围修改所述间距填充属性；
[0020]对所述第一数据与所述第二数据进行模拟滚动。
[0021]在其中一些实施例中，在对选择的数据进行渲染之后，所述方法还包括：
[0022]根据用户输入的查询条件，对所述待渲染对象进行模糊搜索，其中，所述模糊搜索包括：根据用户输入的所述查询条件，确定查询语句，选取包含所述查询语句的所述待渲染对象作为模糊搜索结果；
[0023]根据所述模糊搜索结果，对不符合所述查询请求的所述待渲染对象进行过滤。
[0024]在其中一些实施例中，在对选择的数据进行渲染之后，所述方法还包括：
[0025]在渲染完成的数据中，对用户的历史选择数据进行筛选；
[0026]将筛选后得到的所述历史选择数据放置在所述虚拟列表的首位。
[0027]在其中一些实施例中，所述可视区域包括数据展示框，所述数据展示框的高度不超过所述选择器中的选择框的高度。
[0028]第二方面，本申请实施例提供了一种虚拟列表数据渲染装置，包括：
[0029]创建模块，用于将选择器注册至虚拟列表，其中，所述虚拟列表包括可视区域与缓冲区域；
[0030]选择模块，用于通过所述选择器选择待渲染对象；
[0031]渲染模块，用于当所述待渲染对象的数据量小于或等于第一阈值时，对所述待渲染对象中处于所述可视区域内的全部数据进行渲染；当所述待渲染对象的数据量大于所述第一阈值时，对所述待渲染对象中处于所述可视区域内的第一数据进行渲染，将所述待渲染对象中处于所述可视区域外的第二数据列入缓冲区域。
[0032]第三方面，本申请实施例提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如上述第一方面中任一项所述的虚拟列表数据渲染方法的步骤。
[0033]第四方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如上述第一方面中任一项所述的虚拟列表数据渲染方法的步骤。
[0034]相比于相关技术，本申请实施例提供的虚拟列表数据渲染方法、装置、设备和存储介质，通过创建选择器，将选择器注册至包括可视区域和缓冲区域的虚拟列表，通过选择器选择待渲染对象，当待渲染对象的数据量小于或等于第一阈值时，对待渲染对象中处于可视区域的全部数据进行渲染；当待渲染对象的数据量大于第一阈值时，对待渲染对象中处于可视区域内的第一数据进行渲染，将待渲染对象中处于可视区域外的第二数据列入缓冲区域，保证了每次渲染不超过第一阈值数据量的数据，解决了选择器数据量过大时虚拟列
表出现卡顿的问题，提高了数据渲染的效率。
[0035]本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
[0036]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0037]图1是本申请一个实施例的虚拟列表数据渲染方法的终端的硬件结构框图；
[0038]图2是本申请一个实施例的虚拟列表数据渲染方法的流程图；
[0039]图3是本申请一个实施例的虚拟列表数据渲染方法中选择器标签项的示意图；
[0040]图4是本申请一个实施例的虚拟列表在滚动部件发生滚动之前的界面示意图；
[0041]图5是本申请一个实施例的虚拟列表在滚动部件发生滚动之后的界面示意图；
[0042]图6是本申请一个实施例的虚拟列表数据渲染方法的整体流程图；
[0043]图7是本申请一个实施例的虚拟列表数据渲染装置的结构图。
具体实施方式
[0044]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种虚拟列表数据渲染方法，其特征在于，包括：创建选择器，将所述选择器注册至虚拟列表，其中，所述虚拟列表包括可视区域与缓冲区域；通过所述选择器选择待渲染对象，当所述待渲染对象的数据量小于或等于第一阈值时，对所述待渲染对象中处于所述可视区域内的全部数据进行渲染；当所述待渲染对象的数据量大于所述第一阈值时，对所述待渲染对象中处于所述可视区域内的第一数据进行渲染，将所述待渲染对象中处于所述可视区域外的第二数据列入缓冲区域。2.根据权利要求1所述的虚拟列表数据渲染方法，其特征在于，对待渲染对象进行渲染包括：确定所述待渲染对象的标签属性和取值属性，根据所述标签属性和所述取值属性，确定所述待渲染对象的标签值；将所述标签值传递至所述选择器，根据所述标签值将所述待渲染对象渲染至所述选择器的选择框。3.根据权利要求1所述的虚拟列表数据渲染方法，其特征在于，在对所述待渲染对象中处于所述可视区域内的第一数据进行渲染，将所述待渲染对象中处于所述可视区域外的第二数据列入缓冲区域之后，所述方法还包括：对虚拟列表的滚动部件进行监听；当滚动部件发生移动时，将滚动范围外的所述第一数据进行剔除，并将所述滚动范围对应的所述第二数据更新为所述第一数据；对更新后的所述可视区域内的所述第一数据进行渲染。4.根据权利要求3所述的虚拟列表数据渲染方法，其特征在于，将滚动范围对应的所述第一数据进行剔除，并将所述滚动范围对应的所述第二数据更新为所述第一数据包括：获取每条所述第一数据与所述第二数据的间距填充属性；当滚动部件发生移动时，根据所述滚动范围修改所述间距填充属性；对所述第一数据与所述第二数据进行模拟滚动。5.根据权利要求1所述的虚拟列表数据渲染方法，其特征在于，在对待...

【专利技术属性】
技术研发人员：汪倩，琚渲，程金峰，李忠义，曹朋，杨芳，
申请(专利权)人：杭州安恒信息技术股份有限公司，
类型：发明
国别省市：