CN111339463A - 列表数据的展示方法、装置和电子设备 - Google Patents
列表数据的展示方法、装置和电子设备 Download PDFInfo
- Publication number
- CN111339463A CN111339463A CN202010102463.4A CN202010102463A CN111339463A CN 111339463 A CN111339463 A CN 111339463A CN 202010102463 A CN202010102463 A CN 202010102463A CN 111339463 A CN111339463 A CN 111339463A
- Authority
- CN
- China
- Prior art keywords
- list
- data
- visible
- rendering
- instruction
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及数据处理技术领域,公开了一种列表数据的展示方法、装置和电子设备,列表数据的展示方法包括:接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。本申请的列表数据的展示方法可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
Description
技术领域
本申请涉及数据处理技术领域,具体而言,本申请涉及一种列表数据的展示方法、装置和电子设备。
背景技术
数据信息常用的展现方式是通过电子表格在计算机中展示,而用于展示数据的电子表格形式多为具有多行多列的数据列表。
通常在展示数据列表时采用Vue框架,Vue框架是一套用于构建用户界面的渐进式JavaScript框架,但采用Vue框架时需要管理DOM((Document Object Model,文档对象模型)操作,需要加入额外的信息来保证数据与界面的同步,当待展示的列表数据的数据量较大时,采用Vue框架容易造成浏览器卡顿。
发明内容
本申请的目的旨在至少能解决上述的技术缺陷之一,特提出以下技术方案:
第一方面,提供了一种列表数据的展示方法,包括:
接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;
当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。
在第一方面的可选实施例中,对渲染列表进行更新,包括:
从渲染列表中卸载更新指令所指示的列表数据;
从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。
在第一方面的可选实施例中,对可见列表进行更新,包括:
将更新后的渲染列表的预设区域设为更新后的可见列表。
在第一方面的可选实施例中,接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表之前,还包括:
接收用户输入的参数设置指令,基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。
在第一方面的可选实施例中,还包括:
若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。
在第一方面的可选实施例中,当接收到用户对可见列表的更新指令时,对可见列表进行更新之前,还包括:
接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;
若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。
在第一方面的可选实施例中,若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令,包括以下情况中的任一种:
若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;
若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。
第二方面,提供了一种列表数据的展示装置,包括:
渲染模块,用于接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
展示模块,用于将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;
更新模块,用于当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。
在第二方面的可选实施例中,更新模块在对渲染列表进行更新时,具体用于:
从渲染列表中卸载更新指令所指示的列表数据;
从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。
在第二方面的可选实施例中,更新模块在对可见列表进行更新时,具体用于:
将更新后的渲染列表的预设区域设为更新后的可见列表。
在第二方面的可选实施例中,还包括设置模块,设置模块用于:
接收用户输入的参数设置指令,基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。
在第二方面的可选实施例中,还包括显示模块,显示模块用于:
若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。
在第二方面的可选实施例中,还包括接收模块,接收模块用于:
接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;
若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。
在第二方面的可选实施例中,接收模块在若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令时,用于执行以下情况中的任一种:
若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;
若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。
第三方面,提供了一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行程序时实现本申请第一方面所示的列表数据的展示方法。
第四方面,提供了一种计算机可读存储介质,计算机可读存储介质上存储有计算机程序,该程序被处理器执行时实现本申请第一方面所示的列表数据的展示方法。
本申请提供的技术方案带来的有益效果是:通过加载第一数据量的列表数据进行渲染得到渲染列表,将渲染列表的预设区域设为可见列表,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,在更新过程中,渲染列表对应的列表数据保持第一数据量,当待展示的列表数据的数据量较大时,可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
本申请附加的方面和优点将在下面的描述中部分给出,这些将从下面的描述中变得明显,或通过本申请的实践了解到。
附图说明
本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解,其中:
图1为本申请实施例提供的一种列表数据的展示方法的流程示意图;
图2为本申请实施例提供的一种列表数据的展示方法的界面的示意图;
图3为本申请实施例提供的一种列表数据的展示方法的界面的示意图;
图4为本申请实施例提供的一种列表数据的展示方法的界面的示意图;
图5为本申请实施例提供的一种列表数据的展示装置的结构示意图;
图6为本申请实施例提供的一种列表数据的展示的电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例,实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本申请,而不能解释为对本申请的限制。
本技术领域技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本申请的说明书中使用的措辞“包括”是指存在特征、整数、步骤、操作、元件和/或组件,但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解,当我们称元件被“连接”或“耦接”到另一元件时,它可以直接连接或耦接到其他元件,或者也可以存在中间元件。此外,这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请实施方式作进一步地详细描述。
本申请提供的列表数据的展示方法、装置、电子设备及计算机可读存储介质,旨在解决现有技术的如上技术问题。
下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合,对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图,对本申请的实施例进行描述。
本申请实施例中提供了一种可能的实现方式,如图1所示,提供了一种列表数据的展示方法,可以包括以下步骤:
步骤S101,接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表。
具体的,渲染列表可以是将数据按照预设的格式排布于列表中,并按预设格式对数据加粗、倾斜、数据字号进行设置等等得到的列表。
步骤S102,将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示。
具体的,渲染列表的预设区域用于在展示区域进行展示,也就是说,渲染列表进行更新时,可见列表随之更新,即所展示的预设区域随之更新。
在具体实施过程中,用户可以通过展示区域发送对可见列表的操作指令,例如,可以在展示区域中拖动或滑动可见列表,以更新可见列表。
步骤S103,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。
具体的,当接收到用户通过展示区域发送的更新指令时,如通过展示区域拖动或移动可见列表,对可见列表进行更新,同时会对整个渲染列表进行拖动或移动,从而更新渲染列表。
在具体实施过程中,当渲染列表进行更新时,渲染列表对应的列表数据保持第一数据量,即每重新渲染一部分数据,从原来已经渲染的数据列表中卸载同等数据量的数据。
本实施例提供的列表数据的展示方法,通过加载第一数据量的列表数据进行渲染得到渲染列表,将渲染列表的预设区域设为可见列表,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,在更新过程中,渲染列表对应的列表数据保持第一数据量,当待展示的列表数据的数据量较大时,可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
本申请实施例中提供了一种可能的实现方式,步骤S103的对渲染列表进行更新,可以包括:
(1)从渲染列表中卸载更新指令所指示的列表数据。
具体的,更新指令可以基于用户的滑动操作或拖动操作生成,可以根据用户的滑动操作或拖动操作在展示区域中滑动或移动可见列表,从而滑动或移动整个渲染列表,以更新渲染列表的列表数据。
在具体实施过程中,渲染列表更新的列表数据的数据量基于更新指令得到。
(2)从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。
具体的,每加载新的数据量的列表数据进行渲染,同时会从渲染列表中卸载相同的数据量的列表数据,保持渲染列表的列表数据的第一数据量。
如图2所示,图2中示出了列表数据、渲染列表201、渲染列表的预设区域的可见列表202以及展示区域203,可见列表202的区域用斜条纹填充,图2中展示区域203和可见列表202对应的区域范围的数据量相同,当通过展示区域对可见列表进行滑动时,即对渲染列表进行更新,在其他实施例中,可见列表202对应的数据量可以大于展示区域203,具体将在下文进行详细阐述。
本申请实施例中提供了一种可能的实现方式,步骤S103的对可见列表进行更新,可以包括:将更新后的渲染列表的预设区域设为更新后的可见列表。
如图3所示,当展示区域203和可见列表202对应的区域范围相同时,用户通过展示区域203滑动可见列表202时,可见列表202向上滑动以进行更新,即渲染列表201中新的部分进入展示区域203形成新的可见列表202,下方新的列表数据进行渲染以对部分渲染列表201进行更新,渲染列表201上方部分列表数据进行卸载,整个渲染列表201的列表数据的数据量保持第一数据量。
本申请实施例中提供了一种可能的实现方式,步骤S101的接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表之前,还可以包括:
(1)接收用户输入的参数设置指令;
(2)基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。
具体的,在对列表数据进行加载并渲染之前,用户可以输入参数设置指令,对渲染列表的第一数据量,或是渲染列表的尺寸、渲染中每一行和每一列数据的尺寸进行设置;还可以对预设区域在渲染列表中的具体位置进行设置;还可以对展示区域的位置进行设置,展示区域的区域范围对应的数据量可以与可见列表的区域范围先相同,也可以小于可见列表的区域范围对应的数据量,若展示区域的区域范围对应的数据量小于可见列表的区域范围对应的数据量,则展示区域会出现滚动条,以滚动显示可见列表。
本申请实施例中提供了一种可能的实现方式,列表数据的展示方法还可以包括:
若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。
在具体实施过程中,当预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量时,可以在展示区域设置滚动条,通过滑动滚动条,可以在展示区域展示可见列表的所有部分。
本申请实施例中提供了一种可能的实现方式,步骤S103的当接收到用户对可见列表的更新指令时,对可见列表进行更新之前,还可以包括:
(1)接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;
(2)若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。
具体的,若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令,可以包括以下情况中的任一种:
a、若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;
b、若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。
在具体实施过程中,若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,或者接收用户对可见列表的向下移动指令,即可见列表的最顶部已展示,但用户需要浏览渲染列表中可见列表的上方的列表数据,则触发更新指令,对可见列表进行更新。
同样地,若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,或者接收用户对可见列表的向上移动指令,即可见列表的最底部已展示,但用户需要浏览渲染列表中可见列表的下方的列表数据,则触发更新指令,对可见列表进行更新。
如图4所示,当展示区域203对应的区域范围小于可见列表202对应的区域范围时,展示区域203中出现滚动条204,图4中左边的展示区域203中只显示了部分可见列表202,图4中右边为完整的可见列表202,用户通过展示区域203滑动可见列表202时,可见列表202向上或向下滑动,当可见列表203滑动至最底部,即滚动条204已经位于展示区域203的最底部时,接收用户对可见列表202的向上滑动指令,或接收用户对滚动条204的向下滑动指令,则对可见列表202进行更新,即渲染列表201中新的部分进入展示区域203形成新的可见列表202,下方新的列表数据进行渲染以对部分渲染列表201进行更新,渲染列表201上方部分列表数据进行卸载,整个渲染列表201的列表数据的数据量保持第一数据量。
上述的列表数据的展示方法,通过加载第一数据量的列表数据进行渲染得到渲染列表,将渲染列表的预设区域设为可见列表,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,在更新过程中,渲染列表对应的列表数据保持第一数据量,当待展示的列表数据的数据量较大时,可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
本申请实施例中提供了一种可能的实现方式,如图5所示,提供了一种列表数据的展示装置50,该列表数据的展示装置50可以包括渲染模块501、展示模块502和更新模块503,其中,
渲染模块501,用于接收针对列表数据的展示指令,从列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
展示模块502,用于将渲染列表的预设区域设为可见列表;可见列表用于在展示区域中进行展示;
更新模块503,用于当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,以对渲染列表进行更新;在更新过程中,渲染列表对应的列表数据保持第一数据量。
上述的列表数据的展示装置,通过加载第一数据量的列表数据进行渲染得到渲染列表,将渲染列表的预设区域设为可见列表,当接收到用户对可见列表的更新指令时,对可见列表进行更新并展示,在更新过程中,渲染列表对应的列表数据保持第一数据量,当待展示的列表数据的数据量较大时,可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
本申请实施例中提供了一种可能的实现方式,更新模块503在对渲染列表进行更新时,具体用于:
从渲染列表中卸载更新指令所指示的列表数据;
从列表数据中加载新的列表数据进行渲染以添加到渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。
本申请实施例中提供了一种可能的实现方式,更新模块503在对可见列表进行更新时,具体用于:
将更新后的渲染列表的预设区域设为更新后的可见列表。
本申请实施例中提供了一种可能的实现方式,还包括设置模块,设置模块用于:
接收用户输入的参数设置指令,基于参数设置指令设置列表展示组件的第一数据量、预设区域的位置、预设区域对应的可见列表的数据量、展示区域的位置和展示区域对应的可见列表的数据量。
本申请实施例中提供了一种可能的实现方式,还包括显示模块,显示模块用于:
若预设区域对应的可见列表的数据量大于展示区域对应的可见列表的数据量,在展示区域显示滚动条。
本申请实施例中提供了一种可能的实现方式,还包括接收模块,接收模块用于:
接收用户对滚动条的移动指令,基于移动指令在展示区域移动可见列表;
若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令。
本申请实施例中提供了一种可能的实现方式,接收模块在若滚动条位于展示区域的预设位置,基于移动指令触发对可见列表的更新指令时,用于执行以下情况中的任一种:
若滚动条位于展示区域的顶部,接收用户对滚动条的向上移动指令,基于移动指令触发更新指令;
若滚动条位于展示区域的底部,接收用户对滚动条的向下移动指令,基于移动指令触发更新指令。
本公开实施例的图片的列表数据的展示装置可执行本公开的实施例所提供的一种图片的列表数据的展示方法,其实现原理相类似,本公开各实施例中的图片的列表数据的展示装置中的各模块所执行的动作是与本公开各实施例中的图片的列表数据的展示方法中的步骤相对应的,对于图片的列表数据的展示装置的各模块的详细功能描述具体可以参见前文中所示的对应的图片的列表数据的展示方法中的描述,此处不再赘述。
基于与本公开的实施例中所示的方法相同的原理,本公开的实施例中还提供了一种电子设备,该电子设备可以包括但不限于:处理器和存储器;存储器,用于存储计算机操作指令;处理器,用于通过调用计算机操作指令执行实施例所示的列表数据的展示方法。与现有技术相比,本申请中的列表数据的展示方法可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
在一个可选实施例中提供了一种电子设备,如图6所示,图6所示的电子设备4000包括:处理器4001和存储器4003。其中,处理器4001和存储器4003相连,如通过总线4002相连。可选地,电子设备4000还可以包括收发器4004。需要说明的是,实际应用中收发器4004不限于一个,该电子设备4000的结构并不构成对本申请实施例的限定。
处理器4001可以是CPU(Central Processing Unit,中央处理器),通用处理器,DSP(Digital Signal Processor,数据信号处理器),ASIC(Application SpecificIntegrated Circuit,专用集成电路),FPGA(Field Programmable Gate Array,现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。处理器4001也可以是实现计算功能的组合,例如包含一个或多个微处理器组合,DSP和微处理器的组合等。
总线4002可包括一通路,在上述组件之间传送信息。总线4002可以是PCI(Peripheral Component Interconnect,外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture,扩展工业标准结构)总线等。总线4002可以分为地址总线、数据总线、控制总线等。为便于表示,图6中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
存储器4003可以是ROM(Read Only Memory,只读存储器)或可存储静态信息和指令的其他类型的静态存储设备,RAM(Random Access Memory,随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备,也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory,电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory,只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。
存储器4003用于存储执行本申请方案的应用程序代码,并由处理器4001来控制执行。处理器4001用于执行存储器4003中存储的应用程序代码,以实现前述方法实施例所示的内容。
其中,电子设备包括但不限于:移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
本申请实施例提供了一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,当其在计算机上运行时,使得计算机可以执行前述方法实施例中相应内容。与现有技术相比,本申请中的列表数据的展示方法可以随着可见列表的更新对所有的列表数据进行展示,且保持渲染的列表数据的第一数据量,不会造成浏览器的卡顿。
应该理解的是,虽然附图的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备执行上述实施例所示的方法。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定,例如,渲染模块还可以被描述为“对列表数据进行渲染的模块”。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
Claims (10)
1.一种列表数据的展示方法,应用于列表展示组件,其特征在于,包括:
接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
将所述渲染列表的预设区域设为可见列表;所述可见列表用于在展示区域中进行展示;
当接收到用户对所述可见列表的更新指令时,对所述可见列表进行更新并展示,以对所述渲染列表进行更新;在更新过程中,所述渲染列表对应的列表数据保持所述第一数据量。
2.根据权利要求1所述的列表数据的展示方法,其特征在于,所述对所述渲染列表进行更新,包括:
从所述渲染列表中卸载所述更新指令所指示的列表数据;
从所述列表数据中加载新的列表数据进行渲染以添加到所述渲染列表中;其中,所卸载的列表数据的数据量与所加载的新的列表数据的数据量相等。
3.根据权利要求1所述的列表数据的展示方法,其特征在于,所述对所述可见列表进行更新,包括:
将所述更新后的渲染列表的所述预设区域设为更新后的可见列表。
4.根据权利要求1所述的列表数据的展示方法,其特征在于,接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表之前,还包括:
接收用户输入的参数设置指令,基于所述参数设置指令设置所述列表展示组件的所述第一数据量、所述预设区域的位置、所述预设区域对应的可见列表的数据量、所述展示区域的位置和所述展示区域对应的可见列表的数据量。
5.根据权利要求4所述的列表数据的展示方法,其特征在于,还包括:
若所述预设区域对应的可见列表的数据量大于所述展示区域对应的可见列表的数据量,在所述展示区域显示滚动条。
6.根据权利要求5所述的列表数据的展示方法,其特征在于,所述当接收到用户对所述可见列表的更新指令时,对所述可见列表进行更新之前,还包括:
接收用户对所述滚动条的移动指令,基于所述移动指令在所述展示区域移动所述可见列表;
若所述滚动条位于所述展示区域的预设位置,基于所述移动指令触发对所述可见列表的所述更新指令。
7.根据权利要求6所述的列表数据的展示方法,其特征在于,所述若所述滚动条位于所述展示区域的预设位置,基于所述移动指令触发对所述可见列表的所述更新指令,包括以下情况中的任一种:
若所述滚动条位于所述展示区域的顶部,接收用户对滚动条的向上移动指令,基于所述移动指令触发所述更新指令;
若所述滚动条位于所述展示区域的底部,接收用户对滚动条的向下移动指令,基于所述移动指令触发所述更新指令。
8.一种列表数据的展示装置,其特征在于,包括:
渲染模块,用于接收针对列表数据的展示指令,从所述列表数据中加载第一数据量的列表数据进行渲染得到渲染列表;
展示模块,用于将所述渲染列表的预设区域设为可见列表;所述可见列表用于在展示区域中进行展示;
更新模块,用于当接收到用户对所述可见列表的更新指令时,对所述可见列表进行更新并展示,以对所述渲染列表进行更新;在更新过程中,所述渲染列表对应的列表数据保持所述第一数据量。
9.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述程序时实现权利要求1-7任一项所述的列表数据的展示方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有计算机程序,该程序被处理器执行时实现权利要求1-7任一项所述的列表数据的展示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010102463.4A CN111339463B (zh) | 2020-02-19 | 2020-02-19 | 列表数据的展示方法、装置和电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010102463.4A CN111339463B (zh) | 2020-02-19 | 2020-02-19 | 列表数据的展示方法、装置和电子设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111339463A true CN111339463A (zh) | 2020-06-26 |
CN111339463B CN111339463B (zh) | 2023-07-04 |
Family
ID=71185539
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010102463.4A Active CN111339463B (zh) | 2020-02-19 | 2020-02-19 | 列表数据的展示方法、装置和电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111339463B (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111832271A (zh) * | 2020-07-20 | 2020-10-27 | 北京百度网讯科技有限公司 | 数据呈现方法、装置、电子设备和存储介质 |
CN111931472A (zh) * | 2020-08-11 | 2020-11-13 | 北京字节跳动网络技术有限公司 | 页面表格渲染方法、装置、电子设备及计算机可读介质 |
CN112363663A (zh) * | 2020-11-27 | 2021-02-12 | 深圳集智数字科技有限公司 | 一种数据展示方法及装置 |
CN113010824A (zh) * | 2021-03-05 | 2021-06-22 | 北京明略软件系统有限公司 | 实现网页长列表无限滚动的方法及系统 |
CN113568539A (zh) * | 2021-07-29 | 2021-10-29 | 曙光信息产业(北京)有限公司 | 一种列表显示方法、装置、设备及存储介质 |
CN113778306A (zh) * | 2021-09-07 | 2021-12-10 | 上海浦东发展银行股份有限公司 | 一种表格数据处理方法、装置、设备和存储介质 |
CN116048360A (zh) * | 2023-02-14 | 2023-05-02 | 江西数字网联信息安全技术有限公司 | 一种列表自动循环无限滚动方法、系统及可读存储介质 |
Citations (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
AU3823393A (en) * | 1992-04-29 | 1993-11-04 | Canon Kabushiki Kaisha | Object sorting and edge calculation for graphics systems |
EP0635808A2 (en) * | 1993-07-21 | 1995-01-25 | Xerox Corporation | Method and apparatus for operating on the model data structure on an image to produce human perceptible output in the context of the image |
US20050206647A1 (en) * | 2004-03-19 | 2005-09-22 | Jiangming Xu | Method and apparatus for generating a shadow effect using shadow volumes |
AU2005229631A1 (en) * | 2005-10-31 | 2007-05-17 | Canon Kabushiki Kaisha | Rendering using secondary storage |
EP2093708A2 (en) * | 2007-12-07 | 2009-08-26 | Canon Kabushiki Kaisha | Rendering apparatus, rendering method, and storage medium |
CN102339291A (zh) * | 2010-07-23 | 2012-02-01 | 阿里巴巴集团控股有限公司 | 一种列表生成方法及设备 |
CN105808237A (zh) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | 页面渲染方法和页面渲染系统 |
CN106407404A (zh) * | 2016-09-22 | 2017-02-15 | 成都快乐家网络技术有限公司 | 数据存储方法、数据管理方法及系统、数据库、客户端 |
CN106557491A (zh) * | 2015-09-25 | 2017-04-05 | 北京奇虎科技有限公司 | 一种网页中展示表格数据的方法和装置 |
CN106570142A (zh) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | 一种数据渲染方法和装置 |
CN106991154A (zh) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术(北京)有限公司 | 网页渲染方法、装置、终端及服务器 |
CN108897538A (zh) * | 2018-06-08 | 2018-11-27 | 泰康保险集团股份有限公司 | 页面视图显示方法及装置、存储介质及电子终端 |
CN109325220A (zh) * | 2018-08-29 | 2019-02-12 | 东软集团股份有限公司 | 图表生成方法、装置、存储介质和电子设备 |
CN109634490A (zh) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | 一种列表显示方法、装置、设备及存储介质 |
CN110134308A (zh) * | 2019-05-17 | 2019-08-16 | 深圳前海微众银行股份有限公司 | 数据展示方法、装置、设备及计算机可读存储介质 |
-
2020
- 2020-02-19 CN CN202010102463.4A patent/CN111339463B/zh active Active
Patent Citations (15)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
AU3823393A (en) * | 1992-04-29 | 1993-11-04 | Canon Kabushiki Kaisha | Object sorting and edge calculation for graphics systems |
EP0635808A2 (en) * | 1993-07-21 | 1995-01-25 | Xerox Corporation | Method and apparatus for operating on the model data structure on an image to produce human perceptible output in the context of the image |
US20050206647A1 (en) * | 2004-03-19 | 2005-09-22 | Jiangming Xu | Method and apparatus for generating a shadow effect using shadow volumes |
AU2005229631A1 (en) * | 2005-10-31 | 2007-05-17 | Canon Kabushiki Kaisha | Rendering using secondary storage |
EP2093708A2 (en) * | 2007-12-07 | 2009-08-26 | Canon Kabushiki Kaisha | Rendering apparatus, rendering method, and storage medium |
CN102339291A (zh) * | 2010-07-23 | 2012-02-01 | 阿里巴巴集团控股有限公司 | 一种列表生成方法及设备 |
CN106557491A (zh) * | 2015-09-25 | 2017-04-05 | 北京奇虎科技有限公司 | 一种网页中展示表格数据的方法和装置 |
CN105808237A (zh) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | 页面渲染方法和页面渲染系统 |
CN106407404A (zh) * | 2016-09-22 | 2017-02-15 | 成都快乐家网络技术有限公司 | 数据存储方法、数据管理方法及系统、数据库、客户端 |
CN106570142A (zh) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | 一种数据渲染方法和装置 |
CN106991154A (zh) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术(北京)有限公司 | 网页渲染方法、装置、终端及服务器 |
CN108897538A (zh) * | 2018-06-08 | 2018-11-27 | 泰康保险集团股份有限公司 | 页面视图显示方法及装置、存储介质及电子终端 |
CN109325220A (zh) * | 2018-08-29 | 2019-02-12 | 东软集团股份有限公司 | 图表生成方法、装置、存储介质和电子设备 |
CN109634490A (zh) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | 一种列表显示方法、装置、设备及存储介质 |
CN110134308A (zh) * | 2019-05-17 | 2019-08-16 | 深圳前海微众银行股份有限公司 | 数据展示方法、装置、设备及计算机可读存储介质 |
Non-Patent Citations (2)
Title |
---|
DIANYINGTAN8093: "" 渲染列表数据"", 《CSDN博客》 * |
YZIANGEL: ""大量数据列表渲染优化方法"", 《CSDN博客》 * |
Cited By (11)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111832271A (zh) * | 2020-07-20 | 2020-10-27 | 北京百度网讯科技有限公司 | 数据呈现方法、装置、电子设备和存储介质 |
CN111832271B (zh) * | 2020-07-20 | 2023-08-18 | 北京百度网讯科技有限公司 | 数据呈现方法、装置、电子设备和存储介质 |
CN111931472A (zh) * | 2020-08-11 | 2020-11-13 | 北京字节跳动网络技术有限公司 | 页面表格渲染方法、装置、电子设备及计算机可读介质 |
CN111931472B (zh) * | 2020-08-11 | 2023-10-20 | 抖音视界有限公司 | 页面表格渲染方法、装置、电子设备及计算机可读介质 |
CN112363663A (zh) * | 2020-11-27 | 2021-02-12 | 深圳集智数字科技有限公司 | 一种数据展示方法及装置 |
CN112363663B (zh) * | 2020-11-27 | 2022-04-12 | 深圳集智数字科技有限公司 | 一种数据展示方法及装置 |
CN113010824A (zh) * | 2021-03-05 | 2021-06-22 | 北京明略软件系统有限公司 | 实现网页长列表无限滚动的方法及系统 |
CN113568539A (zh) * | 2021-07-29 | 2021-10-29 | 曙光信息产业(北京)有限公司 | 一种列表显示方法、装置、设备及存储介质 |
CN113778306A (zh) * | 2021-09-07 | 2021-12-10 | 上海浦东发展银行股份有限公司 | 一种表格数据处理方法、装置、设备和存储介质 |
CN116048360A (zh) * | 2023-02-14 | 2023-05-02 | 江西数字网联信息安全技术有限公司 | 一种列表自动循环无限滚动方法、系统及可读存储介质 |
CN116048360B (zh) * | 2023-02-14 | 2023-11-07 | 江西数字网联信息安全技术有限公司 | 一种列表自动循环无限滚动方法、系统及可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN111339463B (zh) | 2023-07-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111339463B (zh) | 列表数据的展示方法、装置和电子设备 | |
CN109976620B (zh) | 列表项展现属性信息的确定方法、装置、设备及存储介质 | |
US20190087070A1 (en) | Display method, electronic device, and storage medium | |
US9348456B2 (en) | Determination of bezel area on touch screen | |
CN111198999B (zh) | 一种网页端的图片加载方法、装置、介质和电子设备 | |
CN111651700B (zh) | 消息展示方法、装置、电子设备及存储介质 | |
CN109062653B (zh) | 长图文信息显示方法、计算机装置及计算机可读存储介质 | |
CN112667330A (zh) | 一种页面显示方法及计算机设备 | |
CN114491349B (zh) | 页面显示方法、装置、电子设备、存储介质和程序产品 | |
CN111931472A (zh) | 页面表格渲染方法、装置、电子设备及计算机可读介质 | |
CN105808307B (zh) | 一种页面显示方法和装置 | |
CN110716684A (zh) | 用户界面的显示方法、装置、电子设备及机可读存储介质 | |
CN110865748A (zh) | 菜单呈现方法、装置、电子设备及计算机可读存储介质 | |
CN110737495A (zh) | 窗口显示方法、装置、终端及存储介质 | |
CN110795196A (zh) | 窗口显示方法、装置、终端及存储介质 | |
CN111240793B (zh) | cell预渲染的方法、装置、电子设备以及计算机可读介质 | |
US8788965B2 (en) | Method and device for displaying data by adjusting the size of controls | |
CN110618811B (zh) | 信息呈现方法和装置 | |
CN110717126A (zh) | 页面浏览方法、装置、电子设备及计算机可读存储介质 | |
CN116048371A (zh) | 应用程序中页面组件切换方法、装置、设备、介质及产品 | |
CN112911367B (zh) | 视频播放界面的处理方法、装置和电子设备 | |
CN112711457A (zh) | 栏位绘制方法、装置和电子设备 | |
CN113986102A (zh) | 显示控制方法、装置、电子设备和存储介质 | |
CN109857503B (zh) | 页面交互效果自适应方法、装置与电子设备 | |
CN114090938A (zh) | 页面处理方法及设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |