CN114895825B - 列表显示方法、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种列表显示方法、电子设备及存储介质，涉及计算机技术领域。本公开实施例用以减少电子设备在列表显示时的白屏现象。该方法包括：确定待显示列表的业务类型；从所述电子设备的已创建列表中确定待复用列表；所述待复用列表的业务类型与所述待显示列表的业务类型相同；在所述待复用列表的内容框与所述待显示列表的目标内容框相同的情况下，将所述待复用列表作为待显示列表进行显示；所述目标内容框包括所述待显示列表的待显示内容。

Description

列表显示方法、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种列表显示方法、电子设备及存储介质。

背景技术

随着跨平台移动应用开发框架的发展（如React-Native(RN)框架），越来越多的移动开发团队开始使用其进行应用程序开发。利用RN框架，开发人员可以开发出能够同时在iOS系统和Android系统中运行的应用程序，同时，还可以通过JavaScript(JS)动态创建任意样式的原生视图，即，可以通过服务器下发JS代码，JS代码在执行时创建指定样式的原生视图。

然而，利用RN框架在iOS系统下进行应用程序的开发时，存在以下问题：iOS系统内置的列表视图组件(ListView)在实现列表场景时，对于每一个待显示列表，需要从JS组件中获取待显示列表的所有创建信息，包括待显示列表的列表框样式信息、内容框样式信息以及内容信息等。这样一来，在实现一些高性能需求的列表场景时，每显示一个列表都要与JS组件进行大量的数据传输，可能出现占用CPU资源较多，导致界面切换过程不流畅，进而出现白屏现象。

发明内容

本公开提供一种列表显示方法、电子设备及存储介质，以减少电子设备在列表显示时的白屏现象。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种列表显示方法，应用于电子设备，包括：确定待显示列表的业务类型；根据待显示列表的业务类型，从电子设备的已创建列表中确定待复用列表；待复用列表的业务类型与待显示列表的业务类型相同；在待复用列表的内容框与待显示列表的目标内容框相同的情况下，将待复用列表作为待显示列表进行显示；目标内容框包括待显示列表的待显示内容。

可选的，上述方法还包括：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中存在目标内容框，则根据目标内容框，显示待显示列表。

可选的，上述方法还包括：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中不存在目标内容框，判断内容框数据库中是否存在空闲内容框；空闲内容框为未在电子设备上显示的内容框；在内容框数据库中存在空闲内容框的情况下，根据空闲内容框，显示待显示列表。

可选的，电子设备中部署有列表视图组件和JS组件；根据空闲内容框，显示待显示列表，包括：通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，得到目标内容框，包括：通过列表视图组件，在空闲内容框中显示白屏遮罩；白屏遮罩用于覆盖空闲内容框中的内容；通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，并删除白屏遮罩，得到目标内容框。

可选的，电子设备中部署有列表视图组件和JS组件；上述方法还包括：在内容框数据库中不存在空闲内容框的情况下，通过列表视图组件创建初始内容框；通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换初始内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，上述方法还包括：在电子设备的已创建列表中不存在待复用列表的情况下，创建待显示列表的列表框以及待显示列表的目标内容框，以显示待显示列表。

根据本公开实施例的第二方面，提供一种列表显示装置，列表显示装置包括确定单元、判断单元以及显示单元；确定单元，用于确定待显示列表的业务类型；确定单元，还用于根据待显示列表的业务类型从列表显示装置的已创建列表中确定待复用列表；待复用列表的业务类型与待显示列表的业务类型相同；判断单元，用于判断待复用列表的内容框与待显示列表的目标内容框是否相同；显示单元，用于在待复用列表的内容框与待显示列表的目标内容框相同的情况下，将待复用列表作为待显示列表进行显示；目标内容框包括待显示列表的待显示内容。

可选的，显示单元还用于：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中存在目标内容框，则根据目标内容框，显示待显示列表。

可选的，判断单元还用于：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中不存在目标内容框，判断内容框数据库中是否存在空闲内容框；空闲内容框为未在列表显示装置上显示的内容框；显示单元，还用于在内容框数据库中存在空闲内容框的情况下，根据空闲内容框，显示待显示列表。

可选的，列表显示装置中部署有列表视图组件和JS组件；显示单元具体用于：通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，显示单元，具体用于：通过列表视图组件，在空闲内容框中显示白屏遮罩；白屏遮罩用于覆盖空闲内容框中的内容；通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，并删除白屏遮罩，得到目标内容框。

可选的，列表显示装置中部署有列表视图组件和JS组件；显示单元还用于：在内容框数据库中不存在空闲内容框的情况下，通过列表视图组件创建初始内容框；通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换初始内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，显示单元还用于：在列表显示装置的已创建列表中不存在待复用列表的情况下，创建待显示列表以及待显示列表的目标内容框，以显示待显示列表。

根据本公开实施例的第三方面，提供一种电子设备，包括：处理器、用于存储处理器可执行的指令的存储器；其中，处理器被配置为执行指令，以实现上述第一方面的列表显示方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，计算机可读存储介质上存储有指令，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述第一方面的列表显示方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，计算机程序产品包括计算机指令，当计算机指令被处理器执行时，实现如上述第一方面的列表显示方法。

本公开提供的技术方案至少带来以下有益效果：本公开中电子设备首先确定待显示列表的业务类型，以此来从已创建列表中确定出与待显示列表的业务类型相同的待复用列表。由于待复用列表的业务类型与待显示列表的业务类型相同，因此待复用列表可以承载与待显示列表相同类型的业务。进一步的，在待复用列表的内容框与包括待显示列表的目标内容框相同的情况下，电子设备将待复用列表作为待显示列表进行显示，避免了在显示列表的过程中电子设备需要从JS组件中获取待显示列表的列表框样式信息、内容框样式信息以及内容信息的过程，减少了因数据传输而导致的CPU压力，进而降低了白屏的出现。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种列表显示系统的结构示意图；

图2是根据一示例性实施例示出的一种列表显示方法的流程示意图之一；

图3是根据一示例性实施例示出的一种列表显示方法的流程示意图之二；

图4是根据一示例性实施例示出的一种缓存池的示意图；

图5是根据一示例性实施例示出的一种列表显示方法的流程示意图之三；

图6是根据一示例性实施例示出的一种列表显示方法的流程示意图之四；

图7是根据一示例性实施例示出的一种电子设备显示列表业务的流程示意图；

图8是根据一示例性实施例示出的一种电子设备的结构示意图之一；

图9是根据一示例性实施例示出的一种电子设备的结构示意图之二。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

另外，在本公开实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B。本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，在本公开实施例的描述中，“多个”是指两个或多于两个。

需要说明的，本公开所涉及的用户信息（包括但不限于用户设备信息、用户个人信息、用户行为信息等）和数据（包括但不限于程序代码等），均为经用户授权或者经过各方充分授权的信息和数据。

在对本公开实施例进行详细地解释说明之前，先对本公开实施例涉及到的一些相关技术进行介绍。

RN框架：RN全称为React-Native，是一款让开发人员可以使用网页 (web)开发技术来开发移动端原生应用的开源跨平台技术框架。通过RN，开发人员可以使用JS来访问移动平台的应用程序接口（application programming interface，API），以及使用React组件来描述用户界面(user interface，UI)的外观和行为。

组件：组件是对数据和方法的简单封装。例如，RN框架下提供了用于显示列表的列表视图组件（Flatlist、SectionList等）以及JS侧的JS组件，JS组件中存储有JS语音开发程序。

跨平台：跨平台概念是软件开发中一个重要的概念，即不依赖于操作系统，也不依赖硬件环境。一个操作系统下开发的应用，放到另一个操作系统下依然可以运行。

JS：JS全称为JavaScript，是一种动态执行类型的编程语言。JS为基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式(如函数式编程)风格。JS可以用于web开发，也可以用于非浏览器环境中前端开发。

对象：对象在JS中是使用花括号包裹{}起来的内容，数据结构为{key1：value1，key2：value2，...}的键值对结构。在面向对象的语言中，key为对象的属性，value为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

然而，相关技术在利用RN框架在iOS系统下进行应用程序的开发时，存在以下问题：列表视图组件在实现列表场景时，对于每一个待显示列表，需要从JS组件中获取待显示列表的所有创建信息，包括待显示列表的列表框样式信息、内容框样式信息以及内容信息等。这样一来，在实现一些高性能需求的列表场景时，每显示一个列表都要与JS组件进行大量的数据传输，可能出现占用CPU资源较多，导致界面切换过程不流畅，进而出现白屏现象。

本公开实施例提供的列表视图的显示方法可以适用于列表显示系统，该列表显示系统用于减少相关技术在列表显示时的白屏现象。图1示出了该列表显示系统的一种结构示意图。如图1所示，列表显示系统10包括电子设备11以及服务器12。电子设备11与服务器12连接。电子设备11与服务器12之间可以采用有线方式连接，也可以采用无线方式连接，本发明实施例对此不作限定。

电子设备11可以是手机、平板电脑、媒体播放移动终端、可穿戴设备、台式电脑、笔记本电脑等设备。电子设备11是存在界面显示需求的设备。

服务器12为用于提供待显示界面的配置文件的后台服务器。服务器12可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云计算、以及大数据和人工智能平台等基础云计算服务的云服务器(云计算服务中心)。

电子设备11可以通过网络与服务器12相连。网络可以是有线网络或无线网络。服务器12用于为电子设备11提供后台服务，例如，服务器12可以将待显示界面的配置文件传输给电子设备11，由电子设备11完成界面显示。

电子设备11用于确定待显示列表的业务类型，从已创建列表中确定待复用列表，在待复用列表的内容框与待显示列表的目标内容框相同的情况下，将待复用列表作为待显示列表进行显示。

可选的，列表显示系统10还包括列表显示装置，该列表显示装置与电子设备连接。在不同的应用场景中，列表显示装置和电子设备可以为相互独立的设备，也可以集成于同一设备中，本公开实施例对此不作具体限定。

图2是根据一些示例性实施例示出的一种列表显示方法的流程示意图。在一些实施例中，上述列表显示方法可以应用到如图1所示的电子设备，也可以应用到其他类似设备（如列表显示装置）。

如图2所示，本公开实施例提供的列表显示方法，包括下述S201-S204。

S201、电子设备确定待显示列表的业务类型。

作为一种可能实现的方式，电子设备从服务器中获取待显示界面的配置文件并在本地存储。当电子设备进行列表显示时，根据待显示列表的标识，从配置文件中查询待显示列表的业务类型。

需要说明的，配置文件存储有描述待显示界面的显示内容所编写的代码，其中包括各待显示列表的标识以及每个待显示列表的业务类型。可选地，配置文件包括多种开发框架类型下的配置文件。可选地，配置文件的代码是前端开发人员在其选择的前端框架下编写的代码，可通过浏览器加载在网页中显示待显示界面，但也可以通过其他转换方法在移动端界面中显示。

开发框架类型决定配置文件的代码格式。可选地，开发框架类型包括但不限于RN框架。

在RN框架下，电子设备获取到配置文件后，将配置文件以JS代码的形式存储在JS组件中。例如，将配置文件中的业务信息以对象的形式存储：{key1：value1，key2：value2，...}。其中，value1、value2可以用于表示各待显示列表的标识，key1、key2可以用于表示各待显示列表的业务类型。在实际应用中，每一个待显示列表可以对应一个单元（cell）数据，key则可以用于表示cell类型，一个cell即一个列表。例如，显示列表的业务类型包括文本类型、图像类型等。

S202、电子设备根据待显示列表的业务类型，从电子设备的已创建列表中确定待复用列表。

其中，待复用列表的业务类型与待显示列表的业务类型相同。

作为一种可能实现的方式，电子设备遍历已创建列表的业务类型，每遍历到一个已创建列表，将当前遍历到的已创建列表的业务类型与待显示列表的业务类型进行对比，若业务类型相同，则将当前遍历到的已创建列表确定为待复用列表。

S203、电子设备判断待复用列表的内容框与待显示列表的目标内容框是否相同。

作为一种可能实现的方式，电子设备对比待复用列表的内容框序列号以及待显示列表的目标内容框序列号，判断二者的序列号是否相同。若序列号相同，电子设备判定待复用列表的内容框与待显示列表的目标内容框相同，否则，电子设备则判定待复用列表的内容框与待显示列表的目标内容框不相同。

需要说明的，在前端开发中，为了使列表能够在列表中显示内容，开发人员为列表设置了内容框，即一个列表由列表框（用于表示列表的样式）、内容框以及内容组成。内容框用于显示列表的内容，每一个列表的内容框都具有唯一的序列标识。

S204、在待复用列表的内容框与待显示列表的目标内容框相同的情况下，电子设备将待复用列表作为待显示列表进行显示。

其中，目标内容框包括待显示列表的待显示内容。

作为一种可能实现的方式，在待复用列表的内容框与待显示列表的目标内容框相同的情况下，电子设备完全复用待复用列表，将待复用列表的列表框作为待显示列表的列表框、将待复用列表的内容框作为待显示列表的目标内容框以及将待复用列表的内容作为待显示列表的内容，对待显示列表进行显示。

上述实施例提供的技术方案至少带来以下有益效果：本公开中电子设备首先确定待显示列表的业务类型，以此来从已创建列表中确定出与待显示列表的业务类型相同的待复用列表。由于待复用列表的业务类型与待显示列表的业务类型相同，因此可以认定待复用列表的列表框与待显示列表的列表框相同。进一步的，在待复用列表的内容框与包括待显示列表的目标内容框相同的情况下，电子设备将待复用列表作为待显示列表进行显示，避免了从JS组件中获取待显示列表的列表框样式信息、内容框样式信息以及内容信息的过程，减少了因数据传输而导致的CPU压力，进而降低了白屏的出现。

在一种设计中，为了保证待显示列表的成功显示，在电子设备的已创建列表中不存在待复用列表的情况下，电子设备将创建待显示列表以及待显示列表的目标内容框，以显示待显示列表。具体的，电子设备获取待显示列表的列表框样式信息、内容框样式信息以及内容信息，根据待显示列表的列表框样式信息、内容框样式信息以及内容信息创建出待显示列表，并对待显示列表进行显示。

在一种设计中，为了准确的显示出待显示列表，如图3所示，本公开实施例提供的列表显示方法，在上述S203之后还包括下述S301- S307：

S301、在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，电子设备判断内容框数据库中是否存在目标内容框。

需要说明的，内容框数据库可以由运维人员预先在电子设备中设置。内容框数据库用于存储已创建列表的内容框和/或预设内容框。例如，内容框数据库可以是根视图组件（RootView）缓存池。

如图4所示，示出了一种RootView缓存池的形式，其中，包括item对象（对象1）下的内容框RootView 0（内容框0）、RootView 0的序列号postion0（序列号0）、RootView 1（内容框1）以及RootView 1的序列号postion1（序列号1），还包括header对象下的内容框rootheader0（内容框x0）、rootheader0的序列号postion0X0（序列号x0）、rootheader1（内容框x1）以及rootheader1的序列号postion0X1（序列号x1）。

作为一种可能实现的方式，在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，电子设备遍历内容框数据库中各内容框的序列号，确定内容框数据库中是否存在与目标内容框的序列号相同的内容框；若存在，电子设备则判定内容框数据库中存在目标内容框；否则，电子设备则判定内容框数据库中不存在目标内容框。

S302、若内容框数据库中存在目标内容框，电子设备则根据目标内容框，显示待显示列表。

作为一种可能实现的方式，若内容框数据库中存在目标内容框，电子设备删除待复用列表的内容框，并将内容框数据库中的目标内容框添加到待复用列表中。之后，电子设备将添加了目标内容框的待复用列表作为待显示列表进行显示。

可以理解的，若待复用列表的内容框与待显示列表的目标内容框不相同，电子设备则判断内容框数据库中是否存在目标框，尽量找到目标内容框，避免创建目标内容框而消耗CPU资源。

S303、若内容框数据库中不存在目标内容框，电子设备判断内容框数据库中是否存在空闲内容框。

其中，空闲内容框为未在电子设备上显示的内容框。

作为一种可能实现的方式，若内容框数据库中不存在目标内容框，电子设备确定电子设备上显示的内容框的序列号。进一步，电子设备遍历内容框数据库中各内容框的序列号，以确定内容框数据库中是否存在与电子设备上显示的内容框的序列号不同的序列号。若存在，电子设备则判断内容框数据库中存在空闲内容框；否则，电子设备则判断内容框数据库中不存在空闲内容框。

S304、在内容框数据库中存在空闲内容框的情况下，电子设备根据空闲内容框，显示待显示列表。

作为一种可能实现的方式，在内容框数据库中存在空闲内容框的情况下，电子设备删除待复用列表的内容框，并将确定到的空闲内容框作为待复用列表的内容框，对待复用列表进行显示。

可以理解的，若内容框数据库中也不存在目标内容框，则电子设备退一步判断内容框数据库中是否有空闲内容框，以复用空闲内容框进行显示，避免重新创建内容框的过程。

S305、在内容框数据库中不存在空闲内容框的情况下，电子设备通过列表视图组件创建初始内容框。

作为一种可能实现的方式，在内容框数据库中不存在空闲内容框的情况下，电子设备通过控制列表视图组件创建初始内容框。需要说明的，初始内容框为电子设备上的操作系统预设的内容框。

S306、电子设备通过列表视图组件从JS组件中获取待显示内容。

作为一种可能实现的方式，电子设备通过控制列表视图组件，根据目标内容框的序号，从JS组件中查询该序号对应的显示内容，并从JS组件中获取查询到的显示内容。

S307、电子设备通过列表视图组件，基于待显示内容，替换初始内容框中的内容，得到目标内容框。

作为一种可能实现的方式，电子设备通过控制列表视图组件，将初始内容框中的内容删除，进一步电子设备将获取到的待显示内容添加到初始内容框中，以得到目标内容框。

在实际应用中，电子设备根据预设高度（例如50）在待显示的cell上创建初始内容框rootView ，并预留一个高度回调接口。高度回调接口用于根据待显示内容的实际高度，调整rootView的高度。

示例性的，RN框架在内容框委托组件RCTRootViewDelegate中提供高度回调接口intrinsicSize：

#import<Foundation/ Foundation .h>

class RCTRootView;

protocol RCTRootViewDelegate<NSObject>

-(void)rootViewDidChangeIntrinsicSize：（RCTRootView *）rootView；

end

电子设备在收到intrinsicSize的高度回调消息后，根据intrinsicSize中的实际高度调整初始内容框rootView：

RCTRootView*rootView=( RCTRootView*)[view superview];

If([rootView isKindOfClass:[ RCTRootView class]]){

rootView.instrinsicContenSize=contenSize;}

在实际应用中，对于段落标题（SectionHeader）列表样式的实现，电子设备可以利用iOS系统预设的UICollectionView视图组件中的UICollectionReusableView来实现。其中，对于每个待显示的SectionHeader，也支持复用，复用流程与cell类型相同。SectionHeader设置后，按照以下JS程序代码可以实现自动吸顶的效果：

NSString*stickyModuleName=LIST_FIXED_MODULE_NAME//增加一个fix宏，可以将列表固定。

UICollectionView中还设置有自定义布局接口UICollectionViewFlowLayout，电子设备可以根据UICollectionViewFlowLayout实现自定义布局(以自定义布局KdsList（列表名称）列表为例)：

Protocol KdsListItemViewLayoutProtocol

Interface KdsListItemViewLayout:UICollectionViewFlowLayout

Protocol（nonatomic,weak）id< KdsListItemViewLayoutProtocol >delegate;

//列数，default is 2

Protocol（nonatomic,assign）NSUInteger columns；

//列间距，default is 0

Protocol（nonatomic, assign）CGFloat columnSpacing；

//item间距（上下），default is 0

Protocol（nonatomic, assign）CGFloat itemSpacing；

//列表整体的填充

Protocol（nonatomic, assign）UIEdgeInsets insets；

end

进一步的，电子设备通过控制列表视图组件，根据上述S307得到目标内容框，显示待显示列表。

另外，电子设备在进行列表显示时，电子设备还可以根据UICollectionViewFlowLayout中prepareLayout方法的对cell（列表）以及heade（标题）进行排版计算，以显示出配置文件中要求的显示界面。

在实际应用中，为了支持瀑布流高度自适应布局的显示效果，在iOS系统中，电子设备通常使用UICollectionView作为列表视图组件来实现列表的显示。但是UICollectionView的复用是全量cell复用，也就是所有创建出来的cell都可以被复用，即电子设备正在显示的cell也可以允许被复用。然而，若将正在显示的cell直接复用，则可能影响正在显示的cell中的内容，出现显示紊乱的现象。利用上述方法，引入RootView缓存池，电子设备以RootView缓存池中内容框为准，确定出空闲内容框，则可以有效避免产生显示紊乱的现象。

在一种设计中，为了显示出待显示列表，如图5所示，电子设备中部署有列表视图组件和JS组件，本公开实施例提供的上述S304，具体包括下述S3041- S3043：

S3041、电子设备通过列表视图组件从JS组件中获取待显示内容。

作为一种可能实现的方式，电子设备通过控制列表视图组件，根据目标内容框的序号，从JS组件中查询该序号对应的显示内容，并从JS组件中获取查询到的显示内容。

S3042、电子设备通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，得到目标内容框。

作为一种可能实现的方式，电子设备通过控制列表视图组件，将空闲内容框中的内容删除，进一步电子设备将获取到的待显示内容添加到空闲内容框中，以得到目标内容框。

可以理解的，由于空闲内容框中的内容并不待显示列表想要显示的内容，因此，电子设备需要获取到待显示内容，并用待显示内容替换空闲框中的内容，以准确的显示出待显示列表。

S3043、电子设备通过列表视图组件，根据目标内容框，显示待显示列表。

作为一种可能的实现方式，电子设备通过控制列表视图组件，根据上述S307得到目标内容框，显示待显示列表。

在一种设计中，为了得到目标内容框，如图6所示，本公开实施例提供的上述S3042，具体包括下述S30421- S30422：

S30421、电子设备通过列表视图组件，在空闲内容框中显示白屏遮罩。

其中，白屏遮罩用于覆盖空闲内容框中的内容。

作为一种可能的实现方式，电子设备通过列表视图组件调用预设的白屏遮罩视图组件，以在空闲内容框中显示白屏遮罩。

需要说明的，白屏遮罩为运维人员在电子设备中预先设置的。

S30422、电子设备通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，并删除白屏遮罩，得到目标内容框。

作为一种可能实现的方式，电子设备通过控制列表视图组件，将空闲内容框中的内容删除，进一步电子设备将获取到的待显示内容添加到空闲内容框中，并删除白屏遮罩，以得到目标内容框。

可以理解的，电子设备在将待显示内容替换空闲内容框中的内容的过程中，引入白屏遮罩，可以避免让用户看到空闲内容框中的内容，直到替换成功后，删除白屏遮罩显示出最终内容，提高了用户的视觉体验。

为了方便理解，示例性的，如图7所示，示出了RN框架下，电子设备显示列表业务KdsList时的流程示意图。电子设备包括列表视图组件以及JS组件。其中，列表视图组件包括列表视图管理组件（KdsListViewManager）、列表视图显示组件（KdsListView）、列表视图创建组件（KdsListItemView）以及内容框组件（RCTRootView）；JS组件包括列表配置文件（list.js）以及内容配置文件（item.js）。列表视图管理组件首先从列表配置文件中获取KdsList中各个列表的业务类型。列表视图显示组件从列表视图管理组件中获取待显示列表的业务类型，并根据预设算法（cellForItemAtIndexPath）确定待显示列表为复用或者创建。预设算法的确定过程可以参考上述S202-S204，此处不再赘述。若确定待显示列表为复用，则执行上述S201-S204或者S301-S304中的复用流程（图中示意性的画出了JS组件中list.js向item.js获取待显示内容的过程）。若确定待显示列表为创建，则执行上述S305-S307中的创建流程，即列表视图创建组件创建列表框，并创建初始内容框（RCTRootView），进一步将item.js中的待显示内容添加到初始内容框中。

在实际应用中，当服务中的配置文件发生更新时，服务器需要将更新后的配置文件发生至电子设备，电子设备通过kdsDataSource接口将更新后的配置文件同步至native组件（例如列表视图组件）。

示例性的，配置文件中删除业务数据之后，电子设备通过kdsDataSource接口同步至native组件：

//删除数据

const deleteDataHandler=(uids: string[]){

ListViewModel.deleteElement(originalData.current,udis);

ListViewModel.deleteElementFromDataSource(kdsDataSource,udis);

if（!showDeleteAction &&memberCount-uids.length>1）{

setEnableDeleteAction(true);

}

setMemberCount(memberCount-uids.length);}

上述实施例主要从装置（设备）的角度对本公开实施例提供的方案进行了介绍。可以理解的是，为了实现上述方法，装置或设备包含了执行各个方法流程相应的硬件结构和/或软件模块，这些执行各个方法流程相应的硬件结构和/或软件模块可以构成一个电子设备。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的算法步骤，本公开能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

本公开实施例可以根据上述方法示例对装置或设备进行功能模块的划分，例如，装置或设备可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。需要说明的是，本公开实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

图8是根据一示例性实施例示出的列表显示装置的结构示意图。参照图8所示，本公开实施例提供的列表显示装置40，包括确定单元401、判断单元402以及显示单元403。

确定单元401，用于确定待显示列表的业务类型。

确定单元401，还用于从列表显示装置的已创建列表中确定待复用列表；待复用列表的业务类型与待显示列表的业务类型相同。

判断单元402，用于判断待复用列表的内容框与待显示列表的目标内容框是否相同。

显示单元403，用于在待复用列表的内容框与待显示列表的目标内容框相同的情况下，将待复用列表作为待显示列表进行显示；目标内容框包括待显示列表的待显示内容。

可选的，显示单元403还用于：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中存在目标内容框，则根据目标内容框，显示待显示列表。

可选的，判断单元402还用于：在待复用列表的内容框与待显示列表的目标内容框不相同的情况下，若内容框数据库中不存在目标内容框，判断内容框数据库中是否存在空闲内容框；空闲内容框为未在列表显示装置上显示的内容框；显示单元403，还用于在内容框数据库中存在空闲内容框的情况下，根据空闲内容框，显示待显示列表。

可选的，列表显示装置中部署有列表视图组件和JS组件；显示单元403具体用于：通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换空闲内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，显示单元403，具体用于：通过列表视图组件，在空闲内容框中显示白屏遮罩；白屏遮罩用于覆盖空闲内容框中的内容；过列表视图组件，基于待显示内容，替换空闲内容框中的内容，并删除白屏遮罩，得到目标内容框。

可选的，列表显示装置40中部署有列表视图组件和JS组件；显示单元403还用于：在内容框数据库中不存在空闲内容框的情况下，通过列表视图组件创建初始内容框；通过列表视图组件从JS组件中获取待显示内容；通过列表视图组件，基于待显示内容，替换初始内容框中的内容，得到目标内容框；通过列表视图组件，根据目标内容框，显示待显示列表。

可选的，显示单元403还用于：在列表显示装置的已创建列表中不存在待复用列表的情况下，创建待显示列表以及待显示列表的目标内容框，以显示待显示列表。

图9是本公开提供的一种电子设备的结构示意图。如图9，该电子设备50可以包括至少一个处理器501以及用于存储处理器可执行指令的存储器502其中，处理器501被配置为执行存储器502中的指令，以实现上述实施例中的列表显示方法。

另外，电子设备50还可以包括通信总线503以及至少一个通信接口504。

处理器501可以是一个处理器(central processing units，CPU)，微处理单元，ASIC，或一个或多个用于控制本公开方案程序执行的集成电路。

通信总线503可包括一通路，在上述组件之间传送信息。

通信接口504，使用任何收发器一类的装置，用于与其他设备或通信网络通信，如以太网，无线接入网（radio access network，RAN），无线局域网(wireless local areanetworks，WLAN)等。

存储器502可以是只读存储器（read-only memory，ROM) 或可存储静态信息和指令的其他类型的静态存储设备，随机存取存储器（random access memory，RAM) 或者可存储信息和指令的其他类型的动态存储设备，也可以是电可擦可编程只读存储器（electrically erasable programmable read-only memory，EEPROM）、只读光盘（compactdisc read-only memory，CD-ROM）或其他光盘存储、光碟存储（包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等）、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器可以是独立存在，通过总线与处理单元相连接。存储器也可以和处理单元集成在一起。

其中，存储器502用于存储执行本公开方案的指令，并由处理器501来控制执行。处理器501用于执行存储器502中存储的指令，从而实现本公开方法中的功能。

作为一个示例，结合图8，电子设备40中的确定单元401、判断单元402以及显示单元403实现的功能与图9中的处理器501的功能相同。

在具体实现中，作为一种实施例，处理器501可以包括一个或多个CPU，例如图9中的CPU0和CPU1。

在具体实现中，作为一种实施例，电子设备50可以包括多个处理器，例如图9中的处理器501和处理器507。这些处理器中的每一个可以是一个单核（single-CPU）处理器，也可以是一个多核（multi-CPU）处理器。这里的处理器可以指一个或多个设备、电路、和/或用于处理数据（例如计算机程序指令）的处理核。

在具体实现中，作为一种实施例，电子设备50还可以包括输出设备505和输入设备506。输出设备505和处理器501通信，可以以多种方式来显示信息。例如，输出设备505可以是液晶显示器（liquid crystal display，LCD)， 发光二级管（light emitting diode，LED)显示设备，阴极射线管（cathode ray tube，CRT) 显示设备，或投影仪（projector）等。输入设备506和处理器501通信，可以以多种方式接受用户对象的输入。例如，输入设备506可以是鼠标、键盘、触摸屏设备或传感设备等。

本领域技术人员可以理解，图9中示出的结构并不构成对电子设备50的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

另外，本公开还提供一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如上述实施例所提供的列表显示方法。

另外，本公开还提供一种计算机程序产品，包括计算机指令，当计算机指令在电子设备上运行时，使得电子设备执行如上述实施例所提供的列表显示方法。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

Claims (12)

1.一种列表显示方法，其特征在于，应用于电子设备，所述方法包括：

确定待显示列表的业务类型；

根据所述待显示列表的业务类型，从所述电子设备的已创建列表中确定待复用列表；所述待复用列表的业务类型与所述待显示列表的业务类型相同；

在所述待复用列表的内容框与所述待显示列表的目标内容框相同的情况下，将所述待复用列表作为待显示列表进行显示；所述目标内容框包括所述待显示列表的待显示内容；

在所述待复用列表的内容框与所述待显示列表的目标内容框不相同的情况下，若内容框数据库中存在所述目标内容框，则根据所述目标内容框，显示所述待显示列表，若所述内容框数据库中不存在所述目标内容框，判断所述内容框数据库中是否存在空闲内容框；所述空闲内容框为未在所述电子设备上显示的内容框；

在所述内容框数据库中存在所述空闲内容框的情况下，根据所述空闲内容框，显示所述待显示列表。

2.根据权利要求1所述的列表显示方法，其特征在于，所述电子设备中部署有列表视图组件和JS组件；所述根据所述空闲内容框，显示所述待显示列表，包括：

通过所述列表视图组件从所述JS组件中获取所述待显示内容；

通过所述列表视图组件，基于所述待显示内容，替换所述空闲内容框中的内容，得到所述目标内容框；

通过所述列表视图组件，根据所述目标内容框，显示所述待显示列表。

3.根据权利要求2所述的列表显示方法，其特征在于，所述通过所述列表视图组件，基于所述待显示内容，替换所述空闲内容框中的内容，得到所述目标内容框，包括：

通过所述列表视图组件，在所述空闲内容框中显示白屏遮罩；所述白屏遮罩用于覆盖所述空闲内容框中的内容；

通过所述列表视图组件，基于所述待显示内容，替换所述空闲内容框中的内容，并删除所述白屏遮罩，得到所述目标内容框。

4.根据权利要求1所述的列表显示方法，其特征在于，所述电子设备中部署有列表视图组件和JS组件；所述方法还包括：

在所述内容框数据库中不存在所述空闲内容框的情况下，通过所述列表视图组件创建初始内容框；

通过所述列表视图组件从所述JS组件中获取所述待显示内容；

通过所述列表视图组件，基于所述待显示内容，替换所述初始内容框中的内容，得到所述目标内容框；

通过所述列表视图组件，根据所述目标内容框，显示所述待显示列表。

5.根据权利要求1所述的列表显示方法，其特征在于，所述方法还包括：

在所述电子设备的已创建列表中不存在所述待复用列表的情况下，创建所述待显示列表的列表框以及所述待显示列表的目标内容框，以显示所述待显示列表。

6.一种列表显示装置，其特征在于，所述列表显示装置包括确定单元、判断单元以及显示单元；

所述确定单元，用于确定待显示列表的业务类型；

所述确定单元，还用于根据所述待显示列表的业务类型，从所述列表显示装置的已创建列表中确定待复用列表；所述待复用列表的业务类型与所述待显示列表的业务类型相同；

所述判断单元，用于判断所述待复用列表的内容框与所述待显示列表的目标内容框是否相同；

所述显示单元，用于在所述待复用列表的内容框与所述待显示列表的目标内容框相同的情况下，将所述待复用列表作为待显示列表进行显示；所述目标内容框包括所述待显示列表的待显示内容；

所述显示单元还用于：

在所述待复用列表的内容框与所述待显示列表的目标内容框不相同的情况下，若内容框数据库中存在所述目标内容框，则根据所述目标内容框，显示所述待显示列表；

在所述待复用列表的内容框与所述待显示列表的目标内容框不相同的情况下，若所述内容框数据库中不存在所述目标内容框，判断所述内容框数据库中是否存在空闲内容框；所述空闲内容框为未在所述列表显示装置上显示的内容框；

所述显示单元，还用于在所述内容框数据库中存在所述空闲内容框的情况下，根据所述空闲内容框，显示所述待显示列表。

7.根据权利要求6所述的列表显示装置，其特征在于，所述列表显示装置中部署有列表视图组件和JS组件；所述显示单元具体用于：

通过所述列表视图组件从所述JS组件中获取所述待显示内容；

通过所述列表视图组件，基于所述待显示内容，替换所述空闲内容框中的内容，得到所述目标内容框；

通过所述列表视图组件，根据所述目标内容框，显示所述待显示列表。

8.根据权利要求7所述的列表显示装置，其特征在于，所述显示单元，具体用于：

通过所述列表视图组件，在所述空闲内容框中显示白屏遮罩；所述白屏遮罩用于覆盖所述空闲内容框中的内容；

通过所述列表视图组件，基于所述待显示内容，替换所述空闲内容框中的内容，并删除所述白屏遮罩，得到所述目标内容框。

9.根据权利要求6所述的列表显示装置，其特征在于，所述列表显示装置中部署有列表视图组件和JS组件；所述显示单元还用于：

在所述内容框数据库中不存在所述空闲内容框的情况下，通过所述列表视图组件创建初始内容框；

通过所述列表视图组件从所述JS组件中获取所述待显示内容；

通过所述列表视图组件，基于所述待显示内容，替换所述初始内容框中的内容，得到所述目标内容框；

通过所述列表视图组件，根据所述目标内容框，显示所述待显示列表。

10.根据权利要求6所述的列表显示装置，其特征在于，所述显示单元还用于：

在所述列表显示装置的已创建列表中不存在所述待复用列表的情况下，创建所述待显示列表以及所述待显示列表的目标内容框，以显示所述待显示列表。

11.一种电子设备，其特征在于，包括：处理器、用于存储所述处理器可执行的指令的存储器；其中，所述处理器被配置为执行指令，以实现所述权利要求1-5中任一项所述的列表显示方法。

12.一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1-5中任一项所述的列表显示方法。

Images