控件显示方法、装置、设备、介质及程序产品与流程

1.本技术实施例涉及计算机技术领域，特别涉及一种控件显示方法、装置、设备、介质及程序产品。


背景技术：

2.在游戏、浏览器等应用程序的页面中，控件是较为重要的显示元素，可以作为承载用户操作的操作对象，也可以作为展示信息(例如：表格、图片等)的容器对象。
3.相关技术中，当一个页面要渲染上万个控件时，需要根据控件数据库中的数据将这上万个控件渲染至页面中，也即，需要在该页面中创建并显示上万个控件。
4.然而，上述相关技术显示控件的方式需要页面在打开，或者页面在动态变化时，加载大量的数据进行渲染，从而导致页面出现卡顿的现象。


技术实现要素：

5.本技术实施例提供了一种控件显示方法、装置、设备、介质及程序产品，能够解决页面在显示大数量级的控件时的页面卡顿问题。所述技术方案如下：
6.一方面，提供了一种控件显示方法，所述方法包括：
7.获取目标页面对应的控件数据，所述控件数据用于加载在所述目标页面的控件中进行显示，其中，所述目标页面包括顺序排列的多个页面控件，所述多个页面控件中包括处于所述目标页面内和处于所述目标页面外的控件；
8.接收在所述目标页面上的控件滑动操作，所述控件滑动操作用于沿滑动方向从所述目标页面内的第一控件中清除第一数据，并将第二数据加载至所述目标页面内的控件中；
9.响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显示顺序正序进行数据更新，将第i k个页面控件内加载的控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据，其中，i为正整数，k为预设的正整数；或者，响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显示顺序反序进行数据更新，将第i个页面控件对应的控件数据之前的第k个控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据。
10.另一方面，提供了一种控件显示装置，所述装置包括：
11.获取模块，用于获取目标页面对应的控件数据，所述控件数据用于加载在所述目标页面的控件中进行显示，其中，所述目标页面包括顺序排列的多个页面控件，所述多个页面控件中包括处于所述目标页面内和处于所述目标页面外的控件；
12.接收模块，用于接收在所述目标页面上的控件滑动操作，所述控件滑动操作用于沿滑动方向从所述目标页面内的第一控件中清除第一数据，并将第二数据加载至所述目标页面内的控件中；
13.更新模块，用于响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显
示顺序正序进行数据更新，将第i k个页面控件内加载的控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据，其中，i为正整数，k为预设的正整数；或者，响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显示顺序反序进行数据更新，将第i个页面控件对应的控件数据之前的第k个控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据。
14.另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上述本技术实施例中任一所述的控件显示方法。
15.另一方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上述本技术实施例中任一所述的控件显示方法。
16.另一方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中任一所述的控件显示方法。
17.本技术实施例提供的技术方案带来的有益效果至少包括:
18.通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，不需要为每一条控件数据都创建一个页面控件，而是在页面上创建一定数量的页面控件，将控件数据依次加载至页面控件中进行显示减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
附图说明
19.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
20.图1是本技术一个示例性实施例提供的实施环境示意图；
21.图2是本技术一个示例性实施例提供的控件显示方法的流程图；
22.图3是本技术一个示例性实施例提供的控件显示方法中控件数据在页面控件中逐个移动的过程示意图；
23.图4是本技术一个示例性实施例提供的控件显示方法中控件数据在页面控件中间隔移动的过程示意图；
24.图5是本技术一个示例性实施例提供的控件显示方法中控件数据沿着目标页面的相反方向更新在页面控件中的过程示意图；
25.图6是本技术另一个示例性实施例提供的控件显示方法的流程图；
26.图7是本技术一个示例性实施例提供的控件显示方法中控件数据整行或者整列在
页面控件中进行移动的过程示意图；
27.图8是本技术另一个示例性实施例提供的控件显示方法的流程图；
28.图9是本技术一个示例性实施例提供的控件显示方法中围绕中心点更新多个页面控件中的控件数据的过程示意图；
29.图10是本技术一个示例性实施例提供的控件显示方法中实现模拟滑动动画的示意图；
30.图11是本技术另一个示例性实施例提供的控件显示方法的流程图；
31.图12是本技术一个示例性实施例提供的控件显示方法的关联控件的显示方法的示意图；
32.图13是本技术另一个示例性实施例提供的控件显示方法的流程图；
33.图14是本技术一个示例性实施例提供的控件显示方法中控件数据在页面控件中移动的过程示意图；
34.图15是本技术一个示例性实施例提供的控件显示装置的结构框图；
35.图16是本技术另一个示例性实施例提供的控件显示装置的结构框图；
36.图17是本技术一个示例性实施例提供的计算机设备的结构框图。
具体实施方式
37.为使本技术的目的、技术方案和优点更加清楚，下面将结合附图对本技术实施方式作进一步地详细描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
38.本技术中术语“第一”、“第二”等字样用于对作用和功能基本相同的相同项或相似项进行区分，应理解，“第一”、“第二”之间不具有逻辑或时序上的依赖关系，也不对数量和执行顺序进行限定。
39.用户界面ui(user interface)控件是指在应用程序的用户界面上能够看见的任何可视控件或元素。例如，图片、输入框、文本框、按钮、标签等控件，其中一些ui控件响应用户的操作。相关技术中，如在游戏界面内通常需要渲染大数量级(如：上万个)控件，需要根据控件数据库中的数据将这上万个控件渲染至页面中，也即，需要在该页面中创建并显示上万个控件。然而，上述相关技术显示控件的方式需要页面在打开，或者页面在动态变化时，加载大量的数据进行渲染，从而导致页面出现卡顿的现象。
40.例如：在3维(3dimensions，3d)游戏界面中，往往包含有大量的显示元素和承载用户操作的元素，计算机需要为这些元素创建相应数量的控件，那么，在初始化游戏界面时，由于需要创建大量的控件以承载这些元素，玩家在点击进入游戏界面时，会明显感觉到页面卡顿，从而给玩家带来较差的游戏体验。
41.本技术实施例提供了一种控件显示方法，解决了包含有大数量级控件(如：1000个以上)的页面的卡顿问题。在处理大数量级控件的页面时，包括以下步骤：
42.(1)初始化页面控件。
43.在页面初始化的时候，根据页面的分辨率设计一个页面的宽度能放下的控件数量n，需要展示的控件的行数为m，将能够填满整个界面的控件初始化。
44.(2)控件赋值。
45.根据服务器反馈给终端的控件数据集，将需要展示给用户的控件数据集中的前m
×
n个控件数据赋值到这m
×
n个控件中。
46.(3)数据移动赋值。
47.当用户操作鼠标对目标页面进行滑动浏览时，目标页面中的m
×
n个控件不进行移动，而是将这m
×
n个控件中的数据进行重新赋值。例如：将第一个控件内的数据变成第二个控件的数据，如果一行有n个控件，那这一行最后的控件中加载的数据就是n 1个数据，以此模拟控件的移动。
48.图1是本技术一个示例性实施例提供的实施环境示意图，如图1所示，该实施环境中包括终端110、服务器120和通信网络130，其中，终端110和服务器120之间通过通信网络130连接，在一些可选的实施例中，通信网络130可以是有线网络，也可以是无线网络，本实施例对此不加以限定。
49.在一些可选的实施例中，终端110是智能手机、平板电脑、笔记本电脑、台式计算机、智能家电、智能车载终端、智能音箱、数码相机等，但并不局限于此。以终端110实现为智能手机为例进行说明，可选地，终端110中安装和运行有目标应用程序，该目标应用程序可加载有显示大量控件的页面，示意性地，该目标应用程序可以是游戏应用程序、浏览器应用程序、即时通讯应用程序、社交应用程序、金融管理应用程序、购物应用程序等，本技术实施例对此不加以限定。
50.可选地，目标应用程序提供有控件显示功能，示意性的，当用户在目标应用程序中打开目标页面时，终端110需要对目标页面进行初始化操作，如图1所示，终端110发送页面初始化请求至服务器120，服务器120接收到该请求后，会将目标页面对应的控件数据集反馈至终端110；目标页面中包含有顺序排列的多个控件，终端110接收到控件数据集后，会将该控件数据集中排列在前面的数据首先加载并显示在多个控件中；当终端110接收到用户在目标页面上的滑动操作时，控件数据集中的数据将沿着滑动方向在多个控件中移动，从而多个控件中显示的内容将会根据数据的移动而更新。
51.在一些可选的实施例中，服务器120为终端110中安装的目标应用程序提供后台服务。值得注意的是，服务器120能够是独立的物理服务器，也能够是多个物理服务器构成的服务器集群或者分布式系统，还能够是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、cdn(content delivery network，内容分发网络)以及大数据和人工智能平台等基础云计算服务的云服务器。
52.其中，云技术(cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。云技术基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。可选地，服务器120还可以实现为区块链系统中的节点。
53.需要说明的是，本技术所涉及的信息(包括但不限于用户设备信息、用户个人信息
等)、数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)以及信号，均为经用户授权或者经过各方充分授权的，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。例如，本技术中涉及到的控件数据集都是在充分授权的情况下获取的。
54.结合上述介绍以及实施环境，对本技术实施例中提供的控件显示方法进行说明，请参考图2，其示出了本技术一个示例性实施例提供的控件显示方法的流程图，以该方法应用于如图1所示的终端中为例进行说明，如图2所示，该方法包括：
55.步骤201，获取目标页面对应的控件数据。
56.其中，控件数据用于加载在目标页面的控件中进行显示，目标页面包括顺序排列的多个页面控件，多个页面控件中包括处于目标页面内和处于目标页面外的控件。
57.目标页面是指在终端显示屏幕中显示的页面，示意性的，终端屏幕中显示有购买虚拟道具的页面，则目标页面为购买虚拟道具的页面。
58.页面控件是指在目标页面中显示的可重复使用的软件组件。其中，处于目标页面内的控件是指目标页面中显示的用户可视范围内的控件，处于目标页面外的控件是指目标页面外显示的不在用户可视范围内的控件。
59.可选地，当用户进入目标页面时，目标页面将会进行初始化操作，终端会根据目标页面的大小在目标页面内和目标页面外创建一定数量的空白的页面控件。可选地，在目标页面中创建的页面控件之间尺寸是相同的；或者，在目标页面创建的页面控件中，处于同一滑动方向的页面控件尺寸是相同的，例如：当目标页面接收到向上滑动的操作时，控件数据从页面控件1中清除，并加载至页面控件2中，则页面控件1和页面控件2的控件尺寸是相同的。
60.示意性的，请参考图3，终端根据目标页面的分辨率大小，在目标页面中创建了控件301至控件307，其中控件302至控件306为处于目标页面内的控件；控件301和控件307为处于目标页面外的控件，可选地，控件301至控件307尺寸相同。
61.在一些实施例中，当目标页面被加载时，终端从服务器获取该目标页面需要加载的控件数据集，控件数据集中包括当前已更新且待加载显示的控件数据；或者，当目标页面被加载时，终端从服务器依次获取控件数据，控件数据的获取顺序与控件数据在服务器中的存储顺序对应。
62.1、终端从服务器获取该目标页面需要加载的控件数据集
63.示意性的，当用户点击进入目标页面后，终端将发送目标页面初始化请求至服务器，该目标页面初始化请求中包含目标页面的标识信息，服务器会根据该标识信息将目标页面对应的控件数据集发送到终端，其中，控件数据集中包含有待加载至目标页面的页面控件中的控件数据。
64.终端在获取控件数据集后，对控件数据集进行存储，并根据目标页面的加载需求，从控件数据集中获取控件数据，并加载至页面控件中。在一些实施例中，根据目标页面的加载需求，终端会首先从控件数据集中获取部分待加载的控件数据，并存储至缓存区中，从而在需要加载时从缓存区中获取待加载的控件数据，并加载至页面控件中。
65.2、终端从服务器依次获取控件数据
66.可选地，服务器还可以根据终端在目标页面上接收到的操作，将控件数据集中的
控件数据依次逐步发送到终端中，示意性的，当服务器接收到终端发送的初始化请求后，会将控件数据集中的部分控件数据发送到终端中，终端首先对接收到的控件数据进行缓存，从而在需要加载显示时，将控件数据按照顺序加载到多个页面控件中并显示在目标页面中；或者，将控件数据根据控件间的关联关系加载到多个页面控件中并显示在目标页面中，例如：控件1和控件2为存在关联关系的控件，当控件1中加载有数据a时，同时将数据b加载至控件2中进行显示。
67.可选地，终端缓存的控件数据包括在多个页面控件中加载的控件数据以及至少一个将要加载到页面控件中的数据；若终端在目标页面上接收到向上滑动的操作时，服务器会将目标页面上滑方向对应的未发送控件数据发送到终端中进行缓存。
68.可选地，当控件数据集中的控件数据加载到空白的页面控件中时，即，当空白的页面控件中填入控件数据后，该页面控件将根据填入的控件数据进行显示，示意性的，在游戏界面的页面控件中填入一张虚拟道具的图像数据，则页面控件上会显示该虚拟道具的图片内容；该页面控件还将根据填入的控件数据设置相应的功能，示意性的，若填入的控件数据仅为展示页面信息的控件，则页面控件将被设置为不可触发的控件，若填入的控件数据中包括设置控件的触发操作的数据，则页面控件将被设置为可触发的控件。
69.在一些可选的实施例中，若目标页面中的布局较为固定，例如：在游戏界面的虚拟道具的购买页面中，左边为展示虚拟道具的画面，右边为每个虚拟道具对应的“购买”按钮，则在页面控件初始化时，可对页面控件的部分功能进行设置，示意性的，设置页面左侧展示信息的控件为不可触发的控件，设置页面右侧需要承载用户相关触发操作的控件为可触发的控件。
70.步骤202，接收在目标页面上的控件滑动操作。
71.控件滑动操作用于沿滑动方向从目标页面内的第一控件中清除第一数据，并将第二数据加载至目标页面内。
72.可选地，控件滑动操作对于第二数据的加载方式包括以下方法中的至少一种：
73.1、控件滑动操作用于将已缓存的第二数据直接加载至目标页面内的页面控件中。
74.示意性的，目标页面的页面下方边缘处的页面控件1中加载有数据i，当将页面向上滑动时，将数据i从页面控件1中清除，并在页面控件1中加载数据i 1，i为正整数。
75.2、目标页面外存在有第二控件，第二控件中加载有第二数据，控件滑动操作用于将第二数据从第二控件中清除，并加载至目标页面内的页面控件中。
76.可选地，接收在目标页面上的控件滑动操作之前，在目标页面的初始化加载阶段，终端需要将控件数据集中排列在前面的控件数据加载至多个页面控件中。示意性的，当终端接收到打开目标页面的操作时，会首先在目标页面内和目标页面外创建多个页面控件；对于处于目标页面外的页面控件，在终端获取得到控件数据集中的控件数据后，会按照控件数据集中的控件顺序首先将排列在前面的控件数据加载至处于目标页面内的页面控件中，请参考图3，1)中，在控件数据集中的控件数据a至e将依次被加载至控件302至306中；对于处于目标页面外的页面控件，可选地，终端将根据用户的滑动方向对其进行控件数据的填充，如图3所示，目标页面的滑动方向为上滑，则在控件数据集中的控件数据f被加载至控件307中，此时，控件301中未加载任一控件数据；或者控件301中加载有控件数据集中的排列在最后的控件数据。
77.可选地，若目标页面被打开时，显示的是控件数据集中位于中间部分的控件数据，则在图3中的控件302至控件306中加载的是位于控件数据集中排列在中间的部分控件数据，例如：控件302至控件306中加载有数据d至h，则控件301中加载有数据c，控件307中加载有数据i。
78.可选地，上述控件滑动操作可实现在目标页面上的鼠标的滚动操作，也可以实现为在目标页面上的对滑动条的拖动操作、还可以实现为对目标页面中的翻页控件的点击操作等，本技术实施例对此不加以限定。
79.步骤203，响应于滑动操作的滑动方向指示，按控件数据的显示顺序正序进行数据更新，将第i k个页面控件内加载的控件数据更新加载至第i个页面控件中，显示处于目标页面内的第二数据。
80.其中，i为正整数，k为预设的正整数。
81.可选地，上述控件数据的加载情况包括以下情况中的至少一种：
82.(1)当k等于1，即响应于滑动操作的滑动方向指示按控件数据的显示顺序正序进行数据更新，将第i 1个页面控件内加载的控件数据更新加载至第i个页面控件中。
83.示意性的，当用户在目标页面上触发控件滑动操作时，多个页面控件中加载的控件数据将沿着滑动方向移动，当控件数据在移动时，会依次加载至每一个页面控件中，如图3所示，2)中，当目标页面向上滑动一个控件的距离时，控件数据a至e被移动到控件301至305中，控件306中加载控件数据f，控件307中加载控件数据集中的控件数据g；3)中，当目标页面继续向上滑动一个控件的距离时，控件301中的控件数据a被清空，控件数据b至f被移动到控件301至305中，控件306中加载控件数据g，控件307中加载控件数据集中的控件数据h。
84.在一些可选的实施例中，沿着目标页面的滑动方向控件数据从处于目标页面内的页面控件中被清除，将该被清除的控件数据存储至缓存区中，若目标页面开始反方向滑动，该控件数据将从缓存区中被读取并沿着反方向再次加载至目标页面内的控件中。
85.(2)当k大于1，则控件数据的加载情况包括以下情况中的至少一种：
86.情况一：若在目标页面中一行或者一列的页面控件数量为j个，j为正整数，当k小于j时，控件数据在单行/列中整体进行移动。也就是说，当控件数据在加载时，单个控件数据不会加载至每一个页面控件。
87.例如：目标页面中一列的页面控件的数量为7个，当k等于3时，即响应于滑动操作的滑动方向指示按控件数据的显示顺序正序进行数据更新，将第i 3个页面控件内加载的控件数据更新加载至第i个页面控件中。
88.示意性的，请参考图4，1)中，控件数据a至f加载在控件402至407中；2)中，当控件404中的控件数据c移动时，会直接移动到控件401中。
89.情况二：若在目标页面中一行或者一列的页面控件数量为j个，当k等于j时，可实现控件数据在目标页面中的逐行/列的移动过程。
90.例如：目标页面中一行的页面控件的数量为3个，当k等于3时，即响应于滑动操作的滑动方向指示按控件数据的显示顺序正序进行数据更新，将第i 3个页面控件内加载的控件数据更新加载至第i个页面控件中。
91.也就是说，当目标页面接收到向上滑动的操作时，目标页面的第2行的第1个页面
控件中的控件数据会加载至第1行的第1个页面控件中，第2行的第2个页面控件中的控件数据会加载至第1行的第2个页面控件中，第2行的第3个页面控件中的控件数据会加载至第1行的第3个页面控件中，从而实现了控件数据在目标页面中的逐行移动过程。
92.情况三：若在目标页面中一行或者一列的页面控件数量为j个，当k等于n
×
j时，n为正整数，可实现控件数据在目标页面中的多行/列的移动过程。
93.例如：目标页面中一行的页面控件的数量为3个，当k等于6时，即响应于滑动操作的滑动方向指示按控件数据的显示顺序正序进行数据更新，将第i 6个页面控件内加载的控件数据更新加载至第i个页面控件中。
94.也就是说，当目标页面接收到向上滑动的操作时，目标页面的第3行的第1个页面控件中的控件数据会加载至第1行的第1个页面控件中，第3行的第2个页面控件中的控件数据会加载至第1行的第2个页面控件中，第3行的第3个页面控件中的控件数据会加载至第1行的第3个页面控件中，从而实现了控件数据在目标页面中的多行移动过程。
95.步骤204，响应于滑动操作的滑动方向指示，按控件数据的显示顺序反序进行数据更新，将第i个页面控件对应的控件数据之前的第k个控件数据更新加载至第i个页面控件中，显示处于目标页面内的第二数据。
96.示意性的，以k等于2为例进行说明，请参考图5，1)中，控件数据c加载在控件501中；2)中，当目标页面向上滑动时，控件数据c之前的第2个控件数据a将会加载至控件501中。
97.综上所述，本技术实施例提供的控件显示方法通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，不需要为每一条控件数据都创建一个页面控件，而是在页面上创建一定数量的页面控件，将控件数据依次加载至页面控件中进行显示，减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
98.本技术实施例提供的控件显示方法，可以按控件数据集中控件数据的显示顺序，沿滑动操作的滑动方向顺序更新或者反序更新控件中加载的控件数据，增加了控件数据在更新方式上的多样性。
99.在一些可选的实施例中，控件数据集中的控件数据可以整行或者整列加载至页面控件中，请参考图6，其示出了本技术一个示例性实施例提供的控件显示方法的流程图，以该方法应用于如图1所示的终端中为例进行说明，如图6所示，该方法包括：
100.步骤601，获取目标页面对应的控件数据。
101.其中，控件数据用于加载在目标页面的控件中进行显示，目标页面包括顺序排列的多个页面控件，多个页面控件中包括处于目标页面内和处于目标页面外的控件。
102.在一些可选的实施例中，多个页面控件中包括主加载控件和辅加载控件，其中，主加载控件为正常显示在目标页面中的控件，辅加载控件为叠加在主加载控件上的控件；可选地，控件数据集中包括第一控件数据和第二控件数据，其中，第一控件数据用于加载在目标页面的主加载控件中进行显示，第二控件数据用于加载在目标页面的辅加载控件中进行显示。
103.示意性的，在浏览器界面中，当用户搜索某个关键词后，终端会开始加载该关键词
的搜索结果页面，那么该关键词的搜索结果页面对应的控件数据即为第一控件数据，将会加载在主加载控件中进行显示；在该搜索结果页面中会产生一些推荐内容，则这些推荐内容对应的控件数据即为第二控件数据，将会加载在辅加载控件中进行显示。
104.步骤602，接收在目标页面上的控件滑动操作。
105.控件滑动操作用于沿滑动方向从目标页面内的第一控件中清除第一数据，并将第二数据加载至目标页面内的控件中。
106.可选地，上述控件滑动操作可以是通过终端的触控屏、鼠标、键盘或其它外接设备触发的操作；还可以是直接在终端的屏幕上触发的操作。该控件滑动操作可实现为上滑操作、下滑操作、左滑操作、右滑操作等中的至少一种，本技术实施例对此不加以限定。
107.在一些可选的实施例中，目标页面中包括m行n列页面控件，m和n为正整数。
108.步骤603，响应于滑动操作的滑动方向沿行所在的第一方向，按控件数据的显示顺序，将第n’ 1列中页面控件加载的数据更新至第n’列页面控件中。
109.示意性的，请参考图7，目标页面中显示有2行3列页面控件，第2行控件中加载有控件数据d至f，当目标页面接收到向上滑动的操作时，控件数据d至f将更新至第一行控件中，控件数据g至i将更新至第2行控件中。
110.步骤604，响应于滑动操作的滑动方向沿列所在的第二方向，按控件数据的显示顺序，将第m’ 1行中页面控件加载的数据更新至第m’行页面控件中。
111.示意性的，请参考图7，目标页面中显示有2行3列页面控件，第2列控件中加载有数据b和数据e，当目标页面接收到向左滑动的操作时，数据b和数据e将更新至第1列控件中，数据c和数据f将更新至第2列控件中，第3列控件中将加载数据j和数据k。
112.在一些可选的实施例中，在目标页面中指定行或者指定列的页面控件为锁定状态，也即，该行(或者列)的页面控件中的控件数据无法移动，其他行(或者列)的页面控件中的控件数据也无法移动至该行(或者列)中。示意性的，当目标页面接收到滑动操作时，第i行(或者第j列)的控件数据会加载至第i 2行(或者第j 2列)的页面控件，其中，第i 1(或者第j 1列)的页面控件中加载的控件数据被锁定，不会进行移动。例如：在包含有4行5列目标控件的目标页面中，第3行为锁定行，则当目标页面接收到向上的滑动操作时，第4行目标控件中的控件数据将会直接加载至第2行中进行显示，第3行中的显示的数据不改变。
113.在一些可选的实施例中，可以对目标页面中包括m行n列页面控件中的目标行或者目标列的页面控件中的数据进行移动。也就是说，在目标页面中，不进行整行或者整列的控件数据移动，可以只针对其中的某一行或者某一列的数据进行移动。
114.综上所述，本技术实施例提供的控件显示方法通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，不需要为每一条控件数据都创建一个页面控件，而是在页面上创建一定数量的页面控件，将控件数据依次加载至页面控件中进行显示，减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
115.本技术实施例提供的方法，控件在显示过程中，控件数据可以整行或者整列进行移动，从而控件数据可以整行或者整列加载至页面控件中进行显示，提高了页面在加载控件时的加载效率。
116.在一些可选的实施例中，控件数据在加载至页面控件中的过程中，页面控件会显示相应的动画特效。请参考图8，其示出了本技术一个示例性实施例提供的控件显示方法的流程图，以该方法应用于如图1所示的终端中为例进行说明，如图8所示，该方法包括：
117.步骤801，获取目标页面对应的控件数据。
118.其中，控件数据用于加载在目标页面的控件中进行显示，目标页面包括顺序排列的多个页面控件，多个页面控件中包括处于目标页面内和处于目标页面外的控件。
119.步骤802，接收在目标页面上的控件滑动操作。
120.控件滑动操作用于沿滑动方向从目标页面内的第一控件中清除第一数据，并将第二数据加载至目标页面内。
121.步骤803，响应于控件滑动操作，按控件数据的显示顺序，沿滑动操作的滑动方向更新多个页面控件中的控件数据，显示处于目标页面内的第二数据，并显示多个页面控件在控件数据更新过程中的动画效果。
122.在一些可选的实施例中，多个页面控件在控件数据更新过程中显示的动画效果包括以下情况中的至少一种：
123.情况一、响应于控件滑动操作，显示多个页面控件在目标页面中的平铺渲染动画，平铺渲染动画用于表示多个页面控件之间的逐步加载过程。
124.也就是说，在控件数据加载到多个页面控件中进行渲染显示时，如果一个页面中包括14个页面控件，不是一次性渲染14个页面控件从而进行显示，而是会分批次对页面控件进行渲染，从而形式平铺渲染动画，例如：页面控件自上而下慢慢显示的过程。
125.可选地，其中，平铺渲染动画包括：从上往下展开的平铺动画、从下往上展开的平铺动画、从左往右展开的平铺动画、从右往左展开的平铺动画、围绕某一中心进行转动的平铺动画等，本技术实施例对此不加以限定。
126.示意性的，以平铺渲染动画实现为绕某一中心点进行转动的平铺动画为例进行说明，如图9所示，目标页面900中围绕着中心点a存在有控件901至905，其中加载有数据a至e，当目标页面900接收到逆时针的滑动操作时，则数据a将从目标页面900中被清除，数据b至e将依次加载至控件901至904中，控件905中加载有新的数据f。
127.可选地，按照预设渲染频率，在指定帧数间隔内对多个页面控件中的j个页面控件进行渲染显示，生成并显示平铺渲染动画，j为正整数。
128.示意性的，若多个页面控件的行数为3，列数为2，则预设渲染频率可以设置为每3帧渲染2个页面控件，则在3帧间隔内，可渲染一行页面控件，可选地，页面控件在渲染时的动画效果为从上往下展开的平铺动画。
129.情况二、响应于控件滑动操作，显示多个页面控件从基准位置沿滑动方向滚动的模拟滑动动画，多个页面控件在模拟滑动动画播放完毕时，恢复显示至基准位置。
130.可选地，其中基准位置可以是在初始化目标页面时创建多个页面控件时，多个控件各自显示的位置。
131.在一些可选的实施例中，上述模拟滑动动画的实现方式还包括以下步骤：
132.1、显示多个页面控件沿滑动方向滑动预设距离后，恢复至基准位置显示的动画。
133.示意性的，请参考图10，在目标页面1000中，设定页面控件1002、页面控件1003、页面控件1004所在位置为其基准位置，其显示区域为屏幕显示空间1005。当目标页面1000接
收到向左移动的操作时，页面控件1002中的控件数据b向页面控件1001设置，页面控件1003中的控件数据c向页面控件1002设置，页面控件1004中的控件数据d向页面控件1003设置，在控件数据移动的过程中，页面控件1002至页面控件1004也整体移动了一小段距离，如图10所示，页面控件1002从a点移动到b点；在页面控件1002移动到b点且控件数据c加载完成后，页面控件1002恢复a点位置。
134.2、显示多个页面控件沿滑动方向从第一界面边缘滑出目标页面，并从第二界面边缘滑入目标页面的动画，其中，第一界面边缘和第二界面边缘相对。
135.示意性在，当目标页面1010接收到继续向左移动的操作时，页面控件1001中的控件数据b将从屏幕显示空间1005的边缘1滑出目标页面1010，页面控件1006中的控件数据f将从屏幕显示空间1005的边缘2滑入目标界面1010内，在移动的过程中，控件1001移动到边缘1左侧，控件1006移动到边缘2右侧。
136.情况三、响应于控件滑动操作，显示多个页面控件在目标页面中的翻页动画效果，翻页动画效果用于表示多个页面控件的整体加载过程。
137.示意性的，若控件滑动操作实现为点击操作，每点击一次目标页面中多个页面控件中的数据全部都需要更新，则当接收到点击操作之后，终端可以将需要在页面中渲染的控件数据整体渲染结束之后再显示在目标页面中，从而形成翻页动画效果。
138.综上所述，本技术实施例提供的控件显示方法通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，不需要为每一条控件数据都创建一个页面控件，而是在页面上创建一定数量的页面控件，将控件数据依次加载至页面控件中进行显示，减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
139.本技术实施例提供的方法，控件数据在加载至页面控件中的过程中，页面控件会在目标页面中显示相应的动画特效，一方面，提升了页面数据在显示过程中的流畅度，另一方面，提升了用户在该目标页面中的使用体验感，提高了在控件显示过程中的人机交互效率。
140.在一些可选的实施例中，目标页面中包含有相互关联的控件对，当控件数据集中的某一控件数据加载至其中一个控件中时，与其关联的控件中将会显示与该控件数据相关的数据。请参考图11，其示出了本技术一个示例性实施例提供的控件显示方法的流程图，以该方法应用于如图1所示的终端中为例进行说明，如图11所示，该方法包括：
141.步骤1101，获取目标页面对应的控件数据。
142.其中，控件数据用于加载在目标页面的控件中进行显示，目标页面包括顺序排列的多个页面控件，多个页面控件中包括处于目标页面内和处于目标页面外的控件。
143.步骤1102，接收在目标页面上的控件滑动操作。
144.控件滑动操作用于沿滑动方向从目标页面内的第一控件中清除第一数据，并将第二数据加载至目标页面内。
145.在一些可选的实施例中，若控件数据集中的控件数据在某一滑动方向上已加载到最后一个数据，则用户无法在该滑动方向上继续移动控件数据。
146.在一些可选的实施例中，多个页面控件中包括关联控件对，关联控件对中包括第
一关联控件和第二关联控件，第一关联控件和第二关联控件用于通过关联的方式加载控件数据。
147.步骤1103，响应于控件滑动操作，按控件数据的加载顺序，沿滑动操作的滑动方向将第一关联数据加载至第一关联控件中；以及，将第二关联数据加载至第二关联控件中。
148.其中，第一关联数据和第二关联数据的显示内容关联。示意性的，若第一关联控件为承载图标的控件，则第二关联控件即为显示该图标对应的介绍的控件；若第一关联控件为承载选择列表标题的控件，则第二关联控件即为显示该选择列表的列表内容的控件。
149.在一些可选的实施例中，响应于控件滑动操作，按控件数据的显示顺序，沿滑动操作的滑动方向将第一关联数据加载至第一关联控件中；响应于第一关联数据加载至第一关联控件中，将第二关联数据加载至第一关联控件中。也就是说，第一关联数据和第二关联数据之前存在主辅关系，只要当第一关联数据加载至第一关联控件中，第二关联数据才能加载至第一关联控件中。
150.在一些可选的实施例中，响应于控件滑动操作，按控件数据的显示顺序，沿滑动操作的滑动方向将第一关联数据滑入第一关联控件中；同时将第二关联数据加载至第一关联控件中。也就是说，第一关联控件和第二关联控件之间没有优先级的区别。
151.可选地，其中第一关联控件和第二关联控件通过关联的方式加载控件数据的情况包括以下情况中的至少一种：
152.1、第一关联控件和第二关联控件用于通过位置关联的方式加载控件数据。
153.示意性的，请参考图12，在游戏的虚拟道具的道具图标显示页面中包括4个页面控件，其中，第一关联控件1201处于左侧页面1200的中间位置；第二关联控件1202布满整个右侧页面1210，用于承载对于第一关联控件1201中的虚拟道具的详情介绍内容。当虚拟道具2对应的控件数据加载至第一关联控件1201中时，第一关联控件1201中会显示虚拟道具2的图标，用户不需对该图标进行任何点击操作，在第二关联控件1202中就会自动加载出虚拟道具2对应的道具介绍内容。
154.在一些可选的实施例中，第二关联控件的显示位置处于第一关联控件内。则当第一关联控件加载第一关联数据时，第二关联控件会同时加载第二关联数据。
155.2、第一关联控件和第二关联控件用于通过控件形状关联的方式加载控件数据。
156.其中，控件形状用于指示第一关联控件和第二关联控件在目标页面上的显示形状。
157.示意性的，在目标页面中，若存在有控件1和控件2的形状是相同的，则当控件1中显示有数据a时，控件2中会自动加载与数据a相关联的数据。
158.可选地，其中，第二关联控件包括与第一关联控件形状相同的控件和与第一关联控件形状不同的控件。示意性的，在形状相同的第一关联控件和第二关联控件中加载内容语义相似度较高的控件数据；在形状不同的第一关联控件和第二关联控件中加载内容语义相似度较低的控件数据。例如：在学习词语的界面，在第一关联控件中加载一个词语后，其他与第一关联控件形状相同的第二关联控件将加载该词语的近义词；与第一关联控件形状不同的第二关联控件将加载该词语的反义词。
159.3、第一关联控件和第二关联控件用于通过时间关联的方式加载控件数据。
160.可选地，当第一关联数据加载至第一关联控件中，在预设时长后，第二关联控件中
将加载第二关联数据。示意性的，在0秒时，第一关联控件加载有第一关联数据，3秒后，在第二关联控件中加载第二关联数据。
161.综上所述，本技术实施例提供的控件显示方法通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，不需要为每一条控件数据都创建一个页面控件，而是在页面上创建一定数量的页面控件，将控件数据依次加载至页面控件中进行显示，减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
162.本技术实施例提供的方法，目标页面中包含有相互关联的控件对，当控件数据集中的目标控件数据加载至其中一个控件中时，与其关联的控件中将会直接显示与目标控件数据相关的数据，则用户无需进行任何操作即可查看与目标控件数据相关的数据，提高了用户在目标页面中使用目标控件时的使用效率。
163.在一些可选的实施例中，目标页面中包括一定数量的页面控件，控件数据沿着滑动操作的滑动方向加载在页面控件之前，页面控件会沿着滑动方向循环进行移动，请参考图13，其示出了本技术一个示例性实施例提供的控件显示方法的流程图，以该方法应用于如图1所示的终端中为例进行说明，如图13所示，该方法包括：
164.步骤1301，获取目标页面对应的控件数据。
165.其中，控件数据用于加载在目标页面的控件中进行显示，目标页面包括顺序排列的多个页面控件，多个页面控件中包括处于目标页面内和处于目标页面外的控件。
166.示意性的，请参考图14，1)中，在目标页面中创建控件1401至1407这7个控件，且控件1402至1406为目标页面内的，也即在用户可视范围内的控件；控件1401和控件1407为目标页面外的，也即不在用户可视范围内的控件。可选地，控件创建结束后，将数据a至数据e依次加载至控件1402至1406中，且将位于数据e后的数据f加载至控件1407中。
167.步骤1302，接收在目标页面上的控件滑动操作。
168.可选地，上述控件滑动操作可实现在目标页面上的鼠标的滚动操作，也可以实现为在目标页面上的对滑动条的拖动操作、还可以实现为对目标页面上的翻页控件的点击操作、还可以实现为在终端屏幕上对目标页面的长按拖动操作等，本技术实施例对此不加以限定。
169.步骤1303，响应于控件滑动操作，沿滑动方向循环移动多个页面控件。
170.其中，在多个页面控件的循环移动过程中，将处于目标页面内的第一控件滑出目标页面，处于目标页面外的第二控件滑入目标页面，并将位于第一端点位置的端点位控件移动至第二端点位置；第二控件中加载有待目标页面中进行显示的控件数据，第一端点位置为与滑动方向相同一侧的端点位置，第二端点位置为与滑动方向相反一侧的端点位置。
171.需要说明的是，上述控件滑动操作的滑动方向是指目标页面的滑动方向，例如：当控件滑动操作实现为在目标页面上的鼠标的滚动操作时，鼠标向下滚动，目标页面向上滑动，则滑动方向为向上滑动。
172.示意性的，请参考图14，1)中，当目标页面接收到向上滑动的操作时，控件1401所在位置为第一端点位置，控件1407所在位置为第二端点位置；2)中，当目标页面接收到向上滑动的操作时，将控件1402至1407沿着滑动方向向前移动一个控件的位置；向上移动时，控
件1402被移动到了目标页面外，控件1407被移动到了目标页面内，且位于第一端点位置的控件1401被移动到了第二端点位置。
173.步骤1304，清空当前位于第一端点位置的端点位控件，并按控件数据的显示顺序，在当前处于第二端点位置的端点位控件中加载控件数据。
174.可选地，若目标页面的两侧端点位置仅分别包括一个端点位控件，则清空的即为从目标页面的第一控件中被清除的控件数据。
175.示意性的，请参考图4，2)中，控件1401至1407的移动结束后，控件数据b与控件数据e随着控件1403至控件1406的移动向上移动了一个页面控件的位置；控件数据f随着控件1407滑入目标页面内，也即显示在目标页面内；清除当前处于第一端点位置的控件1402中的控件数据a，且将当前处于第二端点位置的控件1401中顺序加载控件数据g。
176.在一些可选的实施例中，当多个页面控件循环移动结束后，按照控件数据的加载顺序，在当前处于目标页面内和当前处于第二端点位置的端点位控件中加载控件数据。
177.也即，当多个页面控件循环移动结束后，会对当前处于目标页面内和当前处于第二端点位置的端点位控件重新进行赋值，示意性的，请参考图14，第t个时间帧时，控件1401中未加载数据，控件1402至控件1407中依次加载控件数据a至f；第t 1时间帧时，控件1403至控件1404沿滑动方向移动了一个页面控件的位置，控件1402移动到了目标页面外，控件1401从目标页面外的一侧端点移动到了另一侧端点，控件1407移动到了目标页面内，且控件1402至控件1407中加载的数据被清空；第t 2个时间帧时，若控件滑动操作对应的滑动的距离仅为一个页面控件的长度，在控件1403至控件1407和控件1401中顺序加载控件数据b至g，若控件滑动操作对应的滑动的距离为5个页面控件的长度，在控件1403至控件1407和控件1401中顺序加载控件数据f至j。
178.综上所述，本技术实施例提供的方法，控件数据集中的控件数据沿着滑动操作的滑动方向顺序加载在页面控件之前，页面控件会沿着滑动方向循环进行移动，提升了控件数据在显示过程中的流畅度。
179.请参考图15，其示出了本技术一个示例性的实施例提供的控件显示装置结构框图，该装置包括如下模块：
180.获取模块1500，用于获取目标页面对应的控件数据，所述控件数据用于加载在所述目标页面的控件中进行显示，其中，所述目标页面包括顺序排列的多个页面控件，所述多个页面控件中包括处于所述目标页面内和处于所述目标页面外的控件；
181.接收模块1510，用于接收在所述目标页面上的控件滑动操作，所述控件滑动操作用于沿滑动方向从所述目标页面内的第一控件中清除第一数据，并将第二数据加载至所述目标页面内的控件中；
182.更新模块1520，用于响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显示顺序正序进行数据更新，将第i k个页面控件内加载的控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据，其中，i为正整数，k为预设的正整数；或者，响应于所述滑动操作的所述滑动方向指示，按所述控件数据的显示顺序反序进行数据更新，将第i个页面控件对应的控件数据之前的第k个控件数据更新加载至第i个页面控件中，显示处于所述目标页面内的所述第二数据。
183.请参考图16，在一些可选的实施例中，该装置还包括如下模块：
184.显示模块1530，用于响应于所述控件滑动操作，显示所述多个页面控件从基准位置沿所述滑动方向滚动的模拟滑动动画，所述多个页面控件在所述模拟滑动动画播放完毕时，恢复显示至所述基准位置。
185.在一些可选的实施例中，所述显示模块1530，还用于显示所述多个页面控件沿所述滑动方向滑动预设距离后，恢复至所述基准位置显示的动画；或者，用于显示所述多个页面控件沿所述滑动方向从第一界面边缘滑出所述目标页面，并从第二界面边缘滑入所述目标页面的动画，其中，所述第一界面边缘和所述第二界面边缘相对。
186.在一些可选的实施例中，所述显示模块1530，还用于响应于所述控件滑动操作，显示所述多个页面控件在所述目标页面中的平铺渲染动画，所述平铺渲染动画用于表示所述多个页面控件之间的逐步加载过程。
187.在一些可选的实施例中，所述显示模块1530，还用于按照预设渲染频率，在指定帧数间隔内对所述多个页面控件中的j个页面控件进行渲染显示，生成并显示所述平铺渲染动画，j为正整数。
188.在一些可选的实施例中，所述目标页面中包括m行n列页面控件，m和n为正整数；所述更新模块1520，还用于响应于所述滑动操作的滑动方向沿行所在的第一方向，按所述控件数据的显示顺序，将第n’ 1列中页面控件加载的数据更新至第n’列页面控件中；所述更新模块1520，还用于响应于所述滑动操作的滑动方向沿列所在的第二方向，按所述控件数据的显示顺序，将第m’ 1行中页面控件加载的数据更新至第m’行页面控件中。
189.在一些可选的实施例中，所述多个页面控件中包括关联控件对，所述关联控件对中包括第一关联控件和第二关联控件，所述第一关联控件和所述第二关联控件用于通过关联的方式加载所述控件数据；所述更新模块1520，用于响应于所述控件滑动操作，按所述控件数据的显示顺序，沿所述滑动操作的所述滑动方向将第一关联数据加载至所述第一关联控件中；以及，将第二关联数据加载至所述第二关联控件中，所述第一关联数据和所述第二关联数据的显示内容关联。
190.在一些可选的实施例中，所述第一关联控件和所述第二关联控件用于通过位置关联的方式加载所述控件数据；或者，所述第一关联控件和所述第二关联控件用于通过控件形状关联的方式加载所述控件数据，所述控件形状用于指示所述第一关联控件和所述第二关联控件在所述目标页面上的显示形状；或者，所述第一关联控件和所述第二关联控件用于通过时间关联的方式加载所述控件数据。
191.综上所述，本技术实施例提供的控件显示装置通过接收在目标页面上的控件滑动操作，将获取得到目标页面对应的控件数据沿着滑动操作的滑动方向依次加载并显示在目标页面中的页面控件中，由于在将控件数据渲染显示在目标页面的过程中，以控件数据的移动替代了控件的生成，减少了在目标页面中需要创建的控件的数量，从而减少了对于计算机性能的损耗，解决了目标页面在显示大数量级的控件时的页面卡顿问题。
192.需要说明的是：上述实施例提供的控件显示装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的控件显示装置和控件显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。
access memory)和动态随机存取存储器(dram，dynamic random access memory)。上述本技术实施例序号仅仅为了描述，不代表实施例的优劣。
202.本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。
203.以上所述仅为本技术的可选实施例，并不用以限制本技术，凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。