Virtual scrolling display method and device, storage medium, computer program product

Abstract

The application provides a virtual scrolling display method and device, a storage medium and a computer program product. The virtual scrolling display method comprises the following steps: in response to a first operation of a user, loading a target component; in response to enabling virtual scrolling, monitoring a position relationship between a target element wrapped by the target component and a viewport, the position relationship comprising that the target element is about to enter the viewport or the target element is about to leave the viewport; and determining whether to render the target element according to the position relationship. The application provides a scheme capable of flexibly realizing virtual scrolling, so as to realize rendering of different types of form elements.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a virtual scrolling display method and apparatus, storage medium, and computer program product. Background Technology

[0002] In modern web applications, rendering lists with large amounts of data is a common requirement. List rendering is an operation that dynamically transforms a data set into user interface elements, mainly used to efficiently display structured data on web pages or applications.

[0003] Traditional rendering methods load all data into the Document Object Model (DOM) at once, leading to performance issues such as slow page loading and stuttering scrolling. To address these problems, virtual scrolling technology was developed. Virtual scrolling renders only the data items within the current viewport; data items outside the viewport are simplified by using blank placeholder elements (such as divs) to simulate their actual height, maintaining scrollbar accuracy. This significantly reduces the number of DOM nodes, thereby improving rendering performance and scrolling smoothness.

[0004] However, in real-world applications, form elements are diverse, and the existing virtual scrolling technology has a single virtual strategy, which cannot meet specific needs. Summary of the Invention

[0005] This application provides a flexible solution for implementing virtual scrolling, enabling the rendering of different types of form elements.

[0006] To achieve the above objectives, this application provides the following technical solution:

[0007] In a first aspect, a virtual scrolling display method is provided, which is applied to a terminal device, a chip in a terminal device, or a chip module. The virtual scrolling display method includes: in response to a first operation by a user, loading a target component, the target component including at least one nested component; in response to enabling virtual scrolling, monitoring the positional relationship between a target element wrapped by the target component and a viewport, the positional relationship including whether the target element is about to enter the viewport or whether the target element is about to leave the viewport; determining whether to render the target element based on the positional relationship; wherein, monitoring the positional relationship between the target element wrapped by the target component and the viewport includes: creating a second observation instance of the target component and running the second observation instance, the second observation instance being used to monitor the positional relationship between the overall target element wrapped by the at least one nested component and the viewport as a monitoring result; determining whether to create a third observation instance for each nested component based on the monitoring result, the third observation instance being used to monitor the positional relationship between the target element wrapped by each nested component and the viewport.

[0008] Optionally, monitoring the positional relationship between the target element enclosed by the target component and the viewport includes: monitoring at least one of the following: the distance between the target element and the viewport, whether the target element and the viewport intersect, and the proportion of the intersection between the target element and the viewport, as the positional relationship.

[0009] Optionally, determining whether to render the target element based on the positional relationship includes: rendering the target element in response to the target element about to enter the viewport and the distance between the target element and the top of the viewport being less than a first threshold; or, replacing the target element with a blank placeholder element in response to the target element leaving the viewport and the distance between the target element and the bottom of the viewport being less than a second threshold.

[0010] Optionally, monitoring the positional relationship between the target element wrapped by the target component and the viewport includes: creating a first observation instance of the target component and running the first observation instance, wherein the first observation instance is used to monitor the positional relationship.

[0011] Optionally, determining whether to create a third observation instance for each nested component based on the monitoring result includes: creating the third observation instance for each nested target component in response to the overall target element about to enter the viewport; or, deregistering the third observation instance for each nested target component in response to the overall target element about to leave the viewport.

[0012] Optionally, before monitoring the positional relationship between the target element wrapped by the target component and the viewport, the method further includes: determining the type of the target element; and, in response to the target element being of a type requiring integrity verification, rendering the target element in its entirety.

[0013] Secondly, this application also discloses a virtual scrolling display device, comprising: a loading module for loading a target component in response to a first user operation; a monitoring module for monitoring the positional relationship between a target element wrapped by the target component and a viewport in response to enabling virtual scrolling, the positional relationship including whether the target element is about to enter the viewport or whether the target element is about to leave the viewport; a rendering module for determining whether to render the target element based on the positional relationship; the monitoring module is further configured to create a second observation instance of the target component and run the second observation instance, the second observation instance being used to monitor the positional relationship between the overall target element wrapped by at least one nested component and the viewport as a monitoring result; and to determine whether to create a third observation instance for each nested component based on the monitoring result, the third observation instance being used to monitor the positional relationship between the target element wrapped by each nested component and the viewport.

[0014] Thirdly, a computer-readable storage medium is provided having a computer program stored thereon, the computer program being executed by a processing module to perform a method provided in the first aspect.

[0015] Fourthly, a computing device is provided, including a storage module and a processing module, wherein the storage module stores a computer program that can run on the processing module, and the processing module runs the computer program to perform a method provided in the first aspect.

[0016] Fifthly, a computer program product is provided, on which a computer program is stored, the computer program being executed by a processing module to perform a method provided in the first aspect.

[0017] Sixthly, embodiments of this application also provide a chip that stores a computer program, which, when executed by the chip, implements the steps of the above-described method.

[0018] In a seventh aspect, embodiments of this application also provide a system chip for use in a terminal. The system chip includes at least one processing module and an interface circuit. The interface circuit and the at least one processing module are interconnected via a line. The at least one processing module is used to execute instructions to perform a method provided in the first aspect.

[0019] Compared with the prior art, the technical solution of this application has the following beneficial effects:

[0020] Compared to existing technologies that require calculating distance based on height to determine whether an element has entered the viewport, which limits the element's position, this application's technical solution monitors the positional relationship between the target element wrapped by the target component and the viewport, and determines whether to render the target element based on this relationship. By directly detecting whether an element has entered the viewport, this application overcomes the positional limitations of elements within a scrolling container, enabling the rendering of elements with variable heights and meeting the needs of different application scenarios.

[0021] Furthermore, for elements requiring integrity verification, this application loads the actual element to request data even if the element is not in the viewport, thereby ensuring the integrity of the form data, avoiding verification errors, ensuring the smooth progress of data verification, and meeting the data verification needs of specific scenarios.

[0022] Furthermore, in response to the distance between the target element and the viewport being less than a first threshold, this application renders the target element. By setting the first threshold, the target element can be rendered in advance before it enters the viewport, thereby reducing the blank space seen by the user in the viewport during scrolling and improving the user experience.

[0023] Furthermore, this application first creates a second observation instance of the target component to monitor the positional relationship between the overall target element wrapped by at least one nested target component and the viewport. Based on the monitoring results of the second observation instance, it determines whether to create a third observation instance of the nested target component, thereby reducing the number of instances running simultaneously, reducing resource overhead, and improving computing performance. Attached Figure Description

[0024] Figure 1 This is a schematic diagram of a virtual scrolling technology in the prior art;

[0025] Figure 2 This is a schematic diagram of a specific application scenario of this application;

[0026] Figure 3 This is a flowchart of a virtual scrolling display method provided in an embodiment of this application;

[0027] Figure 4 This is a schematic diagram of the virtual scrolling reality interface provided in the embodiments of this application;

[0028] Figure 5 This is a flowchart illustrating a virtual scrolling display method provided in an embodiment of this application.

[0029] Figure 6 This is a schematic diagram of a component provided in an embodiment of this application;

[0030] Figure 7 This is a schematic diagram of another component provided in an embodiment of this application;

[0031] Figure 8 This is a schematic diagram of the structure of a virtual scrolling display device provided in an embodiment of this application;

[0032] Figure 9 This is a schematic diagram of the hardware structure of a virtual scrolling display device provided in an embodiment of this application. Detailed Implementation

[0033] To facilitate understanding of the technical solution of this application, a brief introduction to the relevant technologies involved in this application will be given first.

[0034] The term "form" as used in this application refers to an interactive area on a webpage used to collect user input data. It consists of inputtable controls (such as text boxes, checkboxes, buttons, etc.), and after being filled out by the user, the data is submitted to the server for processing. It is a core component in web applications that enables two-way interaction between the user and the system.

[0035] The term "element" as used in this application refers to the smallest unit that constitutes a user interface (UI).

[0036] The term "component" as used in this application refers to a reusable UI logic unit.

[0037] In this application, the viewport refers to the display area used to display rendered elements, which may specifically be a browser window, a pop-up window, etc. Specifically, the viewport is located within a scrollable container, which contains all the DOM elements of the scrollable area.

[0038] As described in the background section, in practical application scenarios, form elements are diverse, and the existing virtual scrolling technology has a single virtual strategy, which cannot meet specific needs.

[0039] Specifically, in addition to the elements that need to be processed as virtual scrolling elements, the scrolling container also contains various other elements. When the height of the virtual scrolling elements from the top of the scrolling container is not fixed, the existing technology is difficult to adapt.

[0040] Specifically, such as Figure 1 As shown, if an element within the scroll container 10 is still a certain distance from entering the viewport 20, the actual element is rendered before the element leaves the viewport. Otherwise, a low-cost placeholder (such as a commonly used empty div element) is used instead. Figure 1 The distance between the first virtual element (i.e., placeholder 1) and the top of the scrolling content is a very small fixed value. This is the premise used to calculate whether a placeholder will enter the viewport.

[0041] In form scenarios, at the top of scrolling content, such as Figure 2As shown, there may be other form elements with variable heights, such as multi-line text input boxes with self-growing heights, or dropdown lists that are sometimes shown and sometimes hidden under linkage logic. There are business linkages between form items, which have dynamic display or hiding characteristics, resulting in the height of each form item being non-fixed, etc. Therefore, it is impossible to calculate whether the virtual element is about to enter or leave the viewport.

[0042] Compared to existing technologies that require calculating distance based on height to determine whether an element has entered the viewport, which limits the element's position, the technical solution in this application monitors the positional relationship between the target element wrapped by the target component and the viewport, and determines whether to render the target element based on this relationship. This directly detects whether an element has entered the viewport, overcomes the positional limitations of elements within scrolling containers, and enables rendering of elements with variable heights, meeting the needs of different application scenarios.

[0043] This application can be used in virtual scrolling scenarios with complex page layouts such as forms.

[0044] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, specific embodiments of this application will be described in detail below with reference to the accompanying drawings.

[0045] This application provides a virtual scrolling display method, referring to... Figure 3 The following will provide a detailed explanation through specific steps.

[0046] It is understood that, in specific implementations, the virtual scrolling display method can be implemented using software programs, which run within a processing module integrated into the chip or chip module. This method can also be implemented using a combination of software and hardware; this application does not impose any limitations on this approach.

[0047] Step 301: In response to the user's first action, load the target component;

[0048] Step 302: In response to initiating virtual scrolling, monitor the positional relationship between the target element wrapped by the target component and the viewport, including whether the target element is about to enter the viewport or leave the viewport;

[0049] Step 303: Determine whether to render the target element based on its positional relationship.

[0050] It should be noted that the sequence number of each step in this embodiment does not represent a limitation on the execution order of each step.

[0051] In this embodiment, the user can perform a first operation on the display interface, such as clicking or selecting. At this point, the triggering condition is met, and the target component can be loaded. Specifically, there is a preset mapping relationship between the first operation and the target component; when the user performs the first operation, the corresponding target component is loaded. Correspondingly, if the user performs other operations, the target components corresponding to those other operations are loaded.

[0052] It should be noted that the mapping relationship between the first operation and the target component can be pre-configured, and this application does not impose any restrictions on this.

[0053] The target component contains the target element, and the target component also encapsulates specific functions for the target element.

[0054] For example, in a conditional rendering scenario, the conditional expression that triggers the condition is updated from false to true, and the target component is loaded; typical scenarios include pop-ups, collapsible panels, and access control displays. The conditional expression that triggers the condition is updated from true to false, and the target component is unloaded; typical scenarios include closing pop-ups and hiding sidebars.

[0055] For example, in a list rendering scenario, the trigger condition is when a new data item is added to the list, loading the target component; a typical scenario is dynamically loading data list items. The trigger condition is when a data item is removed from the list, unloading the target component; typical scenarios are deleting list items and filtering search results.

[0056] In this embodiment, virtual scrolling can be enabled or disabled for each element. If virtual scrolling is not enabled for the target element, the target element will be fully rendered after the target component is loaded.

[0057] Accordingly, if the target element enables virtual scrolling, the positional relationship between the target element and the viewport can be monitored, that is, whether the target element is about to enter the viewport or whether the target element is about to leave the viewport.

[0058] In the specific implementation of step 303, it is determined whether to render the target element based on the positional relationship between the target element and the viewport.

[0059] This embodiment can overcome the positional limitations of elements in a scrolling container by directly detecting whether an element enters the viewport, enabling rendering of elements with variable heights and meeting the needs of different application scenarios.

[0060] In one specific implementation, please refer to the following: Figure 4 In response to the target element 30 about to enter viewport 20 and the distance T1 between the target element and the top of viewport 20 being less than the first threshold, the target element is rendered.

[0061] This embodiment enables the target element to be rendered in advance before it enters the viewport by setting a first threshold, thereby reducing the blank space seen by the user in the viewport during scrolling and improving the user experience.

[0062] In another specific implementation, in response to the target element 40 leaving the viewport 20 and the distance T2 between the target element 40 and the bottom of the viewport 20 being less than a second threshold, a blank placeholder element is used to replace the target element.

[0063] This embodiment, by setting a first threshold, enables the replacement of the target element after it has left the viewport at a certain distance, thereby reducing the blank space seen by the user in the viewport during scrolling and improving the user experience.

[0064] Furthermore, the first threshold (i.e., the rendering threshold before entering the viewport) and the second threshold (i.e., the replacement threshold after leaving the viewport) can be dynamically adjusted based on device performance, network status, or user scrolling speed. For example, the threshold can be increased during high-speed scrolling to advance rendering, and decreased during low-speed scrolling to save resources. Specifically, threshold adaptation can be achieved through machine learning models or heuristic rules.

[0065] This embodiment improves scrolling smoothness by dynamically adjusting the threshold, avoiding blank flickering, while balancing performance and user experience.

[0066] It should be noted that the first threshold and the second threshold can be any appropriate value and can be set according to the actual application scenario. This application does not impose any restrictions on this.

[0067] In a non-limiting embodiment, at least one of the following can be monitored as positional relationship: the distance between the target element and the viewport, whether the target element and the viewport intersect, and the proportion of the intersection between the target element and the viewport.

[0068] Specifically, the positional relationship between the target element and the viewport can be characterized by at least one of the following: the distance between the target element and the viewport, whether the target element and the viewport intersect, and the proportion of the intersection. The intersection proportion is the quotient of the visible area of ​​the target element within the viewport and the total area of ​​the target element. The value range of the intersection proportion is [0,1].

[0069] In a non-limiting embodiment, a first observation instance of the target component is created and run, the first observation instance being used to monitor the positional relationship between the target element and the viewport.

[0070] Specifically, in response to enabling virtual scrolling, a first watch instance of the target component is created, passing in a callback function and configuration options. The first watch instance is invoked to begin listening for changes in the target element's visibility (e.g., entering / leaving the viewport). The callback function is executed when the target element's visibility changes (e.g., entering / leaving the viewport), returning an array of objects.

[0071] Furthermore, this embodiment can monitor the positional relationship between the target element and the viewport by calling an application programming interface (such as IntersectionObserver).

[0072] For example, IntersectionObserver can return an isIntersecting field to a component, indicating whether the target element intersects with the viewport.

[0073] For example, IntersectionObserver can return an intersectionRatio field to a component, representing the proportion of the intersection between the target element and the viewport.

[0074] For example, IntersectionObserver can return the boundingClientRect field to a component, indicating the position of the target element.

[0075] For example, IntersectionObserver can return a rootBounds field to a component, indicating the position of the viewport.

[0076] In this embodiment, IntersectionObserver is used to asynchronously listen to the intersection state of the target element and the viewport (i.e. whether it enters / leaves the visible area).

[0077] In the implementation, an IntersectionObserver instance is created for the target component, passing in a callback function and configuration options. `observer.observe(element)` is called to begin listening to the target element. When the visibility of the target element changes (e.g., entering / leaving the viewport), the callback function is executed, returning an array of IntersectionObserverEntry objects.

[0078] In one specific embodiment, please refer to Figure 5 , Figure 5 The specific process of a virtual scrolling display method is shown.

[0079] In step 501, in response to the first operation, the component is loaded.

[0080] In step 502, it is determined whether virtual scrolling is enabled. If yes, step 503 is executed; otherwise, step 505 is executed.

[0081] In step 503, an observation instance is created. The observation instance can be used to monitor the positional relationship between the target element wrapped by the target component and the viewport.

[0082] In this embodiment, when the target component is loaded, it first determines whether virtual scrolling is enabled. If it is not enabled, the target element is rendered directly. If it is enabled, an observer instance is created, which can notify the target component when the state of the target element entering the viewport changes.

[0083] Specifically, the observation instance can notify the target component of the positional relationship when the positional relationship between the target element and the viewport meets the notification conditions. The notification conditions can be preset, for example, the notification conditions are that the distance between the target element and the top of the viewport is less than a third threshold, and / or, the distance between the target element and the bottom of the viewport is less than a third threshold.

[0084] In step 504, it is determined whether the element is within the viewport. If it is, step 505 is executed; otherwise, step 506 is executed.

[0085] In step 505, the target element is rendered.

[0086] In step 506, placeholders are rendered.

[0087] In this embodiment, after receiving a notification from an observed instance, the target component determines how to render based on the data in the notification, namely whether the current target element is within the viewport. If it is within the viewport, the actual element is rendered in full; otherwise, a blank placeholder is rendered.

[0088] Those skilled in the art will understand that steps 501 to 506 can be considered as the above. Figure 3 The execution steps 301 to 303 of the illustrated embodiment correspond to each other, and they are complementary in terms of specific implementation principles and logic. Therefore, the explanation of the terms involved in this embodiment can be found by referring to... Figure 3 The relevant descriptions of the embodiments shown will not be repeated here.

[0089] In a non-limiting embodiment, a first observation instance can be created and run for each target component. The first observation instance is used to monitor the positional relationship between the target element enclosed by the target component and the viewport.

[0090] In this embodiment, the target component is as follows: Figure 6 As shown, the target component wraps the target element. Each target component generates a first observation instance to monitor the positional relationship between the target element and the viewport in real time.

[0091] In another non-limiting embodiment, such as Figure 7As shown, the target component includes at least one nested component. A second observation instance of the target component is created and run. This second observation instance is used to monitor the positional relationship between the overall target element wrapped by at least one nested component and the viewport, serving as the monitoring result. Based on the monitoring result, it is determined whether to create a third observation instance for each nested component. This third observation instance is used to monitor the positional relationship between the target element wrapped by each nested component and the viewport.

[0092] In contrast to the previous embodiment where each target component generates a first observation instance and each observation instance occupies memory resources, a large number of instances will be generated when the amount of data that needs to be virtually scrolled is large, consuming a lot of performance.

[0093] This embodiment leverages the characteristic that a target component can wrap any element by placing at least one nested component as the wrapped element within the target component to form a nested structure. This way, when the entire target element of the target component is outside the viewport, no third-observation instance is created. Third-observation instances of each nested target component are only created when the entire target element is about to enter the viewport. This reduces the number of concurrently running instances, decreases resource overhead, and improves computational performance.

[0094] For example, when a user clicks the "Inbound Details 1" button on the display interface, target component 1 of "Inbound Details 1" is loaded, a second observation instance 1 of target component 1 is created, and the second observation instance 1 is run. "Inbound Details 1" includes multiple fields: product, document quantity, inbound / outbound detail associated object, inbound / outbound detail - time, inbound / outbound detail - hyperlink, etc. Each field corresponds to a nested component, and the nested component contains elements of the corresponding field. The second observation instance 1 monitors the positional relationship between the elements of multiple fields and the viewport, and outputs the monitoring results. Based on the monitoring results, it is determined whether to create a third observation instance 1 for each nested component.

[0095] Correspondingly, “Inbound Details 2” corresponds to target component 2, which includes nested components corresponding to multiple fields in “Inbound Details 2”.

[0096] Furthermore, when a series of nested components that are the wrapped element are determined by the outer target component to not need to render the real element, but only the placeholder, then all the logic and all instances inside will be unloaded, becoming a lightweight blank element, thus saving a lot of memory resources.

[0097] Furthermore, in response to the target component being unloaded, the second observation instance is deregistered. In other words, the second observation instance is deregistered along with the target component, further reducing resource overhead and improving computational performance.

[0098] Furthermore, existing virtual scrolling solutions only support a uniform virtual strategy for all data items: rendering elements about to enter the viewport and hiding those leaving. However, in real-world applications, some elements, even if they never enter the viewport, still need to load the actual elements to request data to ensure the integrity of the form data. For example, a dropdown list with multiple input lines, whose height is variable, needs to request all warehouse data from the server to verify whether the user's last selected data has been deleted. Under traditional virtual scrolling solutions, if the dropdown list never scrolls into the viewport's distance threshold, the actual elements are never rendered and remain placeholders, the warehouse data is never loaded, and the verification will fail.

[0099] In this embodiment, the type of the target element can be determined first; in response to the target element being of a type that requires integrity verification, the target element is rendered in full.

[0100] In this embodiment, for elements that require integrity verification, even if the element is not in the viewport, the actual element is loaded to request data to ensure the integrity of the form data, thereby avoiding verification errors, ensuring the smooth progress of data verification, and meeting the data verification needs of specific scenarios.

[0101] In a non-limiting embodiment, multiple viewports may exist in complex layouts (such as multi-popup or split-column layouts). This embodiment can create an independent observation instance for each viewport. It supports configuring a primary viewport and secondary viewports, and the viewport priority is adjustable. If an element is simultaneously located in multiple viewports, rendering is performed in descending order of priority. This embodiment is applicable to complex interfaces such as dashboards and multi-window applications, improving flexibility and applicability.

[0102] Please refer to Figure 8 , Figure 8 A virtual scrolling display device 80 is shown, which may include:

[0103] Load module 801 is used to load the target component in response to the user's first operation;

[0104] Monitoring module 802 is used to monitor the positional relationship between the target element wrapped by the target component and the viewport in response to enabling virtual scrolling. The positional relationship includes whether the target element is about to enter the viewport or whether the target element is about to leave the viewport.

[0105] Rendering module 803 is used to determine whether to render the target element based on its positional relationship.

[0106] In specific implementations, the aforementioned virtual scrolling display device 80 may correspond to a chip in a terminal device that has a virtual scrolling display function, such as a system-on-a-chip (SOC), a baseband chip, etc.; or to a chip module in a terminal device that includes a virtual scrolling display function; or to a chip module that has a data processing function chip; or to a terminal device.

[0107] Other relevant descriptions of the virtual scrolling display device 80 can be found in the descriptions in the foregoing embodiments, and will not be repeated here.

[0108] Regarding the modules / units included in the various devices and products described in the above embodiments, they can be software modules / units, hardware modules / units, or a combination of both. For example, for various devices and products applied to or integrated into a chip, all of their modules / units can be implemented using hardware methods such as circuits, or at least some modules / units can be implemented using software programs that run within a processing module integrated into the chip, while the remaining (if any) modules / units can be implemented using hardware methods such as circuits. For various devices and products applied to or integrated into a chip module, all of their modules / units can be implemented using hardware methods such as circuits. Different modules / units can be located in the same component (e.g., chip, circuit module, etc.) or different components of the chip module, or at least some modules / units can be implemented using hardware methods such as circuits. The implementation can be done through software programs, which run within the processing module integrated into the chip module. The remaining modules / units (if any) can be implemented using hardware methods such as circuits. For various devices and products applied to or integrated into terminal devices, each of their modules / units can be implemented using hardware methods such as circuits. Different modules / units can be located in the same component (e.g., chip, circuit module, etc.) or different components within the terminal device. Alternatively, at least some modules / units can be implemented through software programs, which run within the processing module integrated into the terminal device. The remaining modules / units (if any) can be implemented using hardware methods such as circuits.

[0109] This application also discloses a storage medium, which is a computer-readable storage medium storing a computer program. When the computer program runs, it can execute the steps of the method shown in the foregoing embodiments. The storage medium may include a read-only memory (ROM), a random access memory (RAM), a disk, or an optical disk, etc. The storage medium may also include a non-volatile or non-transitory storage module, etc.

[0110] Please refer to Figure 9 This application also provides a schematic diagram of the hardware structure of a virtual scrolling display device. The device includes a processing module 901, a storage module 902, and a transceiver 903.

[0111] The processing module 901 can be a general-purpose central processing unit (CPU), a microprocessor module, an application-specific integrated circuit (ASIC), or one or more integrated circuits used to control the execution of the program according to the present application. The processing module 901 may also include multiple CPUs, and it can be a single-core (single-CPU) processing module or a multi-core (multi-CPU) processing module. Here, "processing module" can refer to one or more devices, circuits, or processing cores used to process data (e.g., computer program instructions).

[0112] The storage module 902 can be a ROM or other type of static storage device capable of storing static information and instructions, RAM or other type of dynamic storage device capable of storing information and instructions, or an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), a magnetic disk storage medium or other magnetic storage device, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer. This application embodiment does not impose any limitations on this. The storage module 902 can exist independently (in this case, the storage module 902 can be located outside or inside the device), or it can be integrated with the processing module 901. The storage module 902 may contain computer program code. The processing module 901 is used to execute the computer program code stored in the storage module 902, thereby implementing the method provided in this application embodiment.

[0113] The processing module 901, storage module 902, and transceiver 903 are connected via a bus. The transceiver 903 is used to communicate with other devices or communication networks.

[0114] when Figure 9 The schematic diagram shown illustrates the structure of the terminal device involved in the above embodiments. The processing module 901 is used to control and manage the actions of the terminal device. For example, the processing module 901 supports the terminal device in performing actions in other processes described in the embodiments of this application. The storage module 902 is used to store the program code and data of the terminal device.

[0115] It should be understood that the term "and / or" in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this article indicates that the preceding and following related objects have an "or" relationship.

[0116] In the embodiments of this application, "multiple" refers to two or more.

[0117] The descriptions of "first," "second," etc., appearing in the embodiments of this application are for illustrative purposes and to distinguish the objects being described. They have no order and do not indicate any special limitation on the number of devices in the embodiments of this application, nor do they constitute any limitation on the embodiments of this application.

[0118] In this application, the term "connection" refers to various connection methods, such as direct connection or indirect connection, to achieve communication between devices. This application does not impose any limitations on this.

[0119] The above embodiments can be implemented, in whole or in part, by software, hardware, firmware, or any other combination thereof. When implemented using software, the above embodiments can be implemented, in whole or in part, as a computer program product. A computer program product includes one or more computer instructions or computer programs. When the computer instructions or computer programs are loaded or executed on a computer, all or part of the processes or functions according to the embodiments of this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. Computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired or wireless means.

[0120] It should be understood that in the various embodiments of this application, the sequence number of each process does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0121] In the several embodiments provided in this application, it should be understood that the disclosed methods, apparatuses, and systems can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for example, the division of units is merely a logical functional division, and there may be other division methods in actual implementation; for example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, and the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

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

[0123] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can be physically included separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or in the form of hardware plus software functional units.

[0124] The integrated units implemented as software functional units described above can be stored in a computer-readable storage medium. These software functional units, stored in a storage medium, include several instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute some steps of the methods of the various embodiments of this application.

[0125] While this application discloses the above information, it is not limited thereto. Any person skilled in the art can make various modifications and alterations without departing from the spirit and scope of this application; therefore, the scope of protection of this application shall be determined by the scope defined in the claims.

Claims

1. A virtual scrolling display method, characterized in that, include: In response to the user's first action, a target component is loaded, the target component including at least one nested component; Determine the type of the target element enclosed by the target component; In response to the target element being of a type requiring integrity verification, the target element is rendered in its entirety. In response to enabling virtual scrolling, the positional relationship between the target element wrapped by the target component and the viewport is monitored, the positional relationship including whether the target element is about to enter the viewport or whether the target element is about to leave the viewport; Determine whether to render the target element based on the positional relationship; The monitoring of the positional relationship between the target element wrapped by the target component and the viewport includes: creating a second observation instance of the target component and running the second observation instance, wherein the second observation instance is used to monitor the positional relationship between the overall target element wrapped by the at least one nested component and the viewport as a monitoring result; In response to the overall target element about to enter the viewport, a third observation instance is created for each nested target component; or, in response to the overall target element about to leave the viewport, the third observation instance for each nested target component is unregistered; the third observation instance is used to monitor the positional relationship between the target element wrapped by each nested component and the viewport.

2. The virtual scrolling display method according to claim 1, characterized in that, The monitoring of the positional relationship between the target element enclosed by the target component and the viewport includes: The positional relationship is determined by monitoring at least one of the following: the distance between the target element and the viewport, whether the target element and the viewport intersect, and the proportion of the intersection between the target element and the viewport.

3. The virtual scrolling display method according to claim 1, characterized in that, Determining whether to render the target element based on the positional relationship includes: In response to the target element about to enter the viewport and the distance between the target element and the top of the viewport being less than a first threshold, the target element is rendered; or, In response to the target element leaving the viewport and the distance between the target element and the bottom of the viewport being less than a second threshold, a blank placeholder element is used to replace the target element.

4. The virtual scrolling display method according to claim 1, characterized in that, The monitoring of the positional relationship between the target element enclosed by the target component and the viewport includes: A first observation instance of the target component is created and the first observation instance is run to monitor the positional relationship.

5. A virtual scrolling display device, characterized in that, include: The loading module is used to load the target component in response to the user's first action; The monitoring module is used to determine the type of the target element wrapped by the target component; In response to the target element being of a type requiring integrity verification, the target element is rendered in its entirety. In response to enabling virtual scrolling, the positional relationship between the target element wrapped by the target component and the viewport is monitored, the positional relationship including whether the target element is about to enter the viewport or whether the target element is about to leave the viewport; The rendering module is used to determine whether to render the target element based on the positional relationship. The monitoring module is also used to create a second observation instance of the target component and run the second observation instance, which is used to monitor the positional relationship between the overall target element wrapped by the at least one nested component and the viewport, as a monitoring result; in response to the overall target element about to enter the viewport, a third observation instance of each nested target component is created; Alternatively, in response to the overall target element about to leave the viewport, the third observation instance of each nested target component is deregistered; the third observation instance is used to monitor the positional relationship between the target element wrapped by each nested component and the viewport.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program is executed by a computer to perform the steps of the virtual scrolling display method according to any one of claims 1 to 4.

7. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instruction is executed by a computer, it implements the steps of the virtual scrolling display method according to any one of claims 1 to 4.

8. A chip, the chip comprising at least one processing module and an interface circuit, the interface circuit being connected to the at least one processing module, characterized in that, The processing module executes the steps of the virtual scrolling display method according to any one of claims 1 to 4 by running program instructions.

9. A computing device comprising a storage module and a processing module, wherein the storage module stores a computer program executable on the processing module, characterized in that, When the processing module runs the computer program, it performs the steps of the virtual scrolling display method according to any one of claims 1 to 4.

Images