List data display method and device

Abstract

The invention relates to a list data display method and device, and the method comprises the steps: detecting a rolling event of a target container, and updating the height of a target scroll bar based on the rolling event; determining to-be-displayed list data based on the height of the target scroll bar, and rendering the to-be-displayed list data; and when rendering of the to-be-displayed list data is completed, displaying the rendered to-be-displayed list data in a visual area of the target container. In this way, the white screen phenomenon caused by the fact that the to-be-displayed data cannot be displayed in time due to the fact that the scroll bar moves rapidly or the data size of the to-be-displayed list data is large can be well avoided, and then the list data display efficiency can be improved.

Description

Technical Field

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

[0002] With the continuous development of technology, it is often necessary to display data information in a computer, and the data information is usually displayed through table data with multiple rows and columns.

[0003] When displaying list data in the related technology, if the user quickly moves the scroll bar in the page, the list data to be displayed in the display window may not be rendered in time, resulting in a white screen phenomenon. Summary of the invention

[0004] The present disclosure provides a method and device for displaying list data.

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

[0006] Detecting a scroll event of the target container, and updating the height of the target scroll bar based on the scroll event;

[0007] Determine the list data to be displayed based on the height of the target scroll bar, and render the list data to be displayed;

[0008] When the rendering of the to-be-displayed list data is completed, the rendered to-be-displayed list data is displayed in the visible area of ​​the target container.

[0009] According to a second aspect of the present disclosure, a table data display device is provided, the device comprising:

[0010] A height update module, used to detect a scrolling event of a target container and update the height of a target scroll bar based on the scrolling event;

[0011] A data rendering module, used for determining the list data to be displayed based on the height of the target scroll bar, and rendering the list data to be displayed;

[0012] The data display module is used to display the rendered list data to be displayed in the visible area of ​​the target container when the rendering of the list data to be displayed is completed.

[0013] According to a third aspect of the present disclosure, an electronic device is provided, which includes a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the program, the method described above is implemented.

[0014] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the above method of the present disclosure is implemented.

[0015] According to a fifth aspect of the present disclosure, a computer program product is provided, including a computer program, wherein the computer program implements the above method of the present disclosure when executed by a processor.

[0016] The list data display method and device provided by the embodiments of the present disclosure can obtain the list data to be displayed in the visible area by obtaining the position of the scroll bar when the scroll bar is detected to be scrolling, and render the list data to be displayed. When the rendering of the list data to be displayed is completed, the rendered list data to be displayed is displayed in the visible area. In this way, a white screen phenomenon caused by the inability to display the list data in time due to reasons such as the rapid movement of the scroll bar or the large amount of the list data to be displayed can be avoided, thereby improving the display efficiency of the list data. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Further details, features and advantages of the present disclosure are disclosed in the following description of exemplary embodiments in conjunction with the accompanying drawings, in which:

[0018] Figure 1 A schematic diagram of a target container provided for an exemplary embodiment of the present disclosure;

[0019] Figure 2 A schematic diagram of a scenario provided for an exemplary embodiment of the present disclosure;

[0020] Figure 3 Another schematic diagram of a scenario provided for an exemplary embodiment of the present disclosure;

[0021] Figure 4 A flowchart of a method for displaying list data provided by an exemplary embodiment of the present disclosure;

[0022] Figure 5 A schematic block diagram of functional modules of a list data display device provided by an exemplary embodiment of the present disclosure;

[0023] Figure 6 A structural block diagram of an electronic device provided for an exemplary embodiment of the present disclosure;

[0024] Figure 7 A structural block diagram of a computer system provided for an exemplary embodiment of the present disclosure. DETAILED DESCRIPTION

[0025] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0026] It should be understood that the various steps described in the method embodiments of the present disclosure may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0027] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions of other terms will be given in the description below. It should be noted that the concepts of "first", "second", etc. mentioned in this disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0028] It should be noted that the modifications of "one" and "plurality" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0029] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0030] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.

[0031] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.

[0032] As an optional but non-limiting implementation, in response to receiving an active request from the user, the method of sending a prompt message to the user may be, for example, a pop-up window, in which the prompt message may be presented in text. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device. It is understandable that the above notification and the process of obtaining user authorization are only illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0033] In some scenarios, it is usually not possible to use paging to load list data. This kind of list data can be called long list data. When displaying data lists, the related technology usually uses the Vue framework, which is a progressive JavaScript framework for building user interfaces. However, when using the Vue framework, it is necessary to manage DOM (Document Object Model) operations and add additional information to ensure the synchronization of data and interface.

[0034] Virtual scrolling is a common rendering optimization method in web programming, which is used to display large amounts of list data. When the amount of data is large, if a large number of DOM nodes are inserted into the browser, the browser rendering workload will be too large and the loading will be slow. Virtual scrolling speeds up the browser rendering by calculating the current visible area and only loading the nodes in the visible area.

[0035] The core principle of virtual scrolling is on-demand rendering. The height of each element of the list data is predictable. After the container height is given, the position of the scroll bar can be used to calculate the elements in the visible area and render these elements. At the same time, placeholder elements are added at the top and bottom of the element to maintain the position of the scroll bar. Detect the scroll event of the container, obtain the rendering list of the new visible area, update the list content and the placeholder height at the top and bottom, and achieve the virtual scrolling effect.

[0036] However, when the amount of list data to be displayed is large, a white screen will appear when the scroll bar is moved quickly, and due to the limitations of the browser interface, the maximum height of the virtual scroll will be limited, usually not exceeding 16777216 pixels. If it exceeds, a white screen will appear and the list data cannot be displayed normally, which seriously limits the browser's display of massive data.

[0037] Therefore, in order to solve the above technical problems, the embodiment of the present disclosure obtains list data, loads the list data through the browser, and determines the list data that needs to be displayed in the display window of the browser by detecting the position of the scroll bar in the browser. In the embodiment, the list data displayed in the display window can be used as the list data to be displayed. The browser can specifically include a target container, the target container includes a scroll bar and a display window, and the display window can be a visible area in the target container for displaying the list data to be displayed.

[0038] By establishing a correspondence between the scroll bar and the list data, the list data to be displayed can be determined by the position of the scroll bar. For example, by obtaining the height of the visible area and the fixed height of the list items of the list data to be displayed, it is possible to determine how many rows of list data can be displayed in the visible area of ​​the target container, so that a correspondence between the position of the scroll bar and the list data to be displayed in the visible area of ​​the target container can be established, and the position of the virtual scroll bar can be determined by the current height of the scroll bar.

[0039] In the related art, since the scroll bar is directly associated with the list data to be displayed in the visible area, that is, the data to be displayed will be directly displayed in the visible area according to the user's sliding operation on the scroll bar. Once the list data to be displayed is not rendered in time due to reasons such as a large amount of list data to be displayed, the data to be displayed cannot be displayed normally in the visible area, resulting in a white screen phenomenon.

[0040] Therefore, when the embodiment of the present disclosure detects that the scroll bar is scrolling, it obtains the position of the scroll bar, obtains the list data to be displayed in the visible area, and renders the list data to be displayed. When the rendering of the list data to be displayed is completed, the rendered list data to be displayed is displayed in the visible area. This can effectively avoid the white screen phenomenon caused by the inability to display the data to be displayed in time due to the rapid movement of the scroll bar or the large amount of data in the list data to be displayed, thereby improving the display efficiency of the list data.

[0041] In an embodiment, the scroll bar may also be independent of the target container, such as Figure 1 As shown, Figure 1 A schematic diagram of a target container provided in accordance with an embodiment of the present disclosure. Figure 1 An independent scroll bar 12 which is independent of the target container is arranged on the right side of the target container 11.

[0042] Specifically, you can use CSS (Cascading Style Sheets) OverflowY:hidden to hide the scroll bar of the target container, add an independent scroll container on the right side of the container to serve as the scroll bar, add a 1-pixel div child element inside the scroll bar, and use the total height of the virtual element when the total height of the virtual scroll element does not exceed the browser limit of 16777216 pixels; otherwise, use the maximum height of 16777216 pixels.

[0043] In an embodiment, the mouse scrolling event onwheel of the target container can be detected, the value of the mouse scrolling can be calculated, and then the scrollTop value of the scroll bar can be updated. The scrollTop value is the height of the scroll bar. In this way, by detecting the scrolling event of the scroll bar, the proportion of the height of the invisible area at the top of the scroll bar can be calculated. The precent can be calculated by the following formula (1):

[0044] percent = scrollbar.scrollTop / (scrollbar.scrollHeight -scrollbar.clientHeight) (1)

[0045] Among them, percent represents the proportion of the height of the invisible area at the top of the scroll bar, scrollbar.scrollTop represents the current height of the scroll bar, scrollbar.scrollHeight represents the total height inside the target container, and scrollbar.clientHeight represents the sum of the visible height inside the target container and the padding height of the target container itself. The padding represents the space height between the element border and the element content in the target container.

[0046] By multiplying the proportion of the height of the invisible area at the top of the scroll bar by the height of the scrolling content, the height scrollTop of the invisible area at the top of the target container can be obtained.

[0047] like Figure 2 As shown, Figure 2 A schematic diagram of a scenario provided for an embodiment of the present disclosure. The height range of the visible area of ​​the target container is [scrollTop, scrollTop+containerHeight], where containerHeight represents the height of the target container, that is, the height of the visible area. According to the height of each item in the list, the elements to be displayed and the placeholder elements at the top and bottom can be calculated, thereby achieving a virtual scrolling effect. Figure 2 The rendering element in can be the list data displayed in the visual area after rendering.

[0048] like Figure 3 As shown, Figure 3 Another schematic diagram of a scenario provided by an embodiment of the present disclosure. Figure 3 As shown, when the height of the scroll bar is too large, the height limit of the browser will be triggered. At this time, the theoretical scrollTop can be adjusted. When the theoretical scrollTop>16777216 pixels, take scrollTop=16777216, and synchronously adjust the height of the top area to reduce the placeholder, and adjust the theoretical placeholder to the actual placeholder, that is, reduce the value to scrollTop-16777216, so that the scroll position can be kept relatively unchanged. When scrollTop is not less than 16777216 pixels, take the actual value of scrollTop. The embodiment calculates scrollTop, calls the browser's DOM API (Application Programming Interface), and sets the top scrolling distance of the target container to achieve synchronization of the scrolling position.

[0049] The embodiment can also obtain the list data to be displayed in the top placeholder or the bottom placeholder, and pre-render the list data so that the scroll bar is rendered in advance during the scrolling process through pre-rendering, thereby speeding up the rendering speed of the list data to be displayed in the visible area.

[0050] Specifically, in the embodiment, by obtaining the scrolling direction and scrolling speed of the scroll bar, the list data that will be displayed in the visible area can be predicted, and the list data can be pre-rendered. The rendering speed of the pre-rendering of the list data can be positively correlated with the scrolling speed of the scroll bar, that is, the faster the scroll bar scrolls, the faster the pre-rendering speed is. For example, when the direction of the scroll bar is scrolling downward, the corresponding list data in the bottom placeholder can be pre-rendered; when the direction of the scroll bar is scrolling upward, the corresponding list data in the top placeholder can be pre-rendered. In this way, according to the scrolling of the scroll bar, the list data that needs to be displayed in the visible area can be directly displayed because it has been pre-rendered, avoiding the problem of display delay caused by rendering when it is needed.

[0051] The disclosed embodiment uses a scroll bar independent of the target container and displays the height of the scroll bar while reducing the top space, thus breaking through the limitation of the virtual scroll content in the browser not exceeding 16777216 pixels, so that a larger amount of data can be displayed. By detecting the scroll event of the scroll bar, the list data to be displayed in the visible area is obtained, and the list data to be displayed is rendered, and displayed in the visible area when the rendering is completed, thereby avoiding the white screen phenomenon caused by the scroll bar scrolling too fast or the large amount of data to be displayed, which cannot be rendered in time.

[0052] Based on the above embodiments, the present disclosure also provides a method for displaying list data. Figure 4 As shown, the method may include the following steps:

[0053] In step S410, a scroll event of the target container is detected, and the height of the target scroll bar is updated based on the scroll event.

[0054] In an embodiment, the target container can be used to display list data. Usually, the list data is large and cannot be fully displayed in the visible area of ​​the target container. At this time, the user needs to scroll the mouse or drag the scroll bar to control the scroll bar to move up and down.

[0055] When the user controls the scroll bar to move, the height of the scroll bar can be continuously updated by detecting the scroll event of the target container. By obtaining the height of the scroll bar, the list data that needs to be displayed in the visible area of ​​the target container can be determined, which is convenient for rendering the list data.

[0056] In step S420, the list data to be displayed is determined based on the height of the target scroll bar, and the list data to be displayed is rendered.

[0057] In the embodiment, after obtaining the list data, a correspondence between the scroll bar and the list data to be displayed in the list data can be established, and the list data to be displayed that needs to be displayed can be determined by the position of the scroll bar. For example, by obtaining the height of the visible area and the fixed height of the list items of the list data to be displayed, it can be determined how many rows of list data can be displayed in the visible area of ​​the target container, so that a correspondence between the position of the scroll bar and the list data to be displayed that needs to be displayed in the visible area of ​​the target container can be established, and the position of the virtual scroll bar can be determined by the current height of the scroll bar.

[0058] In step S430, when the rendering of the list data to be displayed is completed, the rendered list data to be displayed is displayed in the visible area of ​​the target container.

[0059] The list data display method provided by the embodiment of the present disclosure can obtain the list data to be displayed in the visible area by obtaining the position of the scroll bar when the scroll bar is detected to be scrolling, and render the list data to be displayed. When the rendering of the list data to be displayed is completed, the rendered list data to be displayed is displayed in the visible area. In this way, a white screen phenomenon caused by the inability to display the data to be displayed in time due to reasons such as the rapid movement of the scroll bar or the large amount of the list data to be displayed can be avoided, thereby improving the display efficiency of the list data.

[0060] Based on the above embodiment, in another embodiment provided by the present disclosure, the method may further include the following steps:

[0061] In step S440, a first scroll bar in the target container is obtained, and the first scroll bar is hidden.

[0062] In the embodiment, the first scroll bar is a scroll bar that comes with the target container. When the user controls the first scroll bar to move, the visible area of ​​the target container will display the list data to be displayed in real time. However, if the first scroll bar moves too fast or the list data to be displayed is large, the rendering speed of the list data to be displayed cannot keep up with the moving speed of the first scroll bar, and a white screen phenomenon will appear. Therefore, the embodiment of the present disclosure hides the first scroll bar that comes with the target container, and sets a second scroll bar that is independent of the target container.

[0063] In step S450, a second scroll bar is set at a target position of the target container, and the second scroll bar is used as a target scroll bar; wherein the second scroll bar is independent of the target container.

[0064] In the embodiment, by hiding the scroll bar of the target container and setting a target scroll bar independent of the target container, it is easier to establish a corresponding relationship between the target scroll bar and the list data to be displayed in the list data, and the list data to be displayed can be determined by the position of the target scroll bar. In this way, after the rendering of the list data to be displayed is completed, the list data to be displayed after the rendering is completed can be displayed in the visible area, avoiding the white screen phenomenon caused by displaying before the rendering is completed.

[0065] In addition, since the scroll bar of the container is limited by the maximum height of the browser, the container cannot load larger list data. By setting a scroll bar independent of the container, the maximum height limit of the browser can be broken, and larger list data can be loaded.

[0066] Specifically, the current height of the target scroll bar can be obtained, and when the current height of the target scroll bar is greater than the preset height, the current height of the target scroll bar is set to the preset height, which can be the maximum height limit of the browser, such as 16777216 pixels. For example, when the current height of the target scroll bar is greater than 16777216 pixels, the current height of the target scroll bar is taken as 16777216. In this way, the limitation of the maximum height of the browser, such as 16777216 pixels, can be broken, and virtual scrolling of massive content can be realized, so that a higher level of list content can be displayed.

[0067] In the embodiment, when the current height of the target scroll bar is greater than the preset height, the height of the top place-taking area of ​​the target container can also be obtained, and the height of the top place-taking area can be adjusted based on the current height of the target scroll bar and the preset height. For example, when the current height of the target scroll bar is greater than 16777216 pixels, the height of the top place-taking area is synchronously adjusted and reduced, and the reduction value is the current height of the target scroll bar minus the preset height, that is, the current height of the target scroll bar minus 16777216, so that the position of the scroll bar can be kept relatively unchanged.

[0068] In addition, when the current height of the target scroll bar is not less than 16777216 pixels, the current actual value of the current height of the target scroll bar can be used. The embodiment can achieve synchronization of the scroll position by calculating the current height of the target scroll bar, calling the DOM API of the browser, and setting the top scroll distance of the target container.

[0069] Based on the above embodiments, the embodiments provided by the present disclosure may further include the following steps:

[0070] In step S460, the height of the top invisible area of ​​the target scroll bar and the height of the target container are obtained.

[0071] In step S470 , the visible area of ​​the target container is determined based on the height of the top invisible area and the height of the target container.

[0072] In the embodiments provided by the present disclosure, the visible area of ​​the target container can be determined by referring to the above formula (1) and the corresponding embodiments. The visible area of ​​the target container is [scrollTop, scrollTop+containerHeight], where containerHeight represents the height of the target container, that is, the height of the visible area. According to the height of each item in the list, the list data that needs to be rendered and displayed can be determined. And by calculating the elements that need to be displayed, as well as the placeholder elements at the top and bottom, a virtual scrolling effect is achieved.

[0073] In the embodiments provided by the present disclosure, based on the above embodiments, the top placeholder area and the bottom placeholder area of ​​the target container can also be determined based on the visible area; the list item height of the list data is obtained, and the list data to be displayed in the visible area is determined based on the list item height, and the pre-rendered list data in the top placeholder area and the bottom placeholder area are determined based on the list item height; and the pre-rendered list data is pre-rendered.

[0074] In an embodiment, the pre-rendered list data in the top placeholder area and the bottom placeholder area may be rendered in advance, and when the scroll bar scrolls, the display of the list data may be accelerated, the delay in displaying the list data may be reduced, and the display efficiency of the list data may be improved.

[0075] For example, in the embodiment, by obtaining the scrolling direction and scrolling speed of the scroll bar, the list data that will be displayed in the visible area can be predicted, and the list data can be pre-rendered. For example, when the scroll bar is scrolling downward, the corresponding list data in the bottom placeholder can be pre-rendered; when the scroll bar is scrolling upward, the corresponding list data in the top placeholder can be pre-rendered. In this way, according to the scroll bar scrolling, the list data that needs to be displayed in the visible area can be directly displayed because it has been pre-rendered, avoiding the display delay problem caused by rendering when it is needed.

[0076] In addition, the rendering speed of pre-rendering these list data can be positively correlated with the scrolling speed of the scroll bar, that is, the faster the scroll bar scrolls, the faster the pre-rendering speed. In this way, the real-time display of the list data to be displayed can be achieved in the visible area of ​​the target container, thereby ensuring the fast display of the data to be displayed while avoiding the white screen phenomenon caused by the rendering speed not keeping up with the scrolling speed of the scroll bar.

[0077] In the case of dividing each functional module according to each function, an embodiment of the present disclosure provides a list data display device, which may be a server, a terminal, or a chip applied to a server. Figure 5 This is a schematic block diagram of the functional modules of a list data display device provided by an exemplary embodiment of the present disclosure. Figure 5 As shown, the list data display device includes:

[0078] A height updating module 10, used for detecting a scrolling event of a target container and updating the height of a target scroll bar based on the scrolling event;

[0079] A data rendering module 20, used to determine the list data to be displayed based on the height of the target scroll bar, and render the list data to be displayed;

[0080] The data display module 30 is used to display the rendered list data to be displayed in the visible area of ​​the target container when the rendering of the list data to be displayed is completed.

[0081] In another embodiment provided by the present disclosure, the device further includes:

[0082] A scroll bar hiding module, used for acquiring a first scroll bar in a target container and hiding the first scroll bar;

[0083] The scroll bar setting module is used to set a second scroll bar at a target position of the target container and use the second scroll bar as the target scroll bar; wherein the second scroll bar is independent of the target container.

[0084] In another embodiment provided by the present disclosure, the device further includes:

[0085] A scroll bar height acquisition module, used to acquire the current height of the target scroll bar;

[0086] The scroll bar height setting module is used to set the current height of the target scroll bar to the preset height when the current height of the target scroll bar is greater than the preset height.

[0087] In another embodiment provided by the present disclosure, the device further includes:

[0088] A placeholder area height acquisition module, used to acquire the height of the top placeholder area of ​​the target container;

[0089] The placeholder area height adjustment module is used to adjust the height of the top placeholder area based on the current height of the target scroll bar and the preset height.

[0090] In another embodiment provided by the present disclosure, the device further includes a visible area determination module, which is specifically configured to:

[0091] Get the height of the top invisible area of ​​the target scroll bar and the height of the target container;

[0092] The visible area of ​​the target container is determined based on the height of the top invisible area and the height of the target container.

[0093] In another embodiment provided by the present disclosure, the device further includes a pre-rendering module, specifically configured to:

[0094] Determine a top placeholder area and a bottom placeholder area of ​​the target container based on the visible area;

[0095] The list item height of the list data is obtained, and the list data to be displayed in the visible area is determined based on the list item height, and the pre-rendered list data in the top placeholder area and the bottom placeholder area are determined based on the list item height.

[0096] The pre-rendering list data is pre-rendered.

[0097] The list data display device provided by the embodiment of the present disclosure can obtain the list data to be displayed in the visible area by obtaining the position of the scroll bar when the scroll bar is detected to be scrolling, and render the list data to be displayed. When the rendering of the list data to be displayed is completed, the rendered list data to be displayed is displayed in the visible area. This can effectively avoid the white screen phenomenon caused by the inability to display the data to be displayed in time due to reasons such as the rapid movement of the scroll bar or the large amount of data in the list data to be displayed, thereby improving the display efficiency of the list data.

[0098] An embodiment of the present disclosure also provides an electronic device, comprising: at least one processor; and a memory for storing instructions executable by the at least one processor; wherein the at least one processor is configured to execute the instructions to implement the above method disclosed in the embodiment of the present disclosure.

[0099] Figure 6 The structure diagram of an electronic device provided by an exemplary embodiment of the present disclosure is shown in FIG. Figure 6 As shown, the electronic device 1800 includes at least one processor 1801 and a memory 1802 coupled to the processor 1801 , and the processor 1801 can execute corresponding steps in the above method disclosed in the embodiment of the present disclosure.

[0100] The processor 1801 may also be referred to as a central processing unit (CPU), which may be an integrated circuit chip having signal processing capabilities. Each step in the method disclosed in the embodiment of the present disclosure may be completed by an integrated logic circuit of hardware in the processor 1801 or by instructions in the form of software. The processor 1801 may be a general-purpose processor, a digital signal processor (DSP), an ASIC (Application Specific Integrated Circuit), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. A general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in the embodiment of the present disclosure may be directly embodied as being executed by a hardware decoding processor, or may be executed by a combination of hardware and software modules in a decoding processor. The software module may be located in a memory 1802, such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, or other mature storage media in the art. The processor 1801 reads the information in the memory 1802 and completes the steps of the method in combination with its hardware.

[0101] In addition, when various operations / processes according to the present disclosure are implemented by software and / or firmware, they can be transmitted from a storage medium or a network to a computer system having a dedicated hardware structure, such as Figure 7 The computer system 1900 shown is installed with the programs constituting the software. When the various programs are installed, the computer system can perform various functions, including the functions described above. Figure 7A structural block diagram of a computer system provided for an exemplary embodiment of the present disclosure.

[0102] Computer system 1900 is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0103] like Figure 7 As shown, the computer system 1900 includes a computing unit 1901, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 1902 or a computer program loaded from a storage unit 1908 to a random access memory (RAM) 1903. In the RAM 1903, various programs and data required for the operation of the computer system 1900 can also be stored. The computing unit 1901, the ROM 1902, and the RAM 1903 are connected to each other via a bus 1904. An input / output (I / O) interface 1905 is also connected to the bus 1904.

[0104] A plurality of components in the computer system 1900 are connected to the I / O interface 1905, including: an input unit 1906, an output unit 1907, a storage unit 1908, and a communication unit 1909. The input unit 1906 may be any type of device capable of inputting information to the computer system 1900, and the input unit 1906 may receive input digital or character information, and generate key signal inputs related to user settings and / or function control of the electronic device. The output unit 1907 may be any type of device capable of presenting information, and may include, but is not limited to, a display, a speaker, a video / audio output terminal, a vibrator, and / or a printer. The storage unit 1908 may include, but is not limited to, a disk, an optical disk. The communication unit 1909 allows the computer system 1900 to exchange information / data with other devices over a network such as the Internet, and may include, but is not limited to, a modem, a network card, an infrared communication device, a wireless communication transceiver, and / or a chipset, such as a Bluetooth™ device, a WiFi device, a WiMax device, a cellular communication device, and / or the like.

[0105] The computing unit 1901 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 1901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 1901 performs the various methods and processes described above. For example, in some embodiments, the above methods disclosed in the embodiments of the present disclosure may be implemented as a computer software program, which is tangibly included in a machine-readable medium, such as a storage unit 1908. In some embodiments, part or all of the computer program may be loaded and / or installed on an electronic device via ROM 1902 and / or communication unit 1909. In some embodiments, the computing unit 1901 may be configured to perform the above methods disclosed in the embodiments of the present disclosure in any other appropriate manner (e.g., by means of firmware).

[0106] The embodiment of the present disclosure further provides a computer-readable storage medium, wherein 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 above method disclosed in the embodiment of the present disclosure.

[0107] The computer-readable storage medium in the disclosed embodiments may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. The computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or equipment, or any suitable combination of the foregoing. More specifically, the computer-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0108] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0109] The embodiments of the present disclosure further provide a computer program product, including a computer program, wherein when the computer program is executed by a processor, the above method disclosed in the embodiments of the present disclosure is implemented.

[0110] In embodiments of the present disclosure, computer program codes for performing the operations of the present disclosure may be written in one or more programming languages ​​or combinations thereof, including but not limited to object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" language or similar programming languages. The program code may be executed entirely on a user's computer, partially on a user's computer, as an independent software package, partially on a user's computer, partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer.

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

[0112] The modules, components or units involved in the embodiments described in the present disclosure may be implemented by software or hardware, wherein the names of the modules, components or units do not, in some cases, limit the modules, components or units themselves.

[0113] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chip (SOCs), complex programmable logic devices (CPLDs), and the like.

[0114] The above descriptions are only some embodiments of the present disclosure and an explanation of the technical principles used. Those skilled in the art should understand that the scope of disclosure involved in the present disclosure is not limited to the technical solutions formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosed concept. For example, a technical solution formed by replacing the above features with the technical features with similar functions disclosed in the present disclosure (but not limited to).

[0115] Although some specific embodiments of the present disclosure have been described in detail by way of example, it should be understood by those skilled in the art that the above examples are for illustration only and are not intended to limit the scope of the present disclosure. It should be understood by those skilled in the art that the above embodiments may be modified without departing from the scope and spirit of the present disclosure. The scope of the present disclosure is defined by the appended claims.

Claims

1. A method for displaying list data, characterized in that: The method comprises: Detecting a scroll event of the target container, and updating the height of the target scroll bar based on the scroll event; Determine the list data to be displayed based on the height of the target scroll bar, and render the list data to be displayed; When the rendering of the to-be-displayed list data is completed, the rendered to-be-displayed list data is displayed in the visible area of ​​the target container.

2. The method according to claim 1, characterized in that The method further comprises: Obtain a first scroll bar in the target container, and hide the first scroll bar; A second scroll bar is set at a target position of the target container, and the second scroll bar is used as the target scroll bar; wherein the second scroll bar is independent of the target container.

3. The method according to claim 2, characterized in that The method further comprises: Get the current height of the target scroll bar; When the current height of the target scroll bar is greater than the preset height, the current height of the target scroll bar is set to the preset height.

4. The method according to claim 3, characterized in that The method further comprises: Get the height of the top placeholder area of ​​the target container; The height of the top placeholder area is adjusted based on the current height of the target scroll bar and the preset height.

5. The method according to claim 2, characterized in that: The method further comprises: Get the height of the top invisible area of ​​the target scroll bar and the height of the target container; The visible area of ​​the target container is determined based on the height of the top invisible area and the height of the target container.

6. The method according to claim 5, characterized in that The method further comprises: Determine a top placeholder area and a bottom placeholder area of ​​the target container based on the visible area; Acquire the list item height of the list data, and determine the list data to be displayed in the visible area based on the list item height, and determine the pre-rendered list data in the top placeholder area and the bottom placeholder area respectively based on the list item height; The pre-rendering list data is pre-rendered.

7. A list data display device, characterized in that: The device comprises: A height update module, used to detect a scrolling event of a target container and update the height of a target scroll bar based on the scrolling event; A data rendering module, used for determining the list data to be displayed based on the height of the target scroll bar, and rendering the list data to be displayed; The data display module is used to display the rendered list data to be displayed in the visible area of ​​the target container when the rendering of the list data to be displayed is completed.

8. An electronic device, characterized in that: include: at least one processor; a memory for storing the at least one processor-executable instruction; The at least one processor is configured to execute the instructions to implement the method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to perform the method as claimed in any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises a computer program, which implements the method according to any one of claims 1 to 6 when being executed by a processor.

Images