CN113900574A - 一种数据展示方法、装置、电子设备及计算机可读介质 - Google Patents

Abstract

本申请公开了数据展示方法、装置、电子设备及计算机可读介质，涉及计算机技术领域，该方法包括：接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。从而提升页面渲染和交互速度，提升用户体验。

Description

一种数据展示方法、装置、电子设备及计算机可读介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种数据展示方法、装置、电子设备及计算机可读介质。

背景技术

目前，当用户界面组件库的下拉选择控件中的选项数目达到一定量的时候，在基于用户的需求进行展示时，页面渲染和交互会出现卡顿，用户体验不佳。

在实现本申请过程中，发明人发现现有技术中至少存在如下问题：

用户界面组件库中，面对较多选项数据量时，页面渲染和交互时出现卡顿。

发明内容

有鉴于此，本申请实施例提供一种数据展示方法、装置、电子设备及计算机可读介质，能够解决现有的用户界面组件库中，面对较多选项数据量时，页面渲染和交互时出现卡顿的问题。

为实现上述目的，根据本申请实施例的一个方面，提供了一种数据展示方法，包括：

接收数据展示请求，进而获取对应的全量数据；

确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；

根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；

根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；

基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

可选地，在更新数据滚动距离之后，方法还包括：

根据更新的数据滚动距离，确定更新的开始下标和更新的结束下标；

根据更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标；

根据更新的开始下标和更新的结束下标以及缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

可选地，确定缓冲区中的数据对应的开始下标和结束下标，包括：

根据预设的选项高度和预设的缓冲区高度，确定缓冲区中的选项个数；

基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

可选地，基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标，包括：

将更新的开始下标与更新的结束下标之间的数据按预设的顺序进行排序；

从排序后得到的数据中依次选取与选项个数相等的数据，进而将依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的开始下标，将依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的结束下标。

可选地，基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标，包括：

从排序后得到的数据中倒序依次选取与选项个数相等的数据，进而将倒序依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的开始下标。

可选地，将目标待展示数据展示于预设的下拉框中，包括：

计算目标待展示数据的高度值，进而在前端页面基于高度值排列目标待展示数据；

确定全量数据的数量，进而利用额外的元素包含目标待展示数据，其中，额外元素的高度由全量数据的数量和预设的选项高度确定。

可选地，在接收数据展示请求之前，方法还包括：

接收数据检索请求，进而确定对应的组件库；

从对应的组件库中，确定数据检索请求对应的全量数据。

另外，本申请还提供了一种数据展示装置，包括：

接收单元，被配置成接收数据展示请求，进而获取对应的全量数据；

开始位置确定单元，被配置成确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；

结束位置确定单元，被配置成根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；

下标确定单元，被配置成根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；

数据展示单元，被配置成基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

可选地，数据展示单元进一步被配置成：

根据更新的数据滚动距离，确定更新的开始下标和更新的结束下标；

根据更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标；

根据更新的开始下标和更新的结束下标以及缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

可选地，数据展示单元进一步被配置成：

根据预设的选项高度和预设的缓冲区高度，确定缓冲区中的选项个数；

基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

可选地，数据展示单元进一步被配置成：

将更新的开始下标与更新的结束下标之间的数据按预设的顺序进行排序；

从排序后得到的数据中依次选取与选项个数相等的数据，进而将依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的开始下标，将依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的结束下标。

可选地，数据展示单元进一步被配置成：

从排序后得到的数据中倒序依次选取与选项个数相等的数据，进而将倒序依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的开始下标。

可选地，数据展示单元进一步被配置成：

计算目标待展示数据的高度值，进而在前端页面基于高度值排列目标待展示数据；

确定全量数据的数量，进而利用额外的元素包含目标待展示数据，其中，额外元素的高度由全量数据的数量和预设的选项高度确定。

可选地，数据展示装置还包括检索单元，被配置成：

接收数据检索请求，进而确定对应的组件库；

从对应的组件库中，确定数据检索请求对应的全量数据。

另外，本申请还提供了一种数据展示电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如上述的数据展示方法。

另外，本申请还提供了一种计算机可读介质，其上存储有计算机程序，程序被处理器执行时实现如上述的数据展示方法。

上述发明中的一个实施例具有如下优点或有益效果：本申请通过接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。通过基于数据滚动距离、预设的缓冲区高度、预设的下拉框高度等首先确定出全量数据中的待展示数据，然后再计算得到待展示数据中的目标待展示数据，并在下拉框中进行展示。通过每次只处理全量数据中的部分数据并渲染到页面，可以提升页面渲染和交互速度，提升用户体验。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本申请，不构成对本申请的不当限定。其中：

图1是根据本申请第一实施例的数据展示方法的主要流程的示意图；

图2是根据本申请第二实施例的数据展示方法的主要流程的示意图；

图3是根据本申请第三实施例的数据展示方法的应用场景示意图；

图4是根据本申请实施例的数据展示装置的主要单元的示意图；

图5是本申请实施例可以应用于其中的示例性系统架构图；

图6是适于用来实现本申请实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本申请第一实施例的数据展示方法的主要流程的示意图，如图1所示，数据展示方法包括：

步骤S101，接收数据展示请求，进而获取对应的全量数据。

本实施例中，数据展示方法的执行主体(例如，可以是服务器)可以通过有线连接或无线连接的方式，接收数据展示请求。其中，数据展示请求，指的是对下拉选择组件中的各选项进行展示的请求。

具体地，在接收数据展示请求之前，数据展示方法还包括：接收数据检索请求，进而确定对应的组件库；从对应的组件库中，确定数据检索请求对应的全量数据。执行主体可以接收数据检索请求，并根据请求中携带的组件库标识(例如，A)，来确定组件库标识(例如，A)对应的组件库(例如，A组件库)。数据检索请求中可包含检索关键词，执行主体可以根据检索关键词从数据中检索得到对应的全量数据。全量数据，可以是对应检索关键词的所有相关的数据。

步骤S102，确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置。

具体地，数据滚动距离可以根据用户的需求进行设置。示例的，可以从用户的数据展示请求中获取数据滚动距离。预设的缓冲区高度，可以是由缓冲区中预设的可以容纳的数据选项(数据选项，例如每个Index)的个数以及每个数据选项的高度(例如35px)决定的。例如，预设的缓冲区高度＝缓冲区中数据选项的个数*每个数据选项的高度。屏幕滚动开始位置，即从全量数据中获取的待展示数据的上边缘位置。例如，可以由数据滚动距离和预设的缓冲区高度的差或差的绝对值来确定。示例的，屏幕滚动开始位置scrollStart＝数据滚动距离-缓冲区高度。或者scrollStart＝|数据滚动距离-缓冲区高度|。

步骤S103，根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置。

预设的下拉框中的数据是用户可以看到的。具体地，预设的下拉框高度可以为可视项数*每个数据选项的高度。屏幕滚动结束位置，即从全量数据中获取的待展示数据的下边缘位置。例如，可以由数据滚动距离、预设的缓冲区高度和预设的下拉框高度的和来确定。当然，当数据滚动距离为0时，也可以直接由预设的缓冲区高度和预设的下拉框高度的和来确定。示例的，屏幕滚动结束位置scrollEnd＝(数据滚动距离+预设的下拉框高度)+预设的缓冲区高度。当数据滚动距离为0时，scrollEnd＝预设的下拉框高度+预设的缓冲区高度。

步骤S104，根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定待展示数据在全量数据中的开始下标和结束下标。

执行主体可以根据屏幕滚动开始位置和预设的选项高度的比值来确定待展示数据在全量数据中的开始下标。示例的，屏幕滚动开始位置70px，预设的选项高度假设为35px，则待展示数据在全量数据中的开始下标为70px/35px＝2，也就是说，待展示数据是以Index(2)为起始数据。同理，执行主体可以根据屏幕滚动结束位置和预设的选项高度的比值来确定待展示数据在全量数据中的结束下标，在此不再赘述。

步骤S105，基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

具体地，将目标待展示数据展示于预设的下拉框中，包括：

计算目标待展示数据的高度值，进而在前端页面基于高度值(即选项Y轴值)排列目标待展示数据。

具体地，执行主体可以由小到大排列各高度值，进而根据排列的各高度值排列对应的目标待展示数据。

确定全量数据的数量，进而利用额外的元素包含目标待展示数据，其中，额外元素的高度由全量数据的数量和预设的选项高度确定。

具体地，从全量数据中取部分数据同时要计算并保存每个选项的Y轴值，其计算方法为：数据下标×选项高度。目的是部分数据在页面通过CSS里的translateY属性进行排列。为此部分数据还应该被额外的元素(如div)所包含(下面简称Wrap)，同时这个元素的高度需提前设定，例如，可以为：全量数据数量×预设的选项高度。可以理解的是：执行主体还可以利用该设定的额外元素包含目标待展示数据和缓冲区中的待展示数据，本申请实施例对额外元素所包含的待展示数据的区域不做具体限定。Wrap在页面当中的存在形式为只包裹部分数据，并设置了全量数据对应的元素排列时的实际高度，这个高度是根据传入的全量数据和选项高度初始化阶段进行了设置，除此之外下拉框的(最大)高度也进行了设置，并给overflow为auto的CSS属性和值。这样为模拟所有选项都挂载到页面时的滚动场景提供了前提条件。

本实施例通过接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。通过基于数据滚动距离、预设的缓冲区高度、预设的下拉框高度等首先确定出全量数据中的待展示数据，然后再计算得到待展示数据中的目标待展示数据，并在下拉框中进行展示。通过每次只处理全量数据中的部分数据并渲染到页面，可以提升页面渲染和交互速度，提升用户体验。

图2是根据本申请第二实施例的数据展示方法的主要流程示意图，如图2所示，数据展示方法包括：

步骤S201，接收数据展示请求，进而获取对应的全量数据。

本实施例中，数据展示方法的执行主体(例如，可以是服务器)可以通过有线连接或无线连接的方式，

步骤S202，确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置。

步骤S203，根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置。

步骤S204，根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标。

步骤S205，基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

步骤S201～步骤S205的原理与步骤S101～步骤S105的原理类似，此处不再赘述。

步骤S206，根据更新的数据滚动距离，确定更新的开始下标和更新的结束下标。

随着数据滚动距离的变化，执行主体可以确定与变化的数据滚动距离对应的待展示数据的开始下标和结束下标，并更新，进而得到更新的开始下标和更新的结束下标。示例的，当数据滚动距离由70px变为280px时，根据待展示数据在全量数据中的开始下标和结束下标的相关计算公式，计算出更新的开始下标(例如开始下标由0更新为2，其中，开始下标0对应数据滚动距离为70px时，开始下标2对应数滚动距离为280px时)；并计算出更新的结束下标(例如结束下标由15更新为21，其中，结束下标15对应数据滚动距离为70px时，结束下标21对应数滚动距离为280px时)。

步骤S207，根据更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标。

具体地，确定缓冲区中的数据对应的开始下标和结束下标，包括：

根据预设的选项高度和预设的缓冲区高度，确定缓冲区中的选项个数；基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

示例的，当缓冲区中的选项个数为6个，更新的开始下标为2，更新的结束下标为21时，确定缓冲区中的数据对象的开始下标为2，进而根据选项个数为6，则得到结束下标为7，具体可以是根据以2为第一个数据，2、3、4、5、6、7来得到第6个数据的下标为7。

具体地，缓冲区可以有一个也可以由多个，当缓冲区有多个时，首先执行主体可以选择位于下拉框上方的缓冲区，确定该缓冲区中的数据对象的开始下标和结束下标。

进一步地，执行主体可以基于选项个数、更新的开始下标和更新的结束下标，确定位于下拉框上方的缓冲区中的数据对象的开始下标和结束下标，包括：将更新的开始下标与更新的结束下标之间的数据按预设的顺序进行排序；从排序后得到的数据中依次选取与选项个数相等的数据，进而将依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的开始下标，将依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的结束下标。示例的，与缓冲区中的选项个数相等的排序后的下标可以为2、3、4、5、6、7，则将依次选取的下标2确定为缓冲区中的数据对象的开始下标，将依次选取的排序后的下标的最后一个下标7确定为缓冲区中的数据对象的结束下标。

执行主体也可以选择位于下拉框下方的缓冲区，确定该缓冲区中的数据对象的开始下标和结束下标。

具体地，基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标，包括：从排序后得到的数据中倒序依次选取与选项个数相等的数据，进而将倒序依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的开始下标。示例的，与缓冲区中的选项个数相等的排序后的下标可以为16、17、18、19、20、21。执行主体可以将倒序选取的第一个下标21确定为该缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的数据16确定为该缓冲区中的数据对象的开始下标。

步骤S208，根据更新的开始下标和更新的结束下标以及缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

执行护主体可以根据更新的开始下标(例如2)和更新的结束下标(例如21)以及缓冲区中的数据对应的开始下标(例如1)和结束下标(例如7)以及开始下标(16)和结束下标(例如21)，确定目标待展示数据对应的开始下标(例如8)和结束下标(例如15)，进而根据目标待展示数据对应的开始下标和结束下标获取对应的目标待展示数据，例如，Index(8)、Index(9)、Index(10)、Index(11)、Index(12)、Index(13)、Index(14)、Index(15)，进而更新之前的目标待展示数据，从而可以提升页面渲染和交互速度，提升用户体验。

图3是根据本申请第三实施例的数据展示方法的应用场景示意图。本申请实施例的数据展示方法，应用于前端大数据量之下无卡顿可检索下拉选择组件实现场景。如图3所示，服务器305接收数据展示请求301，进而获取对应的全量数据302(例如，可以包括Index(0)～Index(9999))。服务器305确定数据滚动距离303，进而基于数据滚动距离303和预设的缓冲区高度304，确定屏幕滚动开始位置a。服务器305根据数据滚动距离303、预设的缓冲区高度304和预设的下拉框高度307，确定屏幕滚动结束位置b。服务器305根据屏幕滚动开始位置a、屏幕滚动结束位置b和预设的选项高度c(例如35像素，即35px)，确定待展示数据306在全量数据302中的开始下标A和结束下标B。服务器305基于开始下标A和结束下标B，从全量数据302中获取待展示数据306(例如，可以包括Index(0)～Index(15)，即包括图3中的缓冲区和下拉框中的数据)，进而从待展示数据306中确定目标待展示数据309(包括从Index(2)～Index(9))，将目标待展示数据309展示于预设的下拉框中308，并更新数据滚动距离303。其中，选项Y轴值就是每个数据选项的高度，示例的，Index(2)的选项Y轴值为70px。Index(9)的选项Y轴值为315px。Index(15)的选项Y轴值为525px。px为像素。

本实施例中，当数据滚动距离为0px时，即startIndex＝0，endIndex＝14(不包含)。选项高度为35px，可视项数为8个。下标0到7的数据填满下拉框(根据传入的参数，下拉框的最大高度(max-height)会被提前设定)，下拉框的高度为280px。剩下的下标8到13数据会被存放到缓冲区。随着向下滚动获取的数据越来越多下拉框里的数据会移动到上缓冲区，以便当反方向滚动时及时把数据展示。

当数据滚动距离为70px时，即startIndex＝0，endIndex＝16(不包含)，下拉框上面的缓冲区放进了下标0和1数据，下标2到9数据则在下拉框中，最后下标10到15数据放进了下拉框下面的缓冲区。此时，用户只能看到下标2到9的数据选项，缓冲区里的虽然看不到但依然挂载在页面。此次滚动结束后部分数据中增加了两条新数据即下标14和15对应的选项数据。在后面滚动距离发生变化时持续关注一下相关变化。

当数据滚动距离为280px时，即startIndex＝2，endIndex＝22(不包含)。下拉框上面的缓冲区中已经把原有的下标0对应的选项数据移除了，下拉框上面的缓冲区中剩下下标2到7的选项数据，总高为210px(缓冲区200px)。事实上，下标2对应的选项数据不是全包含在缓冲区内，而是下标2对应的选项数据的一部分位于缓冲区，一部分上移出缓冲区，下标2对应的选项数据全部位于缓冲区。下标16对应的选项数据一部分位于缓冲区，一部分上移出缓冲区。下标21对应的选项数据全部位于缓冲区中。下拉框下面的缓冲区挂载着下标16到21的选项数据，原(滚动距离为70px时)下标10到15的选项数据变为可视选项并进入到下拉框，原下拉框里的选项数据进入到上缓冲区。

执行主体将检索之后的数据结果按照以上逻辑处理也可提高性能。

本申请通过接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。通过基于数据滚动距离、预设的缓冲区高度、预设的下拉框高度等首先确定出全量数据中的待展示数据，然后再计算得到待展示数据中的目标待展示数据，并在下拉框中进行展示。通过每次只处理全量数据中的部分数据并渲染到页面，可以提升页面渲染和交互速度，提升用户体验。

图4是根据本申请实施例的数据展示装置的主要单元的示意图。如图4所示，数据展示装置包括接收单元401、开始位置确定单元402、结束位置确定单元403、下标确定单元404和数据展示单元405。

接收单元401，被配置成接收数据展示请求，进而获取对应的全量数据；

开始位置确定单元402，被配置成确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；

结束位置确定单元403，被配置成根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；

下标确定单元404，被配置成根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；

数据展示单元405，被配置成基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

在一些实施例中，数据展示单元405进一步被配置成：根据更新的数据滚动距离，确定更新的开始下标和更新的结束下标；根据更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标；根据更新的开始下标和更新的结束下标以及缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

在一些实施例中，数据展示单元405进一步被配置成：根据预设的选项高度和预设的缓冲区高度，确定缓冲区中的选项个数；基于选项个数、更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

在一些实施例中，数据展示单元405进一步被配置成：将更新的开始下标与更新的结束下标之间的数据按预设的顺序进行排序；从排序后得到的数据中依次选取与选项个数相等的数据，进而将依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的开始下标，将依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的结束下标。

在一些实施例中，数据展示单元405进一步被配置成：从排序后得到的数据中倒序依次选取与选项个数相等的数据，进而将倒序依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的开始下标。

在一些实施例中，数据展示单元405进一步被配置成：计算目标待展示数据的高度值，进而在前端页面基于高度值排列目标待展示数据；确定全量数据的数量，进而利用额外的元素包含目标待展示数据，其中，额外元素的高度由全量数据的数量和预设的选项高度确定。

在一些实施例中，数据展示装置还包括图4中未示出的检索单元，被配置成：接收数据检索请求，进而确定对应的组件库；从对应的组件库中，确定数据检索请求对应的全量数据。

需要说明的是，在本申请数据展示方法和数据展示装置在具体实施内容上具有相应关系，故重复内容不再说明。

图5示出了可以应用本申请实施例的数据展示方法或数据展示装置的示例性系统架构500。

如图5所示，系统架构500可以包括终端设备501、502、503，网络504和服务器505。网络504用以在终端设备501、502、503和服务器505之间提供通信链路的介质。网络504可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备501、502、503通过网络504与服务器505交互，以接收或发送消息等。终端设备501、502、503上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备501、502、503可以是具有数据展示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器505可以是提供各种服务的服务器，例如对用户利用终端设备501、502、503所提交的数据展示请求提供支持的后台管理服务器(仅为示例)。后台管理服务器可以接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。通过基于数据滚动距离、预设的缓冲区高度、预设的下拉框高度等首先确定出全量数据中的待展示数据，然后再计算得到待展示数据中的目标待展示数据，并在下拉框中进行展示。通过每次只处理全量数据中的部分数据并渲染到页面，可以提升页面渲染和交互速度，提升用户体验。

需要说明的是，本申请实施例所提供的数据展示方法一般由服务器505执行，相应地，数据展示装置一般设置于服务器505中。

应该理解，图5中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图6，其示出了适于用来实现本申请实施例的终端设备的计算机系统600的结构示意图。图6示出的终端设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图6所示，计算机系统600包括中央处理单元(CPU)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM603中，还存储有计算机系统600操作所需的各种程序和数据。CPU601、ROM602以及RAM603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

以下部件连接至I/O接口605：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶征信授权查询处理器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

特别地，根据本申请公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被中央处理单元(CPU)601执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本申请所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括接收单元、开始位置确定单元、结束位置确定单元、下标确定单元和数据展示单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备接收数据展示请求，进而获取对应的全量数据；确定数据滚动距离，进而基于数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；根据数据滚动距离、预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；根据屏幕滚动开始位置、屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在全量数据中的开始下标和结束下标；基于开始下标和结束下标，从全量数据中获取待展示数据，进而从待展示数据中确定目标待展示数据，将目标待展示数据展示于预设的下拉框中，并更新数据滚动距离。

根据本申请实施例的技术方案，通过基于数据滚动距离、预设的缓冲区高度、预设的下拉框高度等首先确定出全量数据中的待展示数据，然后再计算得到待展示数据中的目标待展示数据，并在下拉框中进行展示。通过每次只处理全量数据中的部分数据并渲染到页面，可以提升页面渲染和交互速度，提升用户体验。

上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (12)

1.一种数据展示方法，其特征在于，包括：

接收数据展示请求，进而获取对应的全量数据；

确定数据滚动距离，进而基于所述数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；

根据所述数据滚动距离、所述预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；

根据所述屏幕滚动开始位置、所述屏幕滚动结束位置和预设的选项高度，确定待展示数据在所述全量数据中的开始下标和结束下标；

基于所述开始下标和所述结束下标，从所述全量数据中获取待展示数据，进而从所述待展示数据中确定目标待展示数据，将所述目标待展示数据展示于预设的下拉框中，并更新所述数据滚动距离。

2.根据权利要求1所述的方法，其特征在于，在所述更新所述数据滚动距离之后，所述方法还包括：

根据更新的所述数据滚动距离，确定更新的开始下标和更新的结束下标；

根据所述更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标；

根据所述更新的开始下标和更新的结束下标以及所述缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

3.根据权利要求2所述的方法，其特征在于，所述确定缓冲区中的数据对应的开始下标和结束下标，包括：

根据所述预设的选项高度和所述预设的缓冲区高度，确定缓冲区中的选项个数；

基于所述选项个数、所述更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

4.根据权利要求3所述的方法，其特征在于，所述基于所述选项个数、所述更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标，包括：

将所述更新的开始下标与所述更新的结束下标之间的数据按预设的顺序进行排序；

从排序后得到的数据中依次选取与所述选项个数相等的数据，进而将依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的开始下标，将依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的结束下标。

5.根据权利要求3所述的方法，其特征在于，所述基于所述选项个数、所述更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标，包括：

从排序后得到的数据中倒序依次选取与所述选项个数相等的数据，进而将倒序依次选取的第一个数据对应的下标确定为缓冲区中的数据对象的结束下标，将倒序依次选取的最后一个数据对应的下标确定为缓冲区中的数据对象的开始下标。

6.根据权利要求1所述的方法，其特征在于，所述将所述目标待展示数据展示于预设的下拉框中，包括：

计算所述目标待展示数据的高度值，进而在前端页面基于所述高度值排列所述目标待展示数据；

确定全量数据的数量，进而利用额外的元素包含所述目标待展示数据，其中，所述额外元素的高度由所述全量数据的数量和预设的选项高度确定。

7.根据权利要求1所述的方法，其特征在于，在所述接收数据展示请求之前，所述方法还包括：

接收数据检索请求，进而确定对应的组件库；

从所述对应的组件库中，确定所述数据检索请求对应的全量数据。

8.一种数据展示装置，其特征在于，包括：

接收单元，被配置成接收数据展示请求，进而获取对应的全量数据；

开始位置确定单元，被配置成确定数据滚动距离，进而基于所述数据滚动距离和预设的缓冲区高度，确定屏幕滚动开始位置；

结束位置确定单元，被配置成根据所述数据滚动距离、所述预设的缓冲区高度和预设的下拉框高度，确定屏幕滚动结束位置；

下标确定单元，被配置成根据所述屏幕滚动开始位置、所述屏幕滚动结束位置和预设的选项高度，确定目标待展示数据在所述全量数据中的开始下标和结束下标；

数据展示单元，被配置成基于所述开始下标和所述结束下标，从所述全量数据中获取待展示数据，进而从所述待展示数据中确定目标待展示数据，将所述目标待展示数据展示于预设的下拉框中，并更新所述数据滚动距离。

9.根据权利要求8所述的装置，其特征在于，所述数据展示单元进一步被配置成：

根据更新的所述数据滚动距离，确定更新的开始下标和更新的结束下标；

根据所述更新的开始下标、更新的结束下标、预设的选项高度和预设的缓冲区高度，确定缓冲区中的数据对应的开始下标和结束下标；

根据所述更新的开始下标和更新的结束下标以及所述缓冲区中的数据对应的开始下标和结束下标，更新目标待展示数据。

10.根据权利要求9所述的装置，其特征在于，所述数据展示单元进一步被配置成：

根据所述预设的选项高度和所述预设的缓冲区高度，确定缓冲区中的选项个数；

基于所述选项个数、所述更新的开始下标和更新的结束下标，确定缓冲区中的数据对象的开始下标和结束下标。

11.一种数据展示电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的方法。

12.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7中任一所述的方法。

Images