列表数据的展示方法、装置和电子设备制造方法及图纸

技术编号:24684427 阅读:27 留言:0更新日期:2020-06-27 08:14
本申请涉及数据处理技术领域,公开了一种列表数据的展示方法、装置和电子设备,列表数据的展示方法包括:接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。本申请的列表数据的展示方法可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。

Display method, device and electronic equipment of tabulated data

【技术实现步骤摘要】
列表数据的展示方法、装置和电子设备
本申请涉及数据处理
,具体而言,本申请涉及一种列表数据的展示方法、装置和电子设备。
技术介绍
数据信息常用的展现方式是通过电子表格在计算机中展示,而用于展示数据的电子表格形式多为具有多行多列的数据列表。通常在展示数据列表时采用Vue框架,Vue框架是一套用于构建用户界面的渐进式JavaScript框架,但采用Vue框架时需要管理DOM((DocumentObjectModel,文档对象模型)操作,需要加入额外的信息来保证数据与界面的同步,当待展示的列表数据的数据量较大时,采用Vue框架容易造成浏览器卡顿。
技术实现思路
本申请的目的旨在至少能解决上述的技术缺陷之一,特提出以下技术方案:第一方面,提供了一种列表数据的展示方法,包括:接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。在第一方面的可选实施例中,对渲染列表进行更新,包括:从渲染列表中卸载更新指令所指示的列表数据;从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。在第一方面的可选实施例中,对可见列表进行更新,包括:将更新后的渲染列表的预设区域设为更新后的可见列表。在第一方面的可选实施例中,接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表之前,还包括:接收用户输入的参数设置指令,基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。在第一方面的可选实施例中,还包括:若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。在第一方面的可选实施例中,当接收到用户对可见列表的更新指令时,对可见列表进行更新之前,还包括:接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。在第一方面的可选实施例中,若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令,包括以下情况中的任一种:若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。第二方面,提供了一种列表数据的展示装置,包括:渲染模块,用于接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;展示模块,用于将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;更新模块,用于当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。在第二方面的可选实施例中,更新模块在对渲染列表进行更新时,具体用于:从渲染列表中卸载更新指令所指示的列表数据;从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。在第二方面的可选实施例中,更新模块在对可见列表进行更新时,具体用于:将更新后的渲染列表的预设区域设为更新后的可见列表。在第二方面的可选实施例中,还包括设置模块,设置模块用于:接收用户输入的参数设置指令,基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。在第二方面的可选实施例中,还包括显示模块,显示模块用于:若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。在第二方面的可选实施例中,还包括接收模块,接收模块用于:接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。在第二方面的可选实施例中,接收模块在若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令时,用于执行以下情况中的任一种:若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。第三方面,提供了一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行程序时实现本申请第一方面所示的列表数据的展示方法。第四方面,提供了一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序,该程序被处理器执行时实现本申请第一方面所示的列表数据的展示方法。本申请提供的技术方案带来的有益效果是:通过加载第一数据量的列表数据进行渲染得到渲染列表,将渲染列表的预设区域设为可见列表,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,在更新过程中,渲染列表对应的列表数据保持第一数据量,当待展示的列表数据的数据量较大时,可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。本申请附加的方面和优点将在下面的描述中部分给出,这些将从下面的描述中变得明显,或通过本申请的实践了解到。附图说明本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解,其中:图1为本申请实施例提供的一种列表数据的展示方法的流程示意图;图2为本申请实施例提供的一种列表数据的展示方法的界面的示意图;图3为本申请实施例提供的一种列表数据的展示方法的界面的示意图;图4为本申请实施例提供的一种列表数据的展示方法的界面的示意图;图5为本申请实施例提供的一种列表数据的展示装置的结构示意图;图6为本申请实施例提供的一种列表数据的展示的电子设备的结构示意图。具体实施方式下面详细描述本申请的实施例,实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本申请,而不能解释为对本申请的限制。本
技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本申请的说明书中使用的措辞“包括”是指存在特征、整数、步骤、本文档来自技高网
...

【技术保护点】
1.一种列表数据的展示方法,应用于列表展示组件,其特征在于,包括:/n接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;/n将所述渲染列表的预设区域设为可见列表;所述可见列表用于在展示区域中进行展示;/n当接收到用户对所述可见列表的更新指令时,对所述可见列表进行更新并展示,以对所述渲染列表进行更新;在更新过程中,所述渲染列表对应的列表数据保持所述第一数据量。/n

【技术特征摘要】
1.一种列表数据的展示方法,应用于列表展示组件,其特征在于,包括:
接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
将所述渲染列表的预设区域设为可见列表;所述可见列表用于在展示区域中进行展示;
当接收到用户对所述可见列表的更新指令时,对所述可见列表进行更新并展示,以对所述渲染列表进行更新;在更新过程中,所述渲染列表对应的列表数据保持所述第一数据量。


2.根据权利要求1所述的列表数据的展示方法,其特征在于,所述对所述渲染列表进行更新,包括:
从所述渲染列表中卸载所述更新指令所指示的列表数据;
从所述列表数据中加载新的列表数据进行渲染以添加到所述渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。


3.根据权利要求1所述的列表数据的展示方法,其特征在于,所述对所述可见列表进行更新,包括:
将所述更新后的渲染列表的所述预设区域设为更新后的可见列表。


4.根据权利要求1所述的列表数据的展示方法,其特征在于,接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表之前,还包括:
接收用户输入的参数设置指令,基于所述参数设置指令设置所述列表展示组件的所述第一数据量、所述预设区域的位置、所述预设区域对应的可见列表的数据量、所述展示区域的位置和所述展示区域对应的可见列表的数据量。


5.根据权利要求4所述的列表数据的展示方法,其特征在于,还包括:
若所述预设区域对应的可见列表的数据量大于所述展示区域对应的可见列表的数据量,在所述展示区域显示滚动条。


6.根据权利要求5所述的列表...

【专利技术属性】
技术研发人员:江霖
申请(专利权)人:望海康信北京科技股份公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1