Data display method, device, electronic device and computer readable medium

Abstract

The present application discloses a data display method, device, electronic device and computer-readable medium, and relates to the field of computer technology. The method includes: receiving a data display request, and then obtaining the corresponding full data; determining the data scrolling distance, and then determining the screen scrolling start position based on the data scrolling distance and the preset buffer height; determining the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; determining the start subscript and end subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position and the preset option height; obtaining the data to be displayed from the full data based on the start subscript and the end subscript, and then determining the target data to be displayed from the data to be displayed, displaying the target data to be displayed in the preset drop-down box, and updating the data scrolling distance. Thereby improving the page rendering and interaction speed, and improving the user experience.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a data display method, device, electronic device and computer-readable medium. Background Art

[0002] Currently, when the number of options in the drop-down selection control of the user interface component library reaches a certain amount, when displaying based on user needs, page rendering and interaction will be stuck, resulting in a poor user experience.

[0003] In the process of implementing this application, the inventors found that there are at least the following problems in the prior art:

[0004] In the user interface component library, when faced with a large amount of option data, page rendering and interaction may become lags. Summary of the invention

[0005] In view of this, the embodiments of the present application provide a data display method, device, electronic device and computer-readable medium, which can solve the problem of page rendering and interaction jamming when facing a large amount of option data in the existing user interface component library.

[0006] To achieve the above object, according to one aspect of an embodiment of the present application, a data display method is provided, including:

[0007] Receive data display requests and obtain the corresponding full data;

[0008] Determine the data scrolling distance, and then determine the screen scrolling start position based on the data scrolling distance and a preset buffer height;

[0009] Determine the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height;

[0010] According to the screen scrolling start position, screen scrolling end position and preset option height, determine the start subscript and end subscript of the target data to be displayed in the full amount of data;

[0011] Based on the start subscript and the end subscript, the data to be displayed is obtained from the full amount of data, and then the target data to be displayed is determined from the data to be displayed, the target data to be displayed is displayed in a preset drop-down box, and the data scrolling distance is updated.

[0012] Optionally, after updating the data scrolling distance, the method further includes:

[0013] According to the updated data scrolling distance, determine the update start subscript and the update end subscript;

[0014] Determine the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height;

[0015] The target data to be displayed is updated according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

[0016] Optionally, determining a start subscript and an end subscript corresponding to the data in the buffer includes:

[0017] Determine the number of options in the buffer according to a preset option height and a preset buffer height;

[0018] Based on the number of options, the updated start index, and the updated end index, the start index and the end index of the data object in the buffer are determined.

[0019] Optionally, determining the start subscript and the end subscript of the data object in the buffer based on the number of options, the updated start subscript, and the updated end subscript includes:

[0020] Sort the data between the updated start subscript and the updated end subscript according to a preset order;

[0021] From the sorted data, data equal to the number of options is selected in sequence, and the subscript corresponding to the first data selected in sequence is determined as the starting subscript of the data object in the buffer, and the subscript corresponding to the last data selected in sequence is determined as the ending subscript of the data object in the buffer.

[0022] Optionally, determining the start subscript and the end subscript of the data object in the buffer based on the number of options, the updated start subscript, and the updated end subscript includes:

[0023] From the sorted data, data equal to the number of options is selected in reverse order, and the subscript corresponding to the first data selected in reverse order is determined as the end subscript of the data object in the buffer, and the subscript corresponding to the last data selected in reverse order is determined as the start subscript of the data object in the buffer.

[0024] Optionally, the target data to be displayed is displayed in a preset drop-down box, including:

[0025] Calculate the height value of the target data to be displayed, and then arrange the target data to be displayed on the front-end page based on the height value;

[0026] The amount of the full data is determined, and then the target data to be displayed is included using an additional element, wherein the height of the additional element is determined by the amount of the full data and a preset option height.

[0027] Optionally, before receiving the data display request, the method further includes:

[0028] Receive data retrieval requests and determine the corresponding component library;

[0029] Determine the full amount of data corresponding to the data retrieval request from the corresponding component library.

[0030] In addition, the present application also provides a data display device, including:

[0031] A receiving unit is configured to receive a data display request and obtain corresponding full data;

[0032] a start position determination unit, configured to determine a data scrolling distance, and then determine a screen scrolling start position based on the data scrolling distance and a preset buffer height;

[0033] The end position determination unit is configured to determine the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height;

[0034] The subscript determining unit is configured to determine the start subscript and the end subscript of the target data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and the preset option height;

[0035] The data display unit is configured to obtain the data to be displayed from the full amount of data based on the start subscript and the end subscript, further determine the target data to be displayed from the data to be displayed, display the target data to be displayed in a preset drop-down box, and update the data scrolling distance.

[0036] Optionally, the data presentation unit is further configured to:

[0037] According to the updated data scrolling distance, determine the update start subscript and the update end subscript;

[0038] Determine the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height;

[0039] The target data to be displayed is updated according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

[0040] Optionally, the data presentation unit is further configured to:

[0041] Determine the number of options in the buffer according to a preset option height and a preset buffer height;

[0042] Based on the number of options, the updated start index, and the updated end index, the start index and the end index of the data object in the buffer are determined.

[0043] Optionally, the data presentation unit is further configured to:

[0044] Sort the data between the updated start subscript and the updated end subscript according to a preset order;

[0045] From the sorted data, data equal to the number of options is selected in sequence, and the subscript corresponding to the first data selected in sequence is determined as the starting subscript of the data object in the buffer, and the subscript corresponding to the last data selected in sequence is determined as the ending subscript of the data object in the buffer.

[0046] Optionally, the data presentation unit is further configured to:

[0047] From the sorted data, data equal to the number of options is selected in reverse order, and the subscript corresponding to the first data selected in reverse order is determined as the end subscript of the data object in the buffer, and the subscript corresponding to the last data selected in reverse order is determined as the start subscript of the data object in the buffer.

[0048] Optionally, the data presentation unit is further configured to:

[0049] Calculate the height value of the target data to be displayed, and then arrange the target data to be displayed on the front-end page based on the height value;

[0050] The amount of the full data is determined, and then the target data to be displayed is included using an additional element, wherein the height of the additional element is determined by the amount of the full data and a preset option height.

[0051] Optionally, the data display device further includes a retrieval unit configured to:

[0052] Receive data retrieval requests and determine the corresponding component library;

[0053] Determine the full amount of data corresponding to the data retrieval request from the corresponding component library.

[0054] In addition, the present application also provides a data display electronic device, including: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by one or more processors, the one or more processors implement the data display method as described above.

[0055] In addition, the present application also provides a computer-readable medium on which a computer program is stored, and when the program is executed by a processor, the data display method as described above is implemented.

[0056] One embodiment of the above invention has the following advantages or beneficial effects: the present application receives a data display request, and then obtains the corresponding full data; determines the data scrolling distance, and then determines the screen scrolling start position based on the data scrolling distance and the preset buffer height; determines the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; determines the starting subscript and ending subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position and the preset option height; obtains the data to be displayed from the full data based on the starting subscript and the ending subscript, and then determines the target data to be displayed from the data to be displayed, displays the target data to be displayed in the preset drop-down box, and updates the data scrolling distance. The data to be displayed in the full data is first determined based on the data scrolling distance, the preset buffer height, the preset drop-down box height, etc., and then the target data to be displayed in the data to be displayed is calculated and displayed in the drop-down box. By processing only part of the data in the full data each time and rendering it to the page, the page rendering and interaction speed can be improved, and the user experience can be improved.

[0057] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with the specific implementation manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] The accompanying drawings are used to better understand the present application and do not constitute an improper limitation on the present application.

[0059] Figure 1 is a schematic diagram of the main process of the data display method according to the first embodiment of the present application;

[0060] Figure 2 is a schematic diagram of the main process of the data display method according to the second embodiment of the present application;

[0061] Figure 3 is a schematic diagram of an application scenario of the data display method according to the third embodiment of the present application;

[0062] Figure 4 is a schematic diagram of the main units of the data display device according to an embodiment of the present application;

[0063] Figure 5 is an exemplary system architecture diagram to which the embodiments of the present application can be applied;

[0064] Figure 6 It is a structural diagram of a computer system of a terminal device or server suitable for implementing an embodiment of the present application. DETAILED DESCRIPTION

[0065] The following is a description of exemplary embodiments of the present application in conjunction with the accompanying drawings, including various details of the embodiments of the present application to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present application. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted in the following description.

[0066] Figure 1 is a schematic diagram of the main process of the data display method according to the first embodiment of the present application, such as Figure 1 As shown, the data display method includes:

[0067] Step S101, receiving a data display request, and then obtaining the corresponding full data.

[0068] In this embodiment, the execution subject of the data display method (for example, a server) can receive a data display request through a wired connection or a wireless connection. The data display request refers to a request to display each option in the drop-down selection component.

[0069] Specifically, before receiving the data display request, the data display method also includes: receiving a data retrieval request, and then determining the corresponding component library; determining the full amount of data corresponding to the data retrieval request from the corresponding component library. The execution subject can receive the data retrieval request, and determine the component library (for example, A component library) corresponding to the component library identifier (for example, A) based on the component library identifier (for example, A) carried in the request. The data retrieval request may include a search keyword, and the execution subject can retrieve the corresponding full amount of data from the data based on the search keyword. The full amount of data can be all relevant data corresponding to the search keyword.

[0070] Step S102, determining the data scrolling distance, and then determining the screen scrolling start position based on the data scrolling distance and a preset buffer height.

[0071] Specifically, the data scrolling distance can be set according to the needs of the user. For example, the data scrolling distance can be obtained from the user's data display request. The preset buffer height can be determined by the number of data options (data options, such as each Index) that can be accommodated in the buffer and the height of each data option (for example, 35px). For example, the preset buffer height = the number of data options in the buffer * the height of each data option. The screen scrolling start position is the upper edge position of the data to be displayed obtained from the full amount of data. For example, it can be determined by the difference between the data scrolling distance and the preset buffer height or the absolute value of the difference. For example, the screen scrolling start position scrollStart = data scrolling distance - buffer height. Or scrollStart = |data scrolling distance - buffer height|.

[0072] Step S103, determining the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height.

[0073] The data in the preset drop-down box is visible to the user. Specifically, the preset drop-down box height can be the number of visible items * the height of each data option. The end position of the screen scrolling, that is, the bottom edge position of the data to be displayed obtained from the full amount of data. For example, it can be determined by the sum of the data scrolling distance, the preset buffer height and the preset drop-down box height. Of course, when the data scrolling distance is 0, it can also be directly determined by the sum of the preset buffer height and the preset drop-down box height. For example, the screen scrolling end position scrollEnd = (data scrolling distance + preset drop-down box height) + preset buffer height. When the data scrolling distance is 0, scrollEnd = preset drop-down box height + preset buffer height.

[0074] Step S104, determining the start subscript and the end subscript of the data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and the preset option height.

[0075] The execution entity can determine the starting subscript of the data to be displayed in the full data according to the ratio of the screen scrolling start position and the preset option height. For example, the screen scrolling start position is 70px, and the preset option height is assumed to be 35px, then the starting subscript of the data to be displayed in the full data is 70px / 35px=2, that is, the data to be displayed starts with Index(2). Similarly, the execution entity can determine the ending subscript of the data to be displayed in the full data according to the ratio of the screen scrolling end position and the preset option height, which will not be repeated here.

[0076] Step S105 , based on the start subscript and the end subscript, the data to be displayed is obtained from the full amount of data, and then the target data to be displayed is determined from the data to be displayed, the target data to be displayed is displayed in a preset drop-down box, and the data scrolling distance is updated.

[0077] Specifically, the target data to be displayed is displayed in a preset drop-down box, including:

[0078] Calculate the height value of the target data to be displayed, and then arrange the target data to be displayed based on the height value (ie, the option Y-axis value) on the front-end page.

[0079] Specifically, the execution entity may arrange the height values ​​from small to large, and then arrange the corresponding target data to be displayed according to the arranged height values.

[0080] The amount of the full data is determined, and then the target data to be displayed is included using an additional element, wherein the height of the additional element is determined by the amount of the full data and a preset option height.

[0081] Specifically, partial data is taken from the full data, and the Y-axis value of each option is calculated and saved at the same time, and the calculation method is: data subscript × option height. The purpose is to arrange partial data on the page through the translateY attribute in CSS. For this reason, partial data should also be included in an additional element (such as div) (hereinafter referred to as Wrap), and the height of this element needs to be set in advance, for example, it can be: the number of full data × preset option height. It can be understood that: the execution subject can also use the set additional elements to include the target data to be displayed and the data to be displayed in the buffer. The embodiment of the present application does not specifically limit the area of ​​the data to be displayed contained in the additional elements. Wrap exists in the page in the form of wrapping only part of the data, and setting the actual height of the elements corresponding to the full data when arranged. This height is set according to the full data and option height initialization stage. In addition, the (maximum) height of the drop-down box is also set, and the overflow is given a CSS attribute and value of auto. This provides a prerequisite for simulating the scrolling scene when all options are mounted on the page.

[0082] This embodiment receives a data display request and then obtains the corresponding full data; determines the data scrolling distance, and then determines the screen scrolling start position based on the data scrolling distance and the preset buffer height; determines the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; determines the starting subscript and ending subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position and the preset option height; obtains the data to be displayed from the full data based on the starting subscript and the ending subscript, and then determines the target data to be displayed from the data to be displayed, displays the target data to be displayed in the preset drop-down box, and updates the data scrolling distance. The data to be displayed in the full data is first determined based on the data scrolling distance, the preset buffer height, the preset drop-down box height, etc., and then the target data to be displayed in the data to be displayed is calculated and displayed in the drop-down box. By processing only part of the data in the full data each time and rendering it to the page, the page rendering and interaction speed can be improved, and the user experience can be improved.

[0083] Figure 2 is a schematic diagram of the main flow of the data display method according to the second embodiment of the present application, such as Figure 2 As shown, the data display method includes:

[0084] Step S201, receiving a data display request, and then obtaining the corresponding full data.

[0085] In this embodiment, the execution subject of the data display method (for example, a server) can be connected by wire or wirelessly.

[0086] Step S202, determining the data scrolling distance, and then determining the screen scrolling start position based on the data scrolling distance and a preset buffer height.

[0087] Step S203, determining the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height.

[0088] Step S204, determining the start subscript and the end subscript of the target data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and the preset option height.

[0089] Step S205 , based on the start subscript and the end subscript, the data to be displayed is obtained from the full amount of data, and then the target data to be displayed is determined from the data to be displayed, the target data to be displayed is displayed in a preset drop-down box, and the data scrolling distance is updated.

[0090] The principles of steps S201 to S205 are similar to those of steps S101 to S105 and will not be described in detail here.

[0091] Step S206, determining the start index and the end index of the update according to the updated data scrolling distance.

[0092] As the data scrolling distance changes, the execution entity can determine the start subscript and end subscript of the data to be displayed corresponding to the changed data scrolling distance, and update them, thereby obtaining the updated start subscript and updated end subscript. For example, when the data scrolling distance changes from 70px to 280px, according to the relevant calculation formulas for the start subscript and end subscript of the data to be displayed in the full data, calculate the updated start subscript (for example, the start subscript is updated from 0 to 2, where the start subscript 0 corresponds to the data scrolling distance of 70px, and the start subscript 2 corresponds to the digital scrolling distance of 280px); and calculate the updated end subscript (for example, the end subscript is updated from 15 to 21, where the end subscript 15 corresponds to the data scrolling distance of 70px, and the end subscript 21 corresponds to the digital scrolling distance of 280px).

[0093] Step S207, determining the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height.

[0094] Specifically, determining the start subscript and the end subscript corresponding to the data in the buffer includes:

[0095] The number of options in the buffer is determined according to a preset option height and a preset buffer height; the start subscript and the end subscript of the data object in the buffer are determined based on the number of options, the updated start subscript and the updated end subscript.

[0096] For example, when the number of options in the buffer is 6, the start subscript of the update is 2, and the end subscript of the update is 21, the start subscript of the data object in the buffer is determined to be 2, and then according to the number of options is 6, the end subscript is 7. Specifically, the subscript of the sixth data can be 7 based on 2 as the first data, 2, 3, 4, 5, 6, 7.

[0097] Specifically, there may be one or more buffers. When there are multiple buffers, the execution subject may first select the buffer located above the drop-down box to determine the start subscript and the end subscript of the data object in the buffer.

[0098] Furthermore, the execution subject can determine the start subscript and end subscript of the data object in the buffer above the drop-down box based on the number of options, the updated start subscript, and the updated end subscript, including: sorting the data between the updated start subscript and the updated end subscript in a preset order; sequentially selecting data equal to the number of options from the sorted data, and then determining the subscript corresponding to the first data selected in sequence as the start subscript of the data object in the buffer, and determining the subscript corresponding to the last data selected in sequence as the end subscript of the data object in the buffer. For example, the sorted subscripts equal to the number of options in the buffer can be 2, 3, 4, 5, 6, 7, then the sequentially selected subscript 2 is determined as the start subscript of the data object in the buffer, and the last subscript 7 of the sequentially selected sorted subscripts is determined as the end subscript of the data object in the buffer.

[0099] The execution subject can also select a buffer located below the drop-down box to determine the start subscript and end subscript of the data object in the buffer.

[0100] Specifically, based on the number of options, the updated start subscript and the updated end subscript, the start subscript and the end subscript of the data object in the buffer are determined, including: selecting data equal to the number of options from the sorted data in reverse order, and then determining the subscript corresponding to the first data selected in reverse order as the end subscript of the data object in the buffer, and determining the subscript corresponding to the last data selected in reverse order as the start subscript of the data object in the buffer. For example, the sorted subscripts equal to the number of options in the buffer may be 16, 17, 18, 19, 20, 21. The execution subject may determine the first subscript 21 selected in reverse order as the end subscript of the data object in the buffer, and determine the data 16 corresponding to the last data selected in reverse order as the start subscript of the data object in the buffer.

[0101] Step S208: Update the target data to be displayed according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

[0102] The execution protection body can determine the starting subscript (e.g., 8) and ending subscript (e.g., 15) corresponding to the target data to be displayed according to the updated starting subscript (e.g., 2) and the updated ending subscript (e.g., 21) and the starting subscript (e.g., 1) and ending subscript (e.g., 7) corresponding to the data in the buffer, as well as the starting subscript (16) and ending subscript (e.g., 21), and then obtain the corresponding target data to be displayed according to the starting subscript and ending subscript corresponding to the target data to be displayed, for example, Index (8), Index (9), Index (10), Index (11), Index (12), Index (13), Index (14), Index (15), and then update the previous target data to be displayed, thereby improving page rendering and interaction speed and improving user experience.

[0103] Figure 3 Schematic diagram of the application scenario of the data display method according to the third embodiment of the present application. The data display method of the embodiment of the present application is applied to the scene where the front-end large amount of data can be searched without lag and the drop-down selection component can be realized. Figure 3 As shown, the server 305 receives a data display request 301, and then obtains the corresponding full data 302 (for example, it may include Index(0) to Index(9999)). The server 305 determines the data scrolling distance 303, and then determines the screen scrolling start position a based on the data scrolling distance 303 and the preset buffer height 304. The server 305 determines the screen scrolling end position b according to the data scrolling distance 303, the preset buffer height 304 and the preset drop-down box height 307. The server 305 determines the starting subscript A and the ending subscript B of the data to be displayed 306 in the full data 302 according to the screen scrolling start position a, the screen scrolling end position b and the preset option height c (for example, 35 pixels, i.e. 35px). Based on the starting subscript A and the ending subscript B, the server 305 obtains the data to be displayed 306 from the full data 302 (for example, it may include Index(0) to Index(15), i.e. including Figure 3 The data in the buffer and the drop-down box in the display buffer are then used to determine the target data to be displayed 309 (including from Index(2) to Index(9)) from the data to be displayed 306, display the target data to be displayed 309 in the preset drop-down box 308, and update the data scrolling distance 303. The option Y-axis value is the height of each data option. For example, the option Y-axis value of Index(2) is 70px. The option Y-axis value of Index(9) is 315px. The option Y-axis value of Index(15) is 525px. px is pixel.

[0104] In this embodiment, when the data scroll distance is 0px, that is, startIndex = 0, endIndex = 14 (not included). The option height is 35px, and the number of visible items is 8. The data from subscripts 0 to 7 fill the drop-down box (according to the parameters passed in, the maximum height (max-height) of the drop-down box will be set in advance), and the height of the drop-down box is 280px. The remaining data from subscripts 8 to 13 will be stored in the buffer. As more and more data is obtained by scrolling down, the data in the drop-down box will be moved to the upper buffer so that the data can be displayed in time when scrolling in the opposite direction.

[0105] When the data scroll distance is 70px, that is, startIndex=0, endIndex=16 (not included), the buffer above the drop-down box puts the data of subscripts 0 and 1, the data of subscripts 2 to 9 is in the drop-down box, and finally the data of subscripts 10 to 15 is put in the buffer below the drop-down box. At this time, the user can only see the data options of subscripts 2 to 9. Although the data in the buffer is not visible, it is still mounted on the page. After this scrolling, two new data are added to some of the data, namely the option data corresponding to subscripts 14 and 15. Keep an eye on the relevant changes when the scrolling distance changes later.

[0106] When the data scroll distance is 280px, that is, startIndex = 2, endIndex = 22 (not included). The option data corresponding to the original subscript 0 has been removed from the buffer above the drop-down box, and the option data of subscripts 2 to 7 are left in the buffer above the drop-down box, with a total height of 210px (buffer 200px). In fact, the option data corresponding to subscript 2 is not all contained in the buffer, but part of the option data corresponding to subscript 2 is located in the buffer, part of it is moved out of the buffer, and all the option data corresponding to subscript 2 is located in the buffer. Part of the option data corresponding to subscript 16 is located in the buffer, and part of it is moved out of the buffer. All the option data corresponding to subscript 21 is located in the buffer. The buffer below the drop-down box is mounted with option data of subscripts 16 to 21, and the original (when the scroll distance is 70px) option data of subscripts 10 to 15 becomes visible and enters the drop-down box, and the option data in the original drop-down box enters the upper buffer.

[0107] The execution subject can also improve performance by processing the retrieved data results according to the above logic.

[0108] The present application receives a data display request, and then obtains the corresponding full data; determines the data scrolling distance, and then determines the screen scrolling start position based on the data scrolling distance and the preset buffer height; determines the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; determines the starting subscript and ending subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position and the preset option height; obtains the data to be displayed from the full data based on the starting subscript and the ending subscript, and then determines the target data to be displayed from the data to be displayed, displays the target data to be displayed in the preset drop-down box, and updates the data scrolling distance. The data to be displayed in the full data is first determined based on the data scrolling distance, the preset buffer height, the preset drop-down box height, etc., and then the target data to be displayed in the data to be displayed is calculated and displayed in the drop-down box. By processing only part of the data in the full data each time and rendering it to the page, the page rendering and interaction speed can be improved, and the user experience can be improved.

[0109] Figure 4 Schematic diagram of the main units of the data display device according to the embodiment of the present application. Figure 4 As shown, the data display device includes a receiving unit 401, a start position determining unit 402, an end position determining unit 403, a subscript determining unit 404 and a data display unit 405.

[0110] The receiving unit 401 is configured to receive a data display request and obtain corresponding full data;

[0111] The starting position determining unit 402 is configured to determine the data scrolling distance, and then determine the screen scrolling starting position based on the data scrolling distance and a preset buffer height;

[0112] The end position determination unit 403 is configured to determine the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height;

[0113] The subscript determining unit 404 is configured to determine the start subscript and the end subscript of the target data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and the preset option height;

[0114] The data display unit 405 is configured to obtain the data to be displayed from the full amount of data based on the start subscript and the end subscript, further determine the target data to be displayed from the data to be displayed, display the target data to be displayed in a preset drop-down box, and update the data scrolling distance.

[0115] In some embodiments, the data display unit 405 is further configured to: determine the updated start subscript and the updated end subscript according to the updated data scrolling distance; determine the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height; update the target data to be displayed according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

[0116] In some embodiments, the data display unit 405 is further configured to: determine the number of options in the buffer according to a preset option height and a preset buffer height; determine the start subscript and end subscript of the data object in the buffer based on the number of options, the updated start subscript and the updated end subscript.

[0117] In some embodiments, the data display unit 405 is further configured to: sort the data between the updated start subscript and the updated end subscript in a preset order; select data equal to the number of options from the sorted data in sequence, and then determine the subscript corresponding to the first data selected in sequence as the start subscript of the data object in the buffer, and determine the subscript corresponding to the last data selected in sequence as the end subscript of the data object in the buffer.

[0118] In some embodiments, the data display unit 405 is further configured to: select data equal to the number of options from the sorted data in reverse order, and then determine the subscript corresponding to the first data selected in reverse order as the end subscript of the data object in the buffer, and determine the subscript corresponding to the last data selected in reverse order as the start subscript of the data object in the buffer.

[0119] In some embodiments, the data display unit 405 is further configured to: calculate the height value of the target data to be displayed, and then arrange the target data to be displayed based on the height value on the front-end page; determine the amount of full data, and then use additional elements to include the target data to be displayed, wherein the height of the additional elements is determined by the amount of full data and the preset option height.

[0120] In some embodiments, the data display device further includes Figure 4 The retrieval unit not shown in the figure is configured to: receive a data retrieval request, and then determine the corresponding component library; and determine the full amount of data corresponding to the data retrieval request from the corresponding component library.

[0121] It should be noted that the data display method and the data display device in the present application have a corresponding relationship in terms of specific implementation content, so the repeated content will not be explained again.

[0122] Figure 5An exemplary system architecture 500 is shown to which the data presentation method or data presentation device according to the embodiment of the present application can be applied.

[0123] like Figure 5 As shown, system architecture 500 may include terminal devices 501, 502, 503, a network 504 and a server 505. Network 504 is used to provide a medium for communication links between terminal devices 501, 502, 503 and server 505. Network 504 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0124] Users can use terminal devices 501, 502, 503 to interact with server 505 through network 504 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 501, 502, 503, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0125] The terminal devices 501 , 502 , and 503 may be various electronic devices having a data display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.

[0126] The server 505 may be a server that provides various services, such as a background management server that provides support for data display requests submitted by users using terminal devices 501, 502, and 503 (only as an example). The background management server may receive a data display request and obtain the corresponding full data; determine the data scrolling distance, and then determine the screen scrolling start position based on the data scrolling distance and the preset buffer height; determine the screen scrolling end position according to the data scrolling distance, the preset buffer height, and the preset drop-down box height; determine the start subscript and end subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position, and the preset option height; obtain the data to be displayed from the full data based on the start subscript and the end subscript, and then determine the target data to be displayed from the data to be displayed, display the target data to be displayed in the preset drop-down box, and update the data scrolling distance. The data to be displayed in the full data is first determined based on the data scrolling distance, the preset buffer height, the preset drop-down box height, etc., and then the target data to be displayed in the data to be displayed is calculated and displayed in the drop-down box. By processing only part of the full data each time and rendering it to the page, the page rendering and interaction speed can be improved, thereby improving the user experience.

[0127] It should be noted that the data display method provided in the embodiment of the present application is generally executed by the server 505 , and accordingly, the data display device is generally set in the server 505 .

[0128] It should be understood that Figure 5 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to the implementation requirements.

[0129] Reference below Figure 6 , which shows a schematic diagram of the structure of a computer system 600 of a terminal device suitable for implementing an embodiment of the present application. Figure 6 The terminal device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0130] like Figure 6 As shown, the computer system 600 includes a central processing unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage part 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the computer system 600 are also stored. The CPU 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0131] The following components are connected to the I / O interface 605: an input section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc.; and a communication section 609 including a network interface card such as a LAN card, a modem, etc. The communication section 609 performs communication processing via a network such as the Internet. A drive 610 is also connected to the I / O interface 605 as needed. A removable medium 611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 610 as needed, so that a computer program read therefrom is installed into the storage section 608 as needed.

[0132] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 609, and / or installed from the removable medium 611. When the computer program is executed by the central processing unit (CPU) 601, the above-mentioned functions defined in the system of the present application are executed.

[0133] It should be noted that the computer-readable medium shown in the present application may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. Computer-readable storage media may include, for example, but are not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present application, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present application, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0134] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the above-mentioned module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0135] The units involved in the embodiments described in the present application may be implemented by software or hardware. The units described may also be set in a processor, for example, it may be described as: a processor includes a receiving unit, a start position determination unit, an end position determination unit, a subscript determination unit, and a data display unit. The names of these units do not, in some cases, constitute limitations on the units themselves.

[0136] As another aspect, the present application also provides a computer-readable medium, which may be included in the device described in the above embodiment; or it may exist independently and not be assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by a device, the device receives a data display request and obtains the corresponding full data; determines the data scrolling distance, and then determines the screen scrolling start position based on the data scrolling distance and the preset buffer height; determines the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; determines the start subscript and end subscript of the target data to be displayed in the full data according to the screen scrolling start position, the screen scrolling end position and the preset option height; obtains the data to be displayed from the full data based on the start subscript and the end subscript, and then determines the target data to be displayed from the data to be displayed, displays the target data to be displayed in the preset drop-down box, and updates the data scrolling distance.

[0137] According to the technical solution of the embodiment of the present application, the data to be displayed in the full amount of data is first determined based on the data scrolling distance, the preset buffer height, the preset drop-down box height, etc., and then the target data to be displayed in the data to be displayed is calculated and displayed in the drop-down box. By processing only part of the data in the full amount of data each time and rendering it to the page, the page rendering and interaction speed can be improved, and the user experience can be improved.

[0138] The above specific implementations do not constitute a limitation on the protection scope of this application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of this application should be included in the protection scope of this application.

Claims

1. A data display method, characterized in that: include: Receive a data display request, and then obtain corresponding full data; the data display request includes a search keyword, and the full data is all relevant data corresponding to the search keyword; Determine a data scrolling distance, and then determine a screen scrolling start position based on the data scrolling distance and a preset buffer height; the data scrolling distance is a scrolling distance of the full amount of data, and the preset buffer height is determined by the number of data options that can be accommodated in the buffer and the height of each data option; Determining the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; Determine the start subscript and the end subscript of the data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and a preset option height; Based on the start subscript and the end subscript, the data to be displayed is obtained from the full amount of data, and then the target data to be displayed is determined from the data to be displayed, the target data to be displayed is displayed in a preset drop-down box, and the data scrolling distance is updated.

2. The method according to claim 1, characterized in that After updating the data scrolling distance, the method further includes: Determine the start subscript and the end subscript of the update according to the scrolling distance of the updated data; Determine the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height; The target data to be displayed is updated according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

3. The method according to claim 2, characterized in that The step of determining the start subscript and the end subscript corresponding to the data in the buffer includes: Determining the number of options in the buffer according to the preset option height and the preset buffer height; Based on the number of options, the updated start index and the updated end index, the start index and the end index of the data object in the buffer are determined.

4. The method according to claim 3, characterized in that The determining the start subscript and the end subscript of the data object in the buffer based on the number of options, the updated start subscript and the updated end subscript includes: Sorting the data between the updated start subscript and the updated end subscript according to a preset order; From the sorted data, data equal to the number of options is selected in sequence, and the subscript corresponding to the first data selected in sequence is determined as the starting subscript of the data object in the buffer, and the subscript corresponding to the last data selected in sequence is determined as the ending subscript of the data object in the buffer.

5. The method according to claim 3, characterized in that: The determining the start subscript and the end subscript of the data object in the buffer based on the number of options, the updated start subscript and the updated end subscript includes: From the sorted data, data equal to the number of options is selected in reverse order, and the subscript corresponding to the first data selected in reverse order is determined as the end subscript of the data object in the buffer, and the subscript corresponding to the last data selected in reverse order is determined as the start subscript of the data object in the buffer.

6. The method according to claim 1, characterized in that The step of displaying the target data to be displayed in a preset drop-down box includes: Calculating the height value of the target data to be displayed, and then arranging the target data to be displayed on the front-end page based on the height value; The amount of the full data is determined, and then the target data to be displayed is included using an additional element, wherein the height of the additional element is determined by the amount of the full data and a preset option height.

7. The method according to claim 1, characterized in that Before receiving the data display request, the method further includes: Receive data retrieval requests and determine the corresponding component library; From the corresponding component library, determine the full amount of data corresponding to the data retrieval request.

8. A data display device, characterized in that: include: A receiving unit is configured to receive a data display request and obtain corresponding full data; the data display request includes a search keyword, and the full data is all relevant data corresponding to the search keyword; a start position determination unit, configured to determine a data scrolling distance, and further determine a screen scrolling start position based on the data scrolling distance and a preset buffer height; the data scrolling distance is a scrolling distance of the full amount of data, and the preset buffer height is determined by the number of data options that can be accommodated in the buffer and the height of each data option; an end position determination unit, configured to determine the screen scrolling end position according to the data scrolling distance, the preset buffer height and the preset drop-down box height; a subscript determining unit configured to determine a start subscript and an end subscript of the target data to be displayed in the full amount of data according to the screen scrolling start position, the screen scrolling end position and a preset option height; The data display unit is configured to obtain the data to be displayed from the full amount of data based on the start subscript and the end subscript, further determine the target data to be displayed from the data to be displayed, display the target data to be displayed in a preset drop-down box, and update the data scrolling distance.

9. The device according to claim 8, characterized in that The data presentation unit is further configured to: Determine the start subscript and the end subscript of the update according to the scrolling distance of the updated data; Determine the start subscript and the end subscript corresponding to the data in the buffer according to the updated start subscript, the updated end subscript, the preset option height and the preset buffer height; The target data to be displayed is updated according to the updated start subscript and the updated end subscript and the start subscript and the end subscript corresponding to the data in the buffer.

10. The device according to claim 9, characterized in that The data presentation unit is further configured to: Determining the number of options in the buffer according to the preset option height and the preset buffer height; Based on the number of options, the updated start index and the updated end index, the start index and the end index of the data object in the buffer are determined.

11. An electronic device for displaying data, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.

12. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images