Data display method, device, equipment, medium and program product

Abstract

The present application is applicable to the field of computer technology, and provides a data display method, device, equipment, medium and program product, the method comprising: displaying a visible area; moving the object nodes in the first node list and the second node list in a first direction, the second node list is adjacent to the first node list, and the total number of object nodes in the first node list and the second node list is the first number; when it is detected that the target node list has been moved out of the target container, sequentially loading the first number of undisplayed data to be displayed from the list of data to be displayed; updating each object node in the target node list according to the first number of data to be displayed; moving the updated target node list to the adjacent position behind the remaining node list, and returning to the step of moving the object nodes in the first node list and the second node list in the first direction. The method can achieve smooth seamless scrolling under large amounts of data.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and in particular, relates to data display methods, devices, equipment, media, and program products. Background Art

[0002] Seamless scrolling is a web design technology that can visually produce a continuous scrolling effect. It is widely used in dynamic display of content on large visual screens.

[0003] At present, the solution to achieve seamless scrolling is mainly to render the content to be displayed as Document Object Model (DOM) nodes in the seamless scrolling list, and achieve seamless scrolling by moving the DOM nodes. However, when the amount of data is too large, the number of rendered DOM nodes will increase rapidly, causing the front end to spend more time to render the DOM nodes, resulting in obvious lag in the presented content.

[0004] Therefore, how to achieve smooth and seamless scrolling under large amounts of data has become a technical problem that needs to be solved urgently. Summary of the invention

[0005] The embodiments of the present application provide a data display method, apparatus, device, medium and program product, which can solve the problem of how to achieve smooth seamless scrolling under large amounts of data.

[0006] In a first aspect, an embodiment of the present application provides a data display method, including:

[0007] Displaying a visible area, wherein the visible area includes data to be displayed corresponding to each object node in the target container;

[0008] Move the object nodes in the first node list and the second node list in a first direction, so that the second node list is adjacent to the first node list, and the total number of the object nodes in the first node list and the second node list is both a first number, which is the total amount of data that the target container can accommodate;

[0009] When it is detected that the target node list has been moved out of the target container, sequentially loading a first amount of undisplayed data to be displayed from the list of data to be displayed, the target node list being either the first node list or the second node list;

[0010] Update each object node in the target node list according to the first amount of data to be displayed;

[0011] Move the updated target node list to the rear adjacent position of the remaining node list, and return to the step of moving the object nodes in the first node list and the second node list to the first direction. The remaining node list is the node list in the first node list and the second node list that has not been moved out of the target container.

[0012] In a second aspect, an embodiment of the present application provides a data display device, including:

[0013] A display module, used for displaying a visible area, wherein the visible area includes data to be displayed corresponding to each object node in the target container;

[0014] A moving module, used for moving the object nodes in the first node list and the second node list to a first direction, the second node list is adjacent to the first node list, the total number of the object nodes in the first node list and the second node list is a first number, and the first number is the total amount of data that can be accommodated by the target container;

[0015] a loading module, configured to sequentially load a first amount of undisplayed data to be displayed from a list of data to be displayed when it is detected that the target node list has been moved out of the target container, the target node list being either the first node list or the second node list;

[0016] An updating module, used for updating each object node in the target node list according to the first amount of data to be displayed;

[0017] The moving module is also used to move the updated target node list to the rear adjacent position of the remaining node list, and return to the step of moving the object nodes in the first node list and the second node list in the first direction. The remaining node list is the node list in the first node list and the second node list that has not been moved out of the target container.

[0018] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the electronic device implements the data display method as described in any embodiment of the first aspect.

[0019] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, including: a computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements the data display method as described in any embodiment of the first aspect.

[0020] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when the computer program is run, enables the data display method described in any embodiment of the first aspect to be executed.

[0021] Compared with the prior art, the beneficial effects of the embodiment of the present application are as follows: the number of object nodes in the first and second node lists are the total amount of data that the target container can accommodate, that is, the first number, and one object node corresponds to one data to be displayed, so that when any of the node lists is moved out of the target container, only the first number of undisplayed data to be displayed is loaded from the data to be displayed list, and each object node in the node list can be updated. Compared with the traditional scheme of loading all the data to be displayed at one time and performing double rendering, the number of data loaded and the number of nodes rendered are greatly reduced, the data loading time and the node rendering time are reduced, the front-end data processing time is saved, and the situation of content presentation in the visible area being stuck can be avoided. And by updating the object nodes in the target node list that are moved out of the target container and moving the target node list to the adjacent position behind another node list, the position alternation between the first and second node lists and the update of the internal object nodes are realized, and when the object nodes in the two node lists are continuously moved, uninterrupted data switching and scrolling are realized, thereby achieving a smooth and seamless scrolling display effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0023] Figure 1 This is a schematic diagram of initializing DOM nodes in the traditional seamless scrolling solution in this application;

[0024] Figure 2 This is a schematic diagram of starting to scroll the DOM in the traditional seamless scrolling solution in this application;

[0025] Figure 3 It is a schematic diagram of a DOM moving out of a container in a traditional seamless scrolling solution in this application;

[0026] Figure 4 It is a schematic diagram of a DOM moving below another DOM in a traditional seamless scrolling solution in this application;

[0027] Figure 5 is a schematic diagram of an application environment of an embodiment of the present application;

[0028] Figure 6 This is a flow chart of a data display method provided in an embodiment of the present application;

[0029] Figure 7a It is a schematic diagram of placing a first node list and a second node list provided in an embodiment of the present application;

[0030] Figure 7b It is a schematic diagram of a processing flow after a target node list is moved out of a target container provided by an embodiment of the present application;

[0031] Figure 8 It is a flowchart of another data display method provided in an embodiment of the present application;

[0032] Fig. 9 is a flow chart of another data display method provided in an embodiment of the present application;

[0033] Fig.10 A schematic diagram of a workflow of a data display method in an application scenario;

[0034] Fig.11 is a schematic diagram of the structure of an electronic device provided by an embodiment of the present application;

[0035] Fig.12 It is a structural schematic diagram of a data display device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0036] Currently, seamless scrolling is usually used in the front end of applications such as visualization screens. For example, the browser obtains a list of information and renders each piece of data in the list into two identical DOM nodes, thus obtaining two DOM node lists, which are referred to as the first DOM and the second DOM. A container is created to wrap the DOM node list. The container corresponds to the display page of the visualization screen, and the outside of the container area is invisible to the user.

[0037] like Figure 1 As shown, the first DOM is placed in the container. The part that cannot be put into the container is not visible to the user outside the container. The second DOM is placed below (or behind) the first DOM. Figure 1 The two DOMs are moved (or scrolled) by the user (from the bottom of the container to the top). As a result, the DOM nodes in the first DOM move outside the container after passing the top of the container and become invisible to the user, while the data in the DOM nodes in the container are displayed on the display page. The user will visually feel that the data on the display page is scrolling. However, there are 10,000 entries (DOM nodes) in the first DOM, which means 10,000 rows of data. The container cannot wrap 10,000 pieces of data. Normally, the container can only hold about 10 pieces of data, which means that the remaining data is invisible to the user.

[0038] When the first DOM is completely removed from the container, the second DOM enters the container, such as Figure 2As shown in the figure, the bottom of the first DOM is directly above the container, and the head of the second DOM is close to the top of the container. The second DOM also contains 10,000 pieces of data.

[0039] Continue to move the first DOM and the second DOM upwards. As time goes by, the last DOM node of the second DOM reaches the bottom of the container, that is, Figure 3 The last piece of data in the second DOM shown in the figure is now close to the bottom of the container. Figure 4 As shown in the figure, the first DOM is quickly moved below the second DOM, and then the first DOM and the second DOM are moved upward until the last DOM node of the first DOM reaches the bottom of the container next time, and then the second DOM is quickly moved below the first DOM. By this method of quickly moving another DOM below the DOM when the last DOM node of each DOM reaches the bottom of the container, the effect of seamless scrolling in the displayed page is achieved.

[0040] However, this implementation method will default to loading all DOM nodes for the first time when the front-end performs the initial rendering, that is, rendering all the data to be displayed into two identical DOM nodes, which is a double loading method. Figures 1 to 4 As shown in the figure, if there are 10,000 data in the information list, the front end will initially render 20,000 data and obtain 20,000 DOM nodes. When the amount of data increases, the front end needs to render a large amount of data as DOM nodes, which greatly increases the time spent on data rendering and occupies the resources of the front end, resulting in obvious lag in the content displayed on the page under large amounts of data.

[0041] In order to solve the above technical problems, the embodiment of the present application provides a data display method, device, equipment, medium and program product. The number of object nodes in the first and second node lists is only the total amount of data that can be accommodated in the target container, rather than the total amount of data to be displayed in the data list to be displayed, which can greatly reduce the number of object nodes to be rendered. Moreover, the first and second node lists are arranged adjacent to each other and move synchronously in the same direction. When any node list moves out of the target container, only the first amount of undisplayed data to be displayed is loaded from the data list to be displayed to update the content of the node list, which greatly reduces the amount of data loaded and the rendering time of the object nodes. And the updated node list is quickly placed in the adjacent position behind the other node list to continue to move the object nodes of the two. In this way, the seamless switching between different data to be displayed in the data list to be displayed is realized by the position replacement of the two node lists and the update of the nodes, so that when the object nodes of the two node lists are continuously moved in the target container, the effect of seamless scrolling of the data content is presented in the visible area. It avoids the one-time loading of all data in the data list to be displayed and the operation of double rendering nodes based on the loaded data, saving the rendering time of the front end and avoiding the jamming of the displayed content in the visible area.

[0042] The application environment of the data display method in the embodiment of the present application is first introduced below. Figure 5 Schematic diagram of an application environment of a data display method in an embodiment of the present application. Figure 5 The application environment shown includes a database 110 , an electronic device 120 and a display screen 130 , and the electronic device 120 establishes communication connections with the database 110 and the display screen 130 , respectively.

[0043] The database 110 is used to store a list of data to be displayed. The data to be displayed in the list of data to be displayed needs to be displayed in the visible area of ​​the display screen 130 .

[0044] The electronic device 120 is used to create a target container in the display screen 130, set the data in the target container to be displayed in the visible area of ​​the display screen 130, hide the data outside the target container in the visible area, load the data to be displayed in the list of data to be displayed from the database 110, and render the data to be displayed as object nodes, so that the object nodes corresponding to each data to be displayed in the list of data to be displayed are cyclically moved in the target container. The specific data loading method and movement method are introduced in the subsequent embodiments.

[0045] The display screen 130 is used to display the to-be-displayed data corresponding to the object node moved into the target container in the visible area.

[0046] Optionally, the database 110 and the display screen 130 may be integrated into the electronic device 120 .

[0047] The electronic device 120 may be a mobile phone, a tablet computer, a vehicle-mounted device, a laptop computer, a desktop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a server, etc. The embodiment of the present application does not impose any restrictions on the specific type of the electronic device.

[0048] The display screen 130 can be a display screen in a waiting room of a train station, a flight information display screen at an airport, a triage display screen at a hospital, a vehicle-mounted display screen, or a display screen of industrial control equipment, etc. The specific type of the display screen 130 can be a light emitting diode display screen (Light Emitting Diode, LED), an organic light emitting diode display screen (Organic Light Emitting Diode, OLED), a liquid crystal display screen (Liquid Crystal Display, LCD) or a quantum dot light emitting diode display screen (Quantum Dot Light Emitting Diode, QLED), etc. The embodiments of the present application do not impose any restrictions on the specific type of the display screen.

[0049] The following is a detailed description of the data display method in the embodiments of the present application. Figure 6 The flowchart of a data display method in an embodiment of the present application is shown, and the method includes the following steps:

[0050] Step S101, displaying the visible area.

[0051] In this embodiment, the data display method is applied to an electronic device, and the electronic device may be Figure 5 The electronic device shown in . The visible area includes data to be displayed corresponding to each object node in the target container. The data located inside the target container can be displayed to the user in the visible area, while the data located outside the target container is hidden in the visible area, and the user cannot view the data located outside the target container through the visible area. The target container is a container element corresponding to the visible area created by the electronic device in a seamless scrolling scene, also known as a parent box or a parent element, which is used to accommodate the data to be displayed in the visible area. The visible area can be an area in the display screen where the data to be displayed is displayed, and the visible area can be an entire page or a part of a page. The display screen can be the display screen of the electronic device itself, or it can be an external display screen connected to the electronic device. The object node is a DOM node, and the electronic device can render the obtained data to be displayed as an object node, and the object node includes the display style of the data to be displayed, and the display style can at least include the font size, font, height and width of the data to be displayed.

[0052] In the seamless scrolling scenario, the electronic device reads the data content of each object node in the target container, which includes data to be displayed and the display style of the data to be displayed, and displays the data to be displayed in the object node in the visible area in the read display style. For example, there are 3 rows (or 3) of object nodes in the target container, and the data to be displayed corresponding to each object node is the student information of a class. The student information includes the student's name and the class to which he belongs. The content displayed in the visible area can be shown in Table 1 below:

[0053] Table 1

[0054] Student 1 Class 1 of a certain grade Student 2 Class 2 of a certain grade Student 3 Class 3 of a certain grade

[0055] It can be seen that the display style corresponding to each object node is the same, with a row height of 1 cm, a column width of 5 cm, and center alignment in the Songti size 4 table.

[0056] Step S102: Move the object nodes in the first node list and the second node list toward a first direction.

[0057] In this embodiment, the second node list is adjacent to the first node list, and the total number of object nodes in the first node list and the second node list is the first number, and the first number is the total amount of data that the target container can accommodate. It can be understood that the first direction can be determined based on the display form of the specific data to be displayed. For example, when scrolling from top to bottom, the first direction can point to the top of the target container, when scrolling from bottom to top, the first direction can point to the bottom of the target container, and if it is horizontally scrolled, the first direction can point to the left or right side of the target container. In the embodiment of the present application, the first direction can point to the top of the target container as an example.

[0058] In a seamless scrolling scenario, the electronic device will initialize a first node list and a second node list after creating a target container. Specifically, the electronic device may first obtain a list of data to be displayed, which records all data to be displayed that need to be scrolled in the visible area. During initialization, the electronic device may load twice the first amount of data to be displayed from the list of data to be displayed in a specific order (for example, from top to bottom), and render the loaded data to be displayed as object nodes, respectively, and then divide the object nodes into two parts, one for the first node list and the other for the second node list. It can be understood that the positional relationship between the data to be displayed corresponding to each object node in the first node list is the same as the positional relationship between these data to be displayed in the list of data to be displayed, and the same is true for the second node list.

[0059] It should be noted that the list of data to be displayed may include the position index of each data to be displayed in the list of data to be displayed. The electronic device can determine the position of each data to be displayed in the list of data to be displayed based on the position index corresponding to each data to be displayed, and then load the data to be displayed in a specific order, and clarify the current loaded position.

[0060] When the electronic device obtains the first and second node lists, it places the top of the first node list at the exit of the target container, and places the second node list immediately behind the first node list, and at the same time moves the object nodes in the first and second node lists in the first direction. In this way, whenever an object node in the first node list moves out of the exit of the target container, an object node in the second node list will follow the first node list and move into the target container.

[0061] For example, Figure 7a As shown, assuming that the first number is 6, during initialization, the electronic device loads the 1st to 12th data to be displayed from the list of data to be displayed, and renders the 12 data to be displayed as DOM nodes (an example of object nodes), respectively. At the same time, the 12 DOM nodes are equally divided into two parts, and the first DOM (an example of the first node list) including the 1st to 6th rendered data to be displayed and the second DOM (an example of the second node list) including the 7th to 12th rendered data to be displayed are obtained. Place the top of the first DOM on the top of the outer container (an example of the target container), place the second DOM below the first DOM, and move the first DOM and the second DOM upward together. Still taking 10,000 pieces of data to be displayed as an example, compared to Figures 1 to 4 In the traditional seamless scrolling implementation shown, in the embodiment of the present application, only 12 pieces of data to be displayed need to be loaded and rendered, which greatly reduces the amount of data loading and rendering.

[0062] Step S103: when it is detected that the target node list has been moved out of the target container, a first amount of undisplayed data to be displayed is sequentially loaded from the list of data to be displayed.

[0063] Among them, the target node list is either the first node list or the second node list. When the electronic device moves the object nodes in the first node list and the second node list upward at the same time, after detecting that the last object node in either the first node list or the second node list is moved out of the target container, the first node list or the second node list is used as the target node list, and it is determined that it is moved out of the target container. At this time, it means that another node list has entered the target container, and there is no node list outside the target container that can continue to be moved and supplemented. The electronic device needs to load the undisplayed first amount of data to be displayed from the list of data to be displayed in sequence to enter step S104 so that the data content in the target node list of the moved target container can be updated and placed below in another node list to ensure that there is always a node list outside the target container that can continue to be moved and supplemented.

[0064] The electronic device will read the first number of target containers that have been created. An initial loading position is set in the list of data to be displayed. After the data to be displayed is loaded in a specific order from the initial loading position, the position index of the data to be displayed that was loaded last time will be marked to clarify the current loaded position. Later, each time the data to be displayed needs to be loaded, the electronic device will load the data to be displayed in a specific order starting from the last marked position. Therefore, when the electronic device detects that the target node list has been moved out of the target container, it will find the position corresponding to the position index in the list of data to be displayed based on the position index marked last time, and start from this position. Load the first number of data to be displayed from the list of data to be displayed in sequence according to the feature order. In the embodiment of the present application, taking the initial loading position as the position of the first data to be displayed in the list of data to be displayed as an example, it can be understood that the initial loading position can be set by itself.

[0065] It should be noted that, when the last marked position index indicates the position of the last piece of data to be displayed in the list of data to be displayed, the electronic device will sequentially load the first amount of data to be displayed starting from the initial loading position.

[0066] Step S104: updating each object node in the target node list according to the first amount of data to be displayed.

[0067] The electronic device replaces the to-be-displayed data corresponding to the first number of object nodes in the target node list with the loaded first number of to-be-displayed data.

[0068] Step S105, moving the updated target node list to the rear adjacent position of the remaining node list, and returning to the step of moving the object nodes in the first node list and the second node list in the first direction.

[0069] Among them, the remaining node lists are the node lists in the first node list and the second node list that have not been moved out of the target container. After the electronic device updates the data to be displayed corresponding to each object node in the first node list (or the second node list) that has been moved out of the target container this time, the first node list or the second node list is placed adjacent to the rear of the second node list (or the first node list) that has currently entered the target container, and the first node list and the second node list are closely connected together again, and it is ensured that the data to be displayed corresponding to each object node in the two node lists in the list of data to be displayed is continuous. In this way, returning to step S102 to continuously move the object nodes in the first node list and the second node list causes the object nodes in the two node lists to continuously shift in the target container, thereby presenting a seamless scrolling effect of data in the visible area.

[0070] It can be understood that the execution order of the above steps is not specifically limited in the embodiments of the present application, and the execution order of the above steps can be arbitrarily changed if no logical conflict occurs. For example, when it is detected that the target node list has been moved out of the target container, the target node list can be placed adjacent to the rear of the remaining node list, and then the first amount of data to be displayed can be loaded in sequence from the list of data to be displayed to update the target node list.

[0071] Exemplary, combined Figure 7a as well as Figure 7b As shown, after the 6 DOM nodes of the first DOM, i.e., the 1st to 6th data, are completely moved out of the outer container, the first DOM is immediately moved below the second DOM, and the data content in the first DOM is replaced. At this time, the top of the second DOM is flush with the top of the container. The 6 DOM nodes corresponding to the 1st to 6th data are replaced with the 6 DOM nodes corresponding to the 13th to 18th data, and the two DOMs are continuously moved upwards together, thus ensuring the technical effect of seamless scrolling. Figure 7a as well as Figure 7b In the application scenario of seamless scrolling shown in the figure, even with large amounts of data, the amount of initial data loaded and rendered will be greatly reduced because a maximum of 12 pieces of data will be loaded or rendered, which will speed up data processing efficiency and reduce the occupancy rate of computing resources. In addition, each time the data is loaded and rendered separately, which also reduces the total number of rendering nodes, further speeds up data processing efficiency, saves data loading and rendering time, and achieves the effect of smooth seamless scrolling with large amounts of data.

[0072] In the embodiment of the present application, the number of object nodes in the first and second node lists is the total amount of data that the target container can accommodate, that is, the first number, and one object node corresponds to one data to be displayed, so that when any of the node lists is moved out of the target container, only the first number of undisplayed data to be displayed is loaded from the data to be displayed list, and each object node in the node list can be updated. In addition, even if the data to be displayed is loaded for the first time, only twice the first number of data to be displayed needs to be loaded to obtain the object nodes in the first node list and the second node list. Compared with the traditional scheme of loading all the data to be displayed at one time and performing double rendering, the number of data loaded and the number of nodes rendered are greatly reduced, the data loading time and the node rendering time are reduced, the front-end data processing time is saved, and the situation of content being presented in the visible area being stuck can be avoided. The first number of undisplayed data to be displayed is loaded from the data to be displayed list in sequence to update the object nodes in the node list that is moved out of the target container and the node list is moved to the rear adjacent position of another node list, so that the position alternation between the node lists and the update of the internal object nodes can achieve uninterrupted data switching and scrolling when the object nodes in the two node lists are continuously moved, thereby achieving a smooth and seamless scrolling display effect.

[0073] Figure 8 This is another data display method provided by the embodiment of the present application, such as Figure 8 The method shown comprises the following steps:

[0074] Before displaying the visible area, the method further includes the following steps S201 to S205:

[0075] Step S201: Create a target container.

[0076] The electronic device can create a target container through a programming language, associate the target container with the page displayed in the display screen, and define a visible area on the page through the size of the target container. After creating the target container, the electronic device can read the container height (containerHeight) of the target container and the data row height (everyHeight) of each row in the list of data to be displayed through an application programming interface (API). The ratio of the container height to the data row height is rounded up to obtain the total amount of data that the target container can accommodate, that is, the first quantity. It is understandable that the data row height and the container height can be pre-specified.

[0077] Step S202 : loading a second amount of undisplayed data to be displayed in sequence starting from the initial loading position of the list of data to be displayed.

[0078] The second quantity is twice the first quantity. The electronic device will sequentially load the second quantity of data to be displayed in a specific order starting from the initial loading position in the list of data to be displayed.

[0079] Step S203: Render the second number of data to be displayed as object nodes respectively to obtain a second number of object nodes.

[0080] The electronic device may pre-acquire the attribute information corresponding to each data to be displayed in the list of data to be displayed, and the attribute information includes the display style and data structure of the data to be displayed. An object node is created for each of the second number of data to be displayed, the data to be displayed is mapped to the object node corresponding to the data to be displayed, and the attribute of the object node corresponding to the data to be displayed is set based on the attribute information of the data to be displayed, so as to complete the operation of rendering the data to be displayed as the object node, and then obtain the second number of object nodes.

[0081] Step S204: divide the second number of object nodes into a first node list and a second node list according to the target order.

[0082] The target order is the order in which the second number of data to be displayed are arranged in the list of data to be displayed. That is, the order of the positions of the position indexes corresponding to the second number of data to be displayed in the list of data to be displayed. The electronic device will sort the second number of object nodes according to the target order, and divide the sorted second number of object nodes into two groups based on the first number, and form the first group of object nodes into a first node list according to the target order, and the second group of object nodes into a second node list according to the target order. For example, Figure 7a The electronic device shown renders the 1st to 12th data as object nodes, wherein the object nodes in the first node list correspond to the 1st to 6th data from top to bottom, and the object nodes in the second node list correspond to the 7th to 12th data from top to bottom.

[0083] Step S205: placing the first node list in the target container, and placing the second node list behind and adjacent to the first node list, so as to display the visible area.

[0084] The electronic device can align the top edge of the first node list with the top of the target container so that the first node list can completely enter the target container, and place the second node list adjacent to the rear of the first node list so that the second node list is close to the first node list, so that the object nodes in the target container can display the corresponding content in the visible area.

[0085] In the technical scheme of step S201 to step S205, after creating the target container, the data to be displayed twice the number that the target container can accommodate is loaded in sequence from the initial loading position of the list of data to be displayed, so that the loaded data to be displayed is rendered as object nodes, and the rendered object nodes are divided into different first node lists and second node lists in order, so that each node list just includes the number of object nodes that the target container can accommodate. The first node list is placed in the target container and the second node list is placed adjacent to the rear of the first node list so that there are object nodes in the target container. While ensuring that there is content to be displayed in the visible area, the data to be displayed corresponding to the object nodes in the two node lists can be continuous in spatial position, and the continuity of the content displayed in the visible area during subsequent movement. In this way, only the data and nodes twice the number that the target container can accommodate are loaded and rendered, and the loaded data is rendered only once to complete the purpose of initialization. Compared with the traditional scheme of loading all data at one time and performing double rendering on all data, the amount of data loaded and rendered is greatly reduced, thereby achieving smooth seamless scrolling under large data volume.

[0086] Combination Fig.10 In one application scenario, taking the example of an electronic device scrolling and displaying data in a front-end browser page, the electronic device can read the container height of the container (an example of a target container) according to the browser API, and then determine the height of each row (an example of the height of a data row) according to the data content of each row (an example of the data to be displayed in the list of data to be displayed). The number of data items that the container can accommodate (number, an example of the first number) is calculated using the container height / each row height, and the number of preloaded data items is determined to be 2*number (an example of the second number).

[0087] Render the data in the list of data to be displayed to the page (an example of the visible area). Specifically, divide the preloaded data into two parts and render them separately to obtain two DOMs. Put the first DOM in the container and the second DOM below the first DOM, and move the two DOMs upward at the same time. When the first DOM is completely moved out of the container, quickly move the first DOM below the second DOM, and then replace the content of the first DOM, that is, update the DOM nodes in the first DOM. The above process is repeated to display the seamless scrolling effect on the page.

[0088] Step S206, displaying the visible area.

[0089] Step S207: Move the object nodes in the first node list and the second node list toward the first direction.

[0090] Step S208 : when it is detected that the target node list has been moved out of the target container, a first amount of undisplayed data to be displayed is sequentially loaded from the list of data to be displayed.

[0091] For details of steps S206 to S208, see Figure 6 Steps S101 to S103 in the illustrated embodiment are not described in detail here.

[0092] In one implementation, when the electronic device detects that the first node list has been moved out of the target container, before sequentially loading the first amount of undisplayed data to be displayed from the list of data to be displayed, the method further includes:

[0093] In the case where it is detected that the last object node in the target node list has been moved out of the target container, determining that the target node list has been moved out of the target container; or,

[0094] When it is detected that the last object node in another node list enters the target container, it is determined that the target node list has been moved out of the target container, and the other node list is the first node list and the node list in the second node list except the target node list.

[0095] When the electronic device simultaneously moves the object nodes in the first node list and the second node list, it will also monitor in real time whether the last object node in the first node list (or the second node list) located in the target container has moved out of the target container, and whether the last object node in the other node list of the first and second node lists has entered the target container. If the monitoring result of any one of them is positive, it is determined that the target node list has been moved out of the target container. Otherwise, the object nodes in the first node list and the second node list continue to be moved in the first direction.

[0096] In the above technical solution, when it is detected that the last object node in the target node list moves out of the target container or the last object node in another node list enters the target container, it can be determined that the target node list has been moved out of the target container. Whether the target node list is moved out of the target container is determined by two detection methods, which can avoid the occurrence of missed detection or false detection problems, so that the position of the target node list can be adjusted in time in the subsequent process to ensure the realization of seamless scrolling.

[0097] In one implementation, before sequentially loading the undisplayed first amount of to-be-displayed data from the to-be-displayed data list, the method further includes:

[0098] Get the container height of the target container and the data row height of the data list to be displayed;

[0099] A first quantity is determined according to the container height and the data row height.

[0100] The electronic device will directly read the container height and the data row height, and round up the ratio between the container height and the data row height as the first quantity. In this technical solution, the total amount of data that the target container can accommodate, i.e., the first quantity, is determined timely and accurately based on the container height and the data row height of the target container, so as to facilitate the subsequent accurate update of each object node in the target node list that has been moved out of the target container. This can avoid the situation where too much or too little data is loaded to be displayed, and provide a reliable data basis for the realization of seamless scrolling.

[0101] In one implementation, the method further includes updating the first quantity and the second quantity when a change in the container height or the data row height is detected. The electronic device detects whether the container height and the data row height of the target container have changed. If either of them has changed, the ratio between the container height and the data row height is recalculated, the result of rounding up is taken as the first quantity, and twice the first quantity is taken as the second quantity. The total amount of data that can be accommodated in the target container is updated in a timely manner to avoid the situation where too much or too little data is loaded to be displayed, and a reliable data basis is provided for the realization of seamless scrolling.

[0102] Continue to see Fig.10 , monitor the container size, mainly the change of the container height. When the container height changes, recalculate the number of data that can be accommodated (an example of the first number), re-obtain the number of data that needs to be pre-loaded and rendered (an example of the second number), and restart the process of loading data and rendering.

[0103] In one implementation, the method further includes: when detecting that the data to be displayed in the list of data to be displayed has changed, clearing the visible area and the target container, and entering the step of sequentially loading the second amount of data to be displayed that has not been displayed from the initial loading position of the list of data to be displayed. When the data to be displayed in the list of data to be displayed has changed, clearing the visible area and the target container in time can avoid the display of erroneous information, and re-entering the step of sequentially loading the second amount of data to be displayed that has not been displayed from the initial loading position of the list of data to be displayed ensures seamless scrolling based on the correct list of data to be displayed.

[0104] Step S209: update each object node in the target node list according to the first amount of data to be displayed.

[0105] In one implementation, updating each object node in the target node list according to the first amount of data to be displayed includes the following steps:

[0106] Rendering the first number of to-be-displayed data into object nodes respectively to obtain the first number of object nodes;

[0107] Replace the object nodes in the target node list with the first number of object nodes.

[0108] The electronic device will render the first amount of data to be displayed as object nodes based on a similar process to step S203 to obtain the first amount of object nodes. The electronic device will replace the object nodes in the target node list with the first amount of object nodes in the target order. For example, Figure 7b As shown, the electronic device will replace the DOM nodes corresponding to the 1st to 6th data in the first DOM with the DOM nodes corresponding to the 7th to 12th data from top to bottom. In the above technical solution, the rapid update of each object node in the target node list is achieved by simply rendering the first amount of data to be displayed as object nodes, and directly replacing the object nodes in the target node list with the rendered object nodes. Thereby, the rapid update of the target node list is achieved, and then the rapid switching of the content during the seamless scrolling of a large number of first down is achieved, so as to ensure the subsequent smooth seamless scrolling.

[0109] Step S210, moving the updated target node list to the rear adjacent position of the remaining node list, and returning to the step of moving the object nodes in the first node list and the second node list in the first direction.

[0110] For details of step S210, see Figure 6 Step S105 in the illustrated embodiment is not described in detail here.

[0111] In the embodiment of the present application, when the seamless scrolling effect is achieved by alternating the positions between the first node list and the second node list, each time the object node in the first node list or the second node list that is removed from the target container is replaced, only the total amount of data to be displayed that the target container can accommodate needs to be loaded and rendered, which greatly reduces the amount of data loaded and the amount of node rendering. And after the target container is created for the first time, only the amount of data to be displayed and the object nodes that are twice the total amount of data that the target container can accommodate need to be loaded and rendered to obtain the first node list and the second node list. Compared with the traditional solution of loading all the data at one time and performing double rendering on all the data, the amount of data loaded and rendered can be greatly reduced even during initialization, thereby avoiding the occurrence of freezes in the presented content and achieving smooth seamless scrolling under large amounts of data.

[0112] Considering that the amount of data to be displayed is small, even if the traditional solution of loading all the data at once and double-rendering all the data is used, there will be no page freeze. The traditional solution can be used for seamless scrolling when the total amount of data to be displayed in the list of data to be displayed is less than the freeze threshold. In this way, when the amount of data is small, it is convenient for users to directly sample the traditional solution for seamless scrolling. When the amount of data is large, the data display method in any of the above embodiments can be used to achieve smooth seamless scrolling, combining the innovative solution with the traditional solution to improve the response speed and resource utilization of the front end. Specifically, Fig. 9 As shown, Fig. 9 A flow chart of another data display method provided in an embodiment of the present application, the method comprising the following steps:

[0113] Step S301, obtaining the total amount of data to be displayed in the list of data to be displayed.

[0114] The electronic device can obtain the total amount of data to be displayed in the list of data to be displayed by calling a database storing the list of data to be displayed. The total amount of data can also be calculated by the position index of the data to be displayed in the list of data to be displayed. The specific implementation process is not specifically limited in this application.

[0115] Step S302, when the total amount of data is greater than or equal to the freeze amount threshold, enter the step of displaying the visible area.

[0116] The jam number threshold can be set based on experience, preferably 50 data. When the electronic device determines that the total amount of data is greater than or equal to the jam number threshold, it can enter Figure 6 In the step S101 of the embodiment shown, it can be understood that when the electronic device is determined to enter step S101, if the electronic device has not yet performed the initialization operation, it can directly enter the step S102. Figure 8 Step S201 in the illustrated embodiment.

[0117] Step S303: Move the object nodes in the first node list and the second node list toward a first direction.

[0118] Step S304: when it is detected that the target node list has been moved out of the target container, a first amount of undisplayed data to be displayed is sequentially loaded from the list of data to be displayed.

[0119] Step S305, updating each object node in the target node list according to the first amount of data to be displayed;

[0120] Step S306, moving the updated target node list to the rear adjacent position of the remaining node list, and returning to the step of moving the object nodes in the first node list and the second node list in the first direction.

[0121] Steps S302 to S306 can be found in Figure 8 Steps S206 to S210 in the illustrated embodiment are not described in detail herein.

[0122] Step S307, when the total amount of data is less than the freeze amount threshold, load each data to be displayed from the list of data to be displayed.

[0123] When the total amount of data is less than the freeze amount threshold, the electronic device will load all the data to be displayed in the list of data to be displayed at one time.

[0124] Step S308: Render each loaded data to be displayed into two object nodes respectively, and obtain two third node lists.

[0125] refer to Figures 1 to 4 , the electronic device will render each loaded data to be displayed into two identical object nodes, thereby obtaining two identical third node lists.

[0126] Step S309, any third node list is placed in the target container, and another third node list is placed adjacent to and behind any third node list, so as to move the object nodes in the two third node lists in the first direction so as to display the visible area later.

[0127] refer to Figures 1 to 4 , the electronic device will place any third node list in the two third node lists in the target container, and place the other third node list behind and adjacent to any third node list. Then move the object nodes in the two third node lists in the first direction. When one of the third node lists is moved out of the target container, the electronic device will quickly place the third node list behind and adjacent to the other one and continue to move the object nodes in the two third node lists in the first direction, and a smooth seamless scrolling effect has been achieved in the visible area. In this way, the process of dynamically loading data from the data list to be displayed can be avoided under small data volume, and the response speed of the front end can be improved.

[0128] Continue to refer Fig.10 , the electronic device will determine the number of data items (that is, the total amount of data) to see if it meets the large data volume requirement, that is, to see if the data volume (an example of the total amount of data) is less than 50 (an example of the threshold of the number of freezes). If it is less than 50, the traditional solution of loading all the data at once and double rendering all the data (that is, the original solution in the figure) is used to achieve seamless scrolling, because the amount of data at this time is too small to have a negligible impact on the performance of the browser. When the amount of data is greater than or equal to 50, the new solution is used to enter step S302 in the embodiment of the present application.

[0129] In the embodiment of the present application, when the total amount of data to be displayed in the list of data to be displayed is greater than or equal to the threshold of the number of freezes, the first node list and the second node list whose total number of internal object nodes is only the first number are moved, and the positions of the two are alternated, and the object nodes are updated to reduce the amount of data loaded and rendered to achieve smooth seamless scrolling. When the total amount of data to be displayed is less than the threshold of the number of freezes, the traditional solution of loading all the data at one time and performing double rendering on all the data is adopted to achieve smooth seamless scrolling. This allows smooth seamless scrolling to be achieved regardless of the amount of data, whether large or small.

[0130] Fig.11 This is a schematic diagram of the structure of an electronic device provided by an embodiment of the present application. Figure 6 As shown, the electronic device 6 of this embodiment includes: at least one processor 60 ( Figure 6 Only one is shown in the figure) a processor, a memory 61, and a computer program 62 stored in the memory 61 and executable on the at least one processor 60, and when the processor 60 executes the computer program 62, the steps in any of the above-mentioned method embodiments are implemented.

[0131] The electronic device 6 may be a computing device such as a desktop computer, a notebook, a PDA, or a cloud server. The electronic device may include, but is not limited to, a processor 60 and a memory 61. Those skilled in the art will appreciate that Figure 6 It is only an example of the electronic device 6 and does not constitute a limitation on the electronic device 6. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, it may also include input and output devices, network access devices, etc.

[0132] The processor 60 may be a central processing unit (CPU), or other general-purpose processors, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0133] In some embodiments, the memory 61 may be an internal storage unit of the electronic device 6, such as a hard disk or memory of the electronic device 6. In other embodiments, the memory 61 may also be an external storage device of the electronic device 6, such as a plug-in hard disk, a smart memory card (Smart Med ia Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device 6. Further, the memory 61 may also include both an internal storage unit of the electronic device 6 and an external storage device. The memory 61 is used to store an operating system, an application program, a boot loader (BootLoader), data, and other programs, such as the program code of the computer program, etc. The memory 61 may also be used to temporarily store data that has been output or is to be output.

[0134] Corresponding to the data display method described in the above embodiment, Fig.12 A structural block diagram of a data display device provided in an embodiment of the present application is shown. For ease of explanation, only the parts related to the embodiment of the present application are shown.

[0135] Reference Fig.12 , the device comprises:

[0136] The display module 100 is used to display a visible area, where the visible area includes data to be displayed corresponding to each object node in the target container;

[0137] A moving module 200 is used to move the object nodes in the first node list and the second node list to a first direction, the second node list is adjacent to the first node list, the total number of the object nodes in the first node list and the second node list is a first number, and the first number is the total amount of data that can be accommodated by the target container;

[0138] A loading module 300 is used to sequentially load a first amount of undisplayed data from a list of data to be displayed when it is detected that the target node list has been moved out of the target container, the target node list being either the first node list or the second node list;

[0139] An updating module 400, configured to update each object node in the target node list according to the first amount of data to be displayed;

[0140] The moving module 200 is also used to move the updated target node list to the rear adjacent position of the remaining node list, and return to the step of moving the object nodes in the first node list and the second node list in the first direction. The remaining node list is the node list in the first node list and the second node list that has not been moved out of the target container.

[0141] In some embodiments, the apparatus further comprises:

[0142] Before displaying the visible area, create a module to create the target container;

[0143] The loading module is further used to sequentially load a second amount of undisplayed data to be displayed starting from an initial loading position of the list of data to be displayed, the second amount being twice the first amount;

[0144] A rendering module, used for rendering the second number of data to be displayed into object nodes respectively, to obtain a second number of object nodes;

[0145] a division module, used for dividing the second number of object nodes into a first node list and a second node list according to a target order, wherein the target order is an arrangement order corresponding to the second number of data to be displayed in the list of data to be displayed;

[0146] The moving module is further used to place the first node list in the target container and place the second node list adjacent to the rear of the first node list so as to display the visible area.

[0147] In some embodiments, the device further comprises a detection module, configured to:

[0148] In the case where it is detected that the last object node in the target node list has been moved out of the target container, determining that the target node list has been moved out of the target container; or,

[0149] When it is detected that the last object node in another node list enters the target container, it is determined that the target node list has been moved out of the target container, and the other node list is the first node list and the node list in the second node list except the target node list.

[0150] In some embodiments, the device further includes, the acquisition module is further configured to:

[0151] Get the container height of the target container and the data row height of the data list to be displayed;

[0152] A first quantity is determined according to the container height and the data row height.

[0153] In some embodiments, the update module is further configured to:

[0154] Rendering the first number of to-be-displayed data into object nodes respectively to obtain the first number of object nodes;

[0155] Replace the object nodes in the target node list with the first number of object nodes.

[0156] In some embodiments, the acquisition module is further used to acquire the total amount of data to be displayed in the list of data to be displayed;

[0157] The display module is further configured to enter a step of displaying a visible area when the total amount of data is greater than or equal to a threshold of the number of freezes;

[0158] The loading module is also used to load each data to be displayed from the list of data to be displayed when the total amount of data is less than the threshold of the number of freezes;

[0159] The rendering module is further used to render each loaded data to be displayed into two object nodes respectively, so as to obtain two third node lists;

[0160] The moving module is also used to place any third node list in the target container, place another third node list behind and adjacent to any third node list, and move the object nodes in the two third node lists in the first direction so as to display the visible area later.

[0161] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0162] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0163] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0164] An embodiment of the present application provides a computer program product. When the computer program product runs on a mobile terminal, the mobile terminal can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0165] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium can at least include: any entity or device that can carry the computer program code to the camera / terminal device, recording medium, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, RandomAccess Memory), electric carrier signal, telecommunication signal and software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0166] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0167] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0168] In the embodiments provided in the present application, it should be understood that the disclosed devices / electronic devices and methods can be implemented in other ways. For example, the device / electronic device embodiments described above are merely schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0169] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0170] It should be understood that the size of the sequence number of each step in the above-described embodiment does not mean the order of execution, and the order of execution of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiment of the present application. In the description, for the purpose of explanation rather than for limitation, specific details such as specific system structure, technology and the like are proposed, so as to thoroughly understand the embodiment of the present application. However, it should be clear to those skilled in the art that the present application can also be implemented in other embodiments without these specific details. In other cases, the detailed description of well-known systems, devices, circuits and methods is omitted to prevent unnecessary details from hindering the description of the present application.

[0171] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0172] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0173] Additionally, in the specification of the present application and the description of the appended claims, the terms “include,” “comprise,” “have,” and their variations all mean “including but not limited to,” unless otherwise specifically emphasized.

[0174] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0175] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A data display method, characterized in that: include: Displaying a visible area, wherein the visible area includes data to be displayed corresponding to each object node in the target container; Move the object nodes in the first node list and the second node list toward a first direction, wherein the second node list is adjacent to the first node list, and the total number of the object nodes in the first node list and the second node list is both a first number, and the first number is the total amount of data that the target container can accommodate; When it is detected that the target node list has been moved out of the target container, sequentially loading a first amount of undisplayed data to be displayed from a list of data to be displayed, wherein the target node list is either the first node list or the second node list; updating each object node in the target node list according to the first amount of data to be displayed; Move the updated target node list to the rear adjacent position of the remaining node list, and return to the step of moving the object nodes in the first node list and the second node list in the first direction, wherein the remaining node list is a list of nodes in the first node list and the second node list that have not been moved out of the target container.

2. The method according to claim 1, characterized in that Before showing the visible area, also include: Creating the target container; sequentially loading a second amount of undisplayed data to be displayed starting from an initial loading position of the list of data to be displayed, the second amount being twice the first amount; Rendering the second number of data to be displayed as object nodes respectively to obtain a second number of object nodes; Dividing the second number of object nodes into the first node list and the second node list according to a target order, wherein the target order is an arrangement order corresponding to the second number of data to be displayed in the data to be displayed list; The first node list is placed in the target container, and the second node list is placed adjacent to the rear of the first node list so as to display the visible area.

3. The method according to claim 1, characterized in that In the case where it is detected that the target node list has been moved out of the target container, before sequentially loading the first amount of undisplayed data to be displayed from the list of data to be displayed, the method further includes: In the case where it is detected that the last object node in the target node list has been moved out of the target container, determining that the target node list has been moved out of the target container; or, When it is detected that the last object node in another node list enters the target container, it is determined that the target node list has been moved out of the target container, and the other node list is the first node list and the second node list except the target node list.

4. The method according to any one of claims 1 to 3, characterized in that: Before sequentially loading the first amount of undisplayed data to be displayed from the list of data to be displayed, the method further includes: Obtaining the container height of the target container and the data row height of the list of data to be displayed; The first quantity is determined according to the container height and the data row height.

5. The method according to claim 4, characterized in that The updating of each object node in the target node list according to the first amount of data to be displayed includes: Rendering the first number of data to be displayed as object nodes respectively to obtain a first number of object nodes; The object nodes in the target node list are replaced with the first number of object nodes.

6. The method according to claim 1, characterized in that Before displaying the visible area, the method further includes: Obtaining the total amount of data to be displayed in the list of data to be displayed; When the total amount of data is greater than or equal to the freeze amount threshold, entering the display visible area; When the total amount of data is less than the freeze number threshold, loading each to-be-displayed data from the to-be-displayed data list; Render each loaded data to be displayed into two object nodes respectively, and obtain two third node lists; Placing any third node list in the target container and placing another third node list adjacent to and behind any third node list is used to move the object nodes in the two third node lists in the first direction so as to subsequently display the visible area.

7. A data display device, characterized in that: include: A display module, used for displaying a visible area, wherein the visible area includes data to be displayed corresponding to each object node in the target container; A moving module, used for moving object nodes in a first node list and a second node list toward a first direction, wherein the second node list is adjacent to the first node list, and the total number of object nodes in the first node list and the second node list is a first number, and the first number is the total amount of data that the target container can accommodate; a loading module, configured to sequentially load a first amount of undisplayed data to be displayed from a list of data to be displayed when it is detected that a target node list has been moved out of the target container, wherein the target node list is either the first node list or the second node list; An updating module, configured to update each object node in the target node list according to the first amount of data to be displayed; The moving module is also used to move the updated target node list to the rear adjacent position of the remaining node list, and return to the step of moving the object nodes in the first node list and the second node list in the first direction, and the remaining node list is the node list of the first node list and the second node list that has not been moved out of the target container.

8. An electronic device, characterized in that: The electronic device comprises a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the electronic device implements the data display method according to any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the data display method according to any one of claims 1 to 6 is implemented.

10. A computer program product, characterized in that The invention comprises a computer program, which enables the data display method according to any one of claims 1 to 6 to be executed when the computer program is executed.

Images