Data display method, device and equipment

Abstract

The present disclosure relates to a method, device and equipment for displaying data. The method determines index information of a target data block based on a distance that a sliding object has slid over on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided. The method determines a rendering range based on the index information of the target data block and the number of data included in each data block. The data blocks within the rendering range are rendered and displayed, and blank invisible marking elements are used as rendering results for data blocks outside the rendering range. It can be seen that only data within a certain range is rendered, and other data use blank elements to fill the display page, thereby reducing the amount of data rendered and displayed.

Description

Technical Field

[0001] The present disclosure relates to the field of data processing, and in particular to a method, device and equipment for displaying data. Background Art

[0002] In the era of big data, the amount of data displayed on the front-end page is getting bigger and bigger, which will bring huge challenges to page rendering. Specifically, the large amount of HTML nodes formed by rendering large amounts of data on the page will cause page lag or even cause the browser to crash.

[0003] Currently, data lazy loading technology is used to solve the above problems. In related technologies, a portion of new data is loaded each time to reduce the amount of data to be rendered. However, the data is accumulated during the lazy loading process, and there will still be a lot of data in the end, which will still cause page freezes or even crashes. Summary of the invention

[0004] The present disclosure provides a data display method, device and apparatus to at least solve the problem of excessive amount of data being rendered and displayed in the related art. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of an embodiment of the present disclosure, there is provided a method for displaying data, comprising:

[0006] Determine index information of a target data block according to the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block into which the full amount of data is divided; the target data block is a data block currently controlled by the sliding object and located in the display window, and the index information indicates the sequence of the data block in all the data blocks, and the sequence is determined according to the order of the data block in the full amount of data;

[0007] Determining a rendering range according to the index information of the target data block and the number of data items included in each of the data blocks;

[0008] The data blocks within the rendering range are rendered and displayed, and blank invisible marking elements are used as rendering results of the data blocks outside the rendering range.

[0009] Optionally, determining the rendering range according to the index information of the target data block and the number of data items included in each of the data blocks includes:

[0010] Determining a valid range according to the index information of the target data block and the number of data items included in each of the data blocks;

[0011] The data of the preset length adjacent to the effective range is used as a buffer range; wherein the sum of the display length of the preset display length and the display length of the effective range is greater than the display length of the display window;

[0012] The effective range and the buffer range are used as the rendering range.

[0013] Optionally, use a blank invisible marker element as the rendering result of the data block outside the rendering range, including:

[0014] Determine the padding length before the rendering range according to the index information of the target data block, the number of data included in each of the data blocks, and the display length of each data;

[0015] Determine the filling length after the rendering range according to the display length of the full amount of data, the display length of each of the data blocks, the display length of the buffer range, and the filling height of the data before the rendering range;

[0016] Use the blank invisible mark element with the padding length before the rendering range as the rendering result of the data before the rendering range;

[0017] The blank invisible mark element having the padding length after the rendering range is used as the rendering result of the data after the rendering range.

[0018] Optionally, determining the index information of the target data block according to the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block into which the full amount of data is divided includes:

[0019] When the number of data items included in the full amount of data is greater than the sum of the number of data items included in each of the data blocks, the index information of the target data block is determined based on the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block formed by dividing the full amount of data.

[0020] Optionally, the method for determining the distance that the sliding object has slid over the displayed length of the full amount of data includes:

[0021] After the full amount of data is updated, obtaining a position of the sliding object, the position being a pre-configured position to which the sliding object moves in response to the update of the full amount of data;

[0022] The distance that the sliding object has slid over the display length of the full amount of data is determined according to the position.

[0023] Optionally, before determining the index information of the target data block according to the distance that the sliding object has slid over on the display length of the full amount of data and the display lengths of the respective data blocks into which the full amount of data is divided, the method further includes:

[0024] Get the ID of each scroll container;

[0025] According to the identifiers of the scroll containers, the scroll events on the scroll containers are monitored, and the scroll container where the scroll event occurs is used as the target scroll container;

[0026] The step of determining the index information of the target data block according to the distance that the sliding object has slid over on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided includes:

[0027] The index information of the target data block is determined according to the distance that the sliding object in the target scroll container has slid over the display length of the full data in the target scroll container and the display length of each data block into which the full data is divided.

[0028] Optionally, the using a blank invisible marking element as a rendering result of the data block outside the rendering range includes:

[0029] The display position of the data block outside the rendering range is filled with a blank invisible marker element of the target scroll container.

[0030] According to a second aspect of an embodiment of the present disclosure, there is provided a data display device, including:

[0031] A first determining unit is configured to determine index information of a target data block according to a distance that the sliding object has slid over on the display length of the full amount of data and the display lengths of the respective data blocks into which the full amount of data is divided; the target data block is a data block currently controlled by the sliding object and located in the display window, and the index information indicates a sequence of the data block in all the data blocks, and the sequence is determined according to the order of the data block in the full amount of data;

[0032] A second determining unit is configured to determine a rendering range according to the index information of the target data block and the number of data included in each of the data blocks;

[0033] The rendering unit is configured to render and display the data blocks within the rendering range, and use a blank invisible marking element as a rendering result of the data blocks outside the rendering range.

[0034] Optionally, the second determining unit is configured to determine the rendering range according to the index information of the target data block and the number of data included in each of the data blocks, including: the second determining unit is specifically configured to:

[0035] Determining a valid range according to the index information of the target data block and the number of data items included in each of the data blocks;

[0036] The data of the preset length adjacent to the effective range is used as a buffer range; wherein the sum of the display length of the preset display length and the display length of the effective range is greater than the display length of the display window;

[0037] The effective range and the buffer range are used as the rendering range.

[0038] Optionally, the rendering unit is configured to use a blank invisible marking element as a rendering result of a data block outside a rendering range, including: the rendering unit is specifically configured to:

[0039] Determine the padding length before the rendering range according to the index information of the target data block, the number of data included in each of the data blocks, and the display length of each data;

[0040] Determine the filling length after the rendering range according to the display length of the full amount of data, the display length of each of the data blocks, the display length of the buffer range, and the filling height of the data before the rendering range;

[0041] Use the blank invisible mark element with the padding length before the rendering range as the rendering result of the data before the rendering range;

[0042] The blank invisible mark element having the padding length after the rendering range is used as the rendering result of the data after the rendering range.

[0043] Optionally, the first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to:

[0044] When the number of data items included in the full amount of data is greater than the sum of the number of data items included in each of the data blocks, the index information of the target data block is determined based on the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block formed by dividing the full amount of data.

[0045] Optionally, the first determining unit is further configured to:

[0046] After the full amount of data is updated, obtaining a position of the sliding object, the position being a pre-configured position to which the sliding object moves in response to the update of the full amount of data;

[0047] The distance that the sliding object has slid over the display length of the full amount of data is determined according to the position.

[0048] Optionally, it further includes: a container determination unit;

[0049] The container determination unit is configured to obtain the identifiers of each scroll container before determining the index information of the target data block based on the distance that the sliding object has slid on the display length of the full data and the display lengths of each data block formed by dividing the full data; monitor the scroll events on each scroll container based on the identifiers of each scroll container, and use the scroll container where the scroll event occurs as the target scroll container;

[0050] The first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to:

[0051] The index information of the target data block is determined according to the distance that the sliding object in the target scroll container has slid over the display length of the full data in the target scroll container and the display length of each data block into which the full data is divided.

[0052] Optionally, the rendering unit is configured to use a blank invisible marking element as a rendering result of the data block outside the rendering range, including: the rendering unit is specifically configured to:

[0053] The display position of the data block outside the rendering range is filled with a blank invisible marker element of the target scroll container.

[0054] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0055] processor;

[0056] a memory for storing instructions executable by the processor;

[0057] The processor is configured to execute the instructions to implement the data display method as described above.

[0058] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the data display method as described above.

[0059] According to a fifth aspect of an embodiment of the present disclosure, there is provided a computer program product, comprising a computer program / instruction, wherein the computer program / instruction implements the data display method as described above when executed by a processor.

[0060] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0061] Based on the distance that the sliding object has slid on the display length of the full data and the display length of each data block formed by dividing the full data, the index information of the target data block is determined, and the rendering range is determined based on the index information of the target data block and the number of data included in each data block. The data blocks within the rendering range are rendered and displayed, and blank invisible marking elements are used as the rendering results of the data blocks outside the rendering range. It can be seen that only the data within a certain range is rendered, and other data uses blank elements to fill the display page, thereby reducing the amount of data rendered and displayed.

[0062] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0063] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0064] Figure 1 is a flow chart of a method for displaying data according to an exemplary embodiment;

[0065] Figure 2 is an exemplary diagram of a display interface according to an exemplary embodiment;

[0066] Figure 3 is an exemplary diagram of another display interface according to an exemplary embodiment;

[0067] Figure 4 is a flow chart of another method for displaying data according to an exemplary embodiment;

[0068] Figure 5 is a block diagram of a data display device according to an exemplary embodiment;

[0069] Figure 6It is a block diagram of an electronic device according to an exemplary embodiment. DETAILED DESCRIPTION

[0070] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0071] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0072] The data display method disclosed in the present invention can be applied to, but not limited to, a display server for rendering and displaying data, with the aim of realizing a virtual scrolling display of data to reduce the amount of data to be rendered.

[0073] Figure 1 is a flow chart of a method for displaying data according to an exemplary embodiment. Figure 1 As shown, the following steps are included.

[0074] In step S11 , a numerical value that is the number of pieces of data included in each data block is acquired.

[0075] The value in this step can be pre-configured manually. In order to simplify the description, the number of data included in each data block is referred to as the length of the data block, which is recorded as contentLength.

[0076] It is understandable that the lengths of the data blocks may be the same or different, which is not limited here. Also, the specific length of the data blocks is not limited.

[0077] In step S12, the full amount of data to be displayed is obtained, and it is determined whether the number of data items included in the full amount of data (ie, the length of the full amount of data) is greater than the sum of the lengths of each data block. If so, S13 is executed; if not, the process ends.

[0078] That is to say, the following steps are executed based on the length of the full data and the sum of the lengths of each data block. When the length of the full data is small, that is, the amount of data of the full data is not large, because the rendering and display of the full data usually does not cause lag or crash, the full data can be directly rendered and displayed without executing the following process to implement virtual scrolling to save resources.

[0079] In step S13, the full amount of data is divided into data blocks according to the length of each data block.

[0080] Each data block has unique index information, and the index information indicates the order of the data block. It can be understood that the order is determined according to the order of each data block in the full amount of data. For example, the order of data blocks from front to back in the full amount of data is: data block 0, data block 1...data block n, then the index information of the first data block is 1, the index information of the second data block is 2...the index information of the nth data block is n.

[0081] In step S14, the index information of the target data block is determined according to the distance that the sliding object has slid over on the display length of the full data and the display lengths of the respective data blocks into which the full data is divided.

[0082] The display length refers to the length of the data rendered and displayed in the display window. Figure 2 For example, a piece of data is rendered and displayed in a display window, and the display window is taken as an example of a web page that can be scrolled from top to bottom. Then, the display length of a piece of data is the height of the area occupied by the piece of data in the web page.

[0083] Based on the above definition, in this step, the display length of the full data is the length occupied in the display window when the full data is rendered and displayed. It can be understood that the display length of the full data is the sum of the display lengths of each data in the full data. Therefore, optionally, taking a web page that can be scrolled from top to bottom as an example, the display length of the full data can also be regarded as the height, recorded as totalHeight, then totalHeight = rowHeight*data.length, where rowHeight is the height of a data in the web page, and data.length is the length of the full data.

[0084] Similarly, the display length of any one of the data blocks is the length of the data block when it is rendered and displayed in the display window, and is also Figure 2 For example, the display length of each data block is the height of each data block.

[0085] Slide objects are movable sub-controls in a slide control. Figure 2For example, the sliding control is a scroll bar, and the sliding object is a movable slider on the scroll bar.

[0086] The distance that the sliding object has slid over the display length of the full amount of data is: the distance that the sliding object has slid from the preset starting point of the display data of the full amount of data (for example, the first row of display data of the web page shown in 2) to the current position. The distance can be obtained using an existing function (for example, scrollTop in JavaScript). No further details are given here.

[0087] The target data block is the data block currently controlled by the sliding object and located in the display window. It is understandable that the sliding object enters the display window by sliding the data block, and the data block entering the display window needs to be rendered and displayed so that the display page can display the content. The purpose of the method disclosed in the present invention is to render and display only the data block entering the display window. Therefore, in this step, the index information of the target data block is determined by the distance the sliding object slides and the display length of each data block, that is, it is determined which target data block is located in the display window.

[0088] In this step, taking the equal length of each data block as an example, the index information of the target data block is recorded as partIndex. Figure 2 In the example shown:

[0089] partIndex=Math.floor(scrollDom.scrollTop / contentHeight)

[0090] Among them, Math.floor means rounding down, scrollDom.scrollTop is the distance the sliding object has slid, and contentHeight is the height of each data block. Based on the above formula, we can see how many data blocks the sliding object has slid. Figure 2 In the example, if the slider has slid over data block 1 but has not slid over data block 2, the target data block is data block 2.

[0091] It is understandable that in addition to rounding down, rounding up can also be performed, which is not limited here. In the case of rounding down, the index information of the data block starts from 0, and in the case of rounding up, the index information of the data block starts from 1.

[0092] In step S15, the rendering range is determined according to the index information of the target data block and the number of data included in each data block.

[0093] As mentioned above, because the target data block must be located within the display window, it must be rendered and displayed, and the rendering range includes the target data block.

[0094] exist Figure 2 In the scenario shown, in addition to data block 2, a part of data block 3 is also in the display window. If only the data of data block 2 is rendered and displayed, and the rendering results of the data of other data blocks are marked with blank invisible marks, the lower part of the web page will be displayed as blank. Although this display method can reduce the amount of rendered data, the user experience is not good, that is, the display performance of the displayed page is not good. Therefore, optionally, in addition to the target data block, the rendering range also includes part of the data after the target data block, and the display length of the rendering range must be greater than the display length of the display window to improve the display performance.

[0095] Specifically, the specific implementation of S15 is:

[0096] 1. Determine the effective range based on the index information of the target data block and the number of data included in each data block.

[0097] It is understandable that once the upper and lower limits are determined, the range can be determined. Therefore, optionally, when the index information of the data block is numbered starting from 0 and increasing by 1, the lower limit of the valid range fromIndex is:

[0098] fromIndex=partIndex*contentLength,

[0099] The upper limit of the valid range toIndex is:

[0100] toIndex=(partIndex+1)*contentLength.

[0101] 2. Use the data of preset display length adjacent to the effective range as the buffer range.

[0102] Under the calculation method of the upper and lower limits of the above effective range, the upper and lower limits of the buffer range are:

[0103] fromIndex=(partIndex+1)*contentLength+1,

[0104] toIndex = (partIndex + 1) * contentLength + cacheLength, wherein cacheLength is a preset length (ie, the number of data items included in the buffer range).

[0105] It can be understood that, no matter in the case of rounding down or rounding up, the data of the preset display length after the effective range can be used as the buffer range.

[0106] The sum of the display length of the preset length and the display length of the effective range is greater than the display length of the display window. It is understandable that the preset length can be pre-configured. To simplify the implementation process, the preset length can optionally be the length of a data block. To achieve a more fine-grained reduction in the amount of rendering data, the preset length can also be configured to be less than the length of a data block.

[0107] 3. Use the effective range and buffer range as the rendering range to improve the display performance of the display window.

[0108] In step S16, the data blocks within the rendering range are rendered and displayed, and blank invisible marking elements (referred to as padding) are used as rendering results for the data blocks outside the rendering range.

[0109] Optionally, in order to enable the scroll control to indicate the proportion of the data that has been scrolled over in the total data, in this step, the display length of the data outside the rendering range is used as the display length of the padding to achieve a display length equal to that of the full amount of data being rendered, so that the scroll control can indicate the proportion of the data that has been scrolled over in the total data.

[0110] Specifically, the specific implementation process of S16 is:

[0111] 1. Determine the filling height before the rendering range based on the index information of the target data block, the number of data included in each data block, and the display length of each data.

[0112] For example, if the index information of the data block starts from 0 and increases by 1, the padding length before the rendering range (in Figure 2 The display page of the example can also be called height) is:

[0113] paddingTop=partIndex*contentLength*rowHeight.

[0114] 2. Determine the filling height after the rendering range based on the display length of the full data, the display length of each data block, the display length of the buffer range, and the filling height of the data before the rendering range.

[0115] For example, if the index information of the data block starts from 0 and increases by 1, the padding length after the rendering range (in Figure 2 The display page of the example can also be called height) is:

[0116] paddingBottom=totalHeight-contentHeight-cacheHeight-paddingTop.

[0117] 3. Use the padding length before the rendering range as the rendering result of the data before the rendering range.

[0118] 4. Use the padding length after the rendering range as the rendering result of the data after the rendering range.

[0119] Figure 1 The data display method shown has the following beneficial effects:

[0120] 1. Only the data within the rendering range is rendered, and other data is filled with padding, so the amount of rendered data can be reduced, thereby avoiding the problem of display page freeze or crash caused by excessive rendering data.

[0121] 2. The rendering range consists of a valid range and a buffer range, which not only improves display performance, but also enables more fine-grained control of the rendering range and the size of the divided data blocks. The fine-grained division can further reduce the amount of rendered data.

[0122] 3. Take the full amount of data as the processing object, and use the relative position relationship between the data block and the sliding object as an important basis to realize virtual scrolling. Use the rendering range directly to determine the position of the rendered data and the padding. Therefore, after the target data block changes due to scrolling, the changes in the rendering range and the padding position will not cause the scroll bar to jump because the full amount of data remains unchanged.

[0123] The display page is divided into areas, and virtual scrolling is achieved by changing the DOM nodes placed in each area. During the page scrolling process, the DOM nodes placed in each area need to be changed. For example, DOM nodes in some areas are deleted and DOM nodes are added to some areas. Since the deletion and addition cause the change in the amount of data, the scroll bar will jump.

[0124] Figure 2 The example shown is a scenario in which a slider slides on a scroll bar to control the data displayed on a page. In this scenario, one understandable example is that the user controls the sliding of the slider through human-computer interaction. After the sliding of the slider causes the target data block to change (for example, from data block 2 to data block 3), it returns to execute S14 to change the rendering range, thereby achieving a display effect in which the rendered display content changes with the sliding.

[0125] In addition, in practice, in some scenarios, after the data is updated, the slider automatically slides to a default position. Figure 3 For example, in the live text and picture broadcast interface, after the new text is displayed, no matter where the slider is, it will automatically slide to the position of the latest text, that is, Figure 3 The method for displaying data described in the embodiment of the present disclosure is also applicable to such a scenario. Specifically, the distance that the sliding object has slid over the display length of the full amount of data is determined according to the following steps:

[0126] 1. After all data is updated, get the position of the sliding object.

[0127] The position of the sliding object is a pre-configured position to which the sliding object moves in response to the update of the full amount of data. Figure 3 The bottom of the scroll bar shown.

[0128] 2. Based on the position of the sliding object, determine the distance the sliding object has slid over the displayed length of the full amount of data.

[0129] As mentioned above, the distance that the sliding object has slid on the display length of the full data is: the distance the sliding object has slid from the preset starting point of the display data of the full data (for example, the first line of display data of the web page shown in 2) to the current position. Figure 3 The distance the slider has slid across is the display length of the full data.

[0130] After determining the distance that the sliding object has slid over the display length of the full amount of data, the rendering range can be determined according to the above steps, which will not be repeated here.

[0131] It can be seen that the data display method disclosed in the present disclosure is applicable to the scenario of customizing the position of the sliding object, and therefore has a wider scope of application. However, the prior art divides the display page into regions, and realizes virtual scrolling by changing the DOM nodes placed in each region, and triggers the update of the displayed data based on whether the slider slides to the critical point, and therefore cannot be applied to the scenario of customizing the position of the sliding object.

[0132] Figure 4 It is another data display method shown according to an exemplary embodiment. Compared with the above embodiment, the focus is on explaining the combination and compatibility with the existing technology for realizing scrolling. In this embodiment, the data display method disclosed in the present invention is encapsulated as a parent component, and the child component under the parent component is an existing scrolling container. It can be understood that the existing scrolling container is used to realize the scrolling display of the full amount of data.

[0133] In step S41, after the page node is generated, the DOM (called scrollDom) of the scroll container is obtained.

[0134] In step S42, a scroll event on scrollDom is monitored, and if a scroll event is monitored, step S43 is executed.

[0135] It can be understood that S42 may be a periodic step, that is, periodic monitoring.

[0136] In step S43, it is determined whether the length of the full amount of data is greater than the sum of the lengths of each data block. If so, S44 is executed; if not, the process ends.

[0137] In step S44, the full amount of data is divided into data blocks according to the length of each data block.

[0138] In step S45, the index information of the target data block is determined according to the distance that the sliding object has slid over the display length of the full data and the display lengths of the respective data blocks into which the full data is divided.

[0139] In step S46, fromIndex, toIndex, fromIndex, toIndex, paddingTop and paddingBottom are calculated respectively according to the index information of the target data block.

[0140] Among them, fromIndex=partIndex*contentLength,

[0141] toIndex=(partIndex+1)*contentLength,

[0142] fromIndex=(partIndex+1)*contentLength+1,

[0143] toIndex=(partIndex+1)*contentLength+cacheLength,

[0144] paddingTop=partIndex*contentLength*rowHeight,

[0145] paddingBottom=totalHeight-contentHeight-cacheHeight-paddingTop.

[0146] In step S47, fromIndex, toIndex, fromIndex and toIndex are sent to the scroll container, so that the scroll container renders and displays the data within the rendering range.

[0147] It can be understood that in this step, only the index of the rendering range is sent to the scroll container, and the scroll container can use the original rendering algorithm and logic to perform rendering and display.

[0148] In step S48, the padding of the scroll container with a length of paddingTop is used as the rendering result of the data before the rendering range, and the padding of the scroll container with a length of paddingBottom is used as the rendering result of the data after the rendering range.

[0149] Return to execute S42.

[0150] Figure 4 The process shown has the following benefits:

[0151] 1. It is aimed at the scroll container, so you don’t need to care about the logic and structure inside the scroll container, and the scroll container does not need any special adaptation. In addition, compared with using the padding of the parent component, using the padding of the scroll container is less invasive to the internal components. It can be applied to components of any form of content, such as: tables, select drop-down boxes, lists, etc., so it has high compatibility.

[0152] 2. When the scrolling container has the function of scrolling multiple lists of data simultaneously, the data display method disclosed in the present invention only needs to divide the data in each data list that scrolls synchronously into data blocks, thereby realizing virtual scrolling under the premise of synchronous scrolling of multiple lists of data.

[0153] Figure 5 is a block diagram of a display device according to an exemplary embodiment. Figure 5 The device includes a first determining unit 501, a second determining module 502 and a rendering unit 503.

[0154] The first determining unit 501 is configured to determine index information of a target data block according to a distance that the sliding object has slid over on the display length of the full amount of data and the display lengths of the respective data blocks into which the full amount of data is divided; the target data block is a data block currently controlled by the sliding object and located in the display window, and the index information indicates the sequence of the data block in all the data blocks, and the sequence is determined according to the order of the data block in the full amount of data;

[0155] A second determining unit 502 is configured to determine a rendering range according to the index information of the target data block and the number of data included in each of the data blocks;

[0156] The rendering unit 503 is configured to render and display the data blocks within the rendering range, and use a blank invisible marking element as a rendering result of the data blocks outside the rendering range.

[0157] Optionally, the second determining unit is configured to determine the rendering range according to the index information of the target data block and the number of data included in each of the data blocks, including: the second determining unit is specifically configured to:

[0158] Determining a valid range according to the index information of the target data block and the number of data items included in each of the data blocks;

[0159] The data of the preset length adjacent to the effective range is used as a buffer range; wherein the sum of the display length of the preset display length and the display length of the effective range is greater than the display length of the display window;

[0160] The effective range and the buffer range are used as the rendering range.

[0161] Optionally, the rendering unit is configured to use a blank invisible marking element as a rendering result of a data block outside a rendering range, including: the rendering unit is specifically configured to:

[0162] Determine the padding length before the rendering range according to the index information of the target data block, the number of data included in each of the data blocks, and the display length of each data;

[0163] Determine the filling length after the rendering range according to the display length of the full amount of data, the display length of each of the data blocks, the display length of the buffer range, and the filling height of the data before the rendering range;

[0164] Use the blank invisible mark element with the padding length before the rendering range as the rendering result of the data before the rendering range;

[0165] The blank invisible mark element having the padding length after the rendering range is used as the rendering result of the data after the rendering range.

[0166] Optionally, the first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to:

[0167] When the number of data items included in the full amount of data is greater than the sum of the number of data items included in each of the data blocks, the index information of the target data block is determined based on the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block formed by dividing the full amount of data.

[0168] Optionally, the first determining unit is further configured to:

[0169] After the full amount of data is updated, obtaining a position of the sliding object, the position being a pre-configured position to which the sliding object moves in response to the update of the full amount of data;

[0170] The distance that the sliding object has slid over the display length of the full amount of data is determined according to the position.

[0171] Optionally, it further includes: a container determination unit;

[0172] The container determination unit is configured to obtain the identifiers of each scroll container before determining the index information of the target data block based on the distance that the sliding object has slid on the display length of the full data and the display lengths of each data block formed by dividing the full data; monitor the scroll events on each scroll container based on the identifiers of each scroll container, and use the scroll container where the scroll event occurs as the target scroll container;

[0173] The first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to:

[0174] The index information of the target data block is determined according to the distance that the sliding object in the target scroll container has slid over the display length of the full data in the target scroll container and the display length of each data block into which the full data is divided.

[0175] Optionally, the rendering unit is configured to use a blank invisible marking element as a rendering result of the data block outside the rendering range, including: the rendering unit is specifically configured to:

[0176] The display position of the data block outside the rendering range is filled with a blank invisible marker element of the target scroll container.

[0177] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0178] In an exemplary embodiment, an electronic device is also provided. Figure 6 A schematic diagram of the structure of the electronic device (recorded as a data display device) is shown, and the electronic device may include: at least one processor 601, at least one communication interface 602, at least one memory 603 and at least one communication bus 604;

[0179] In the embodiment of the present application, the number of the processor 601, the communication interface 602, the memory 603, and the communication bus 604 is at least one, and the processor 601, the communication interface 602, and the memory 603 communicate with each other through the communication bus 604;

[0180] The processor 601 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention;

[0181] The memory 603 may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory;

[0182] Among them, the memory is used to store processor executable instructions, and the processor can execute the instructions stored in the memory to implement various steps of a data display method provided in an embodiment of the present application.

[0183] In an exemplary embodiment, a computer-readable storage medium including instructions is also provided, such as a memory including instructions, and the above instructions can be executed by a processor of a data display device to complete the various steps of the data display method. Optionally, the storage medium can be a non-transitory computer-readable storage medium, for example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0184] In an exemplary embodiment, a computer program product is also provided, including a computer program / instruction, and when the computer program / instruction is executed by a processor, each step of the data display method is implemented.

[0185] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0186] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying data, characterized in that: include: Determining index information of a target data block according to a distance that the sliding object has slid over on the display length of the full amount of data and the display lengths of the respective data blocks into which the full amount of data is divided; The target data block is a data block currently controlled by the sliding object and located in the display window, and the index information indicates the order of the data block in all data blocks, and the order is determined according to the order of the data block in the full amount of data; wherein the full amount of data is divided into individual data blocks according to the length of each data block, and each data block has unique index information; Determining a rendering range according to the index information of the target data block and the number of data items included in each of the data blocks; Rendering and displaying the data blocks within the rendering range, and using blank invisible marking elements as rendering results of the data blocks outside the rendering range; The determining of the rendering range according to the index information of the target data block and the number of data included in each of the data blocks includes: Determining a valid range according to the index information of the target data block and the number of data items included in each of the data blocks; The data of a preset length adjacent to the effective range and after the effective range is used as a buffer range; wherein the sum of the display length of the preset length and the display length of the effective range is greater than the display length of the display window; The effective range and the buffer range are used as the rendering range.

2. The method according to claim 1, characterized in that The method of using a blank invisible marker element as a rendering result of a data block outside a rendering range includes: Determine the padding length before the rendering range according to the index information of the target data block, the number of data included in each of the data blocks, and the display length of each data; Determine the filling length after the rendering range according to the display length of the full amount of data, the display length of each of the data blocks, the display length of the buffer range, and the filling height of the data before the rendering range; Use the blank invisible mark element with the padding length before the rendering range as the rendering result of the data before the rendering range; The blank invisible mark element having the padding length after the rendering range is used as the rendering result of the data after the rendering range.

3. The method according to claim 1, characterized in that The step of determining the index information of the target data block according to the distance that the sliding object has slid over on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided includes: When the number of data items included in the full amount of data is greater than the sum of the number of data items included in each data block, the index information of the target data block is determined based on the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block formed by dividing the full amount of data.

4. The method according to claim 1, characterized in that: The method for determining the distance that the sliding object has slid over the displayed length of the full amount of data includes: After the full amount of data is updated, obtaining a position of the sliding object, the position being a pre-configured position to which the sliding object moves in response to the update of the full amount of data; The distance that the sliding object has slid over the display length of the full amount of data is determined according to the position.

5. The method according to any one of claims 1 to 4, characterized in that: Before determining the index information of the target data block according to the distance that the sliding object has slid over on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, the method further includes: Get the ID of each scroll container; According to the identifiers of the scroll containers, the scroll events on the scroll containers are monitored, and the scroll container where the scroll event occurs is used as the target scroll container; The step of determining the index information of the target data block according to the distance that the sliding object has slid over on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided includes: The index information of the target data block is determined according to the distance that the sliding object in the target scroll container has slid over the display length of the full data in the target scroll container and the display length of each data block into which the full data is divided.

6. The method according to claim 5, characterized in that The using of a blank invisible marking element as a rendering result of the data block outside the rendering range includes: The display position of the data block outside the rendering range is filled with a blank invisible marker element of the target scroll container.

7. A data display device, characterized in that: include: A first determining unit is configured to determine index information of a target data block according to a distance that the sliding object has slid over on the display length of the full amount of data and the display lengths of the respective data blocks into which the full amount of data is divided; The target data block is a data block currently controlled by the sliding object and located in the display window, and the index information indicates the order of the data block in all data blocks, and the order is determined according to the order of the data block in the full amount of data; wherein the full amount of data is divided into individual data blocks according to the length of each data block, and each data block has unique index information; A second determining unit is configured to determine a rendering range according to the index information of the target data block and the number of data included in each of the data blocks; A rendering unit, configured to render and display the data blocks within the rendering range, and use a blank invisible marking element as a rendering result of the data blocks outside the rendering range; The second determining unit is configured to determine the rendering range according to the index information of the target data block and the number of data included in each of the data blocks, including: the second determining unit is specifically configured to: Determining a valid range according to the index information of the target data block and the number of data items included in each of the data blocks; The data of a preset length adjacent to the effective range and after the effective range is used as a buffer range; wherein the sum of the display length of the preset length and the display length of the effective range is greater than the display length of the display window; The effective range and the buffer range are used as the rendering range.

8. The device according to claim 7, characterized in that The rendering unit is configured to use a blank invisible marking element as a rendering result of a data block outside a rendering range, including: the rendering unit is specifically configured to: Determine the padding length before the rendering range according to the index information of the target data block, the number of data included in each of the data blocks, and the display length of each data; Determine the filling length after the rendering range according to the display length of the full amount of data, the display length of each of the data blocks, the display length of the buffer range, and the filling height of the data before the rendering range; Use the blank invisible mark element with the padding length before the rendering range as the rendering result of the data before the rendering range; The blank invisible mark element having the padding length after the rendering range is used as the rendering result of the data after the rendering range.

9. The device according to claim 7, characterized in that The first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to: When the number of data items included in the full amount of data is greater than the sum of the number of data items included in each of the data blocks, the index information of the target data block is determined based on the distance that the sliding object has slid over the display length of the full amount of data and the display length of each data block formed by dividing the full amount of data.

10. The device according to claim 7, characterized in that The first determining unit is further configured to: After the full amount of data is updated, obtaining a position of the sliding object, the position being a pre-configured position to which the sliding object moves in response to the update of the full amount of data; The distance that the sliding object has slid over the display length of the full amount of data is determined according to the position.

11. The device according to any one of claims 7 to 10, characterized in that: Also includes: Container determination unit; The container determination unit is configured to obtain the identifiers of each scroll container before determining the index information of the target data block based on the distance that the sliding object has slid on the display length of the full data and the display lengths of each data block formed by dividing the full data; monitor the scroll events on each scroll container based on the identifiers of each scroll container, and use the scroll container where the scroll event occurs as the target scroll container; The first determining unit is configured to determine the index information of the target data block according to the distance that the sliding object has slid on the display length of the full amount of data and the display length of each data block into which the full amount of data is divided, including: the first determining unit is specifically configured to: The index information of the target data block is determined according to the distance that the sliding object in the target scroll container has slid over the display length of the full data in the target scroll container and the display length of each data block into which the full data is divided.

12. The device according to claim 11, characterized in that The rendering unit is configured to use a blank invisible marking element as a rendering result of a data block outside the rendering range, including: the rendering unit is specifically configured to: The display position of the data block outside the rendering range is filled with a blank invisible marker element of the target scroll container.

13. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the data display method according to any one of claims 1 to 6. 14 . A computer-readable storage medium, when instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the data display method according to claim 1 .

15. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the data display method according to any one of claims 1 to 6 is implemented.

Images