Tree component virtual scrolling method, system and related device
By introducing a virtual scrolling mechanism and a viewport rendering mechanism into the Tree component, only the target nodes within the user's visible viewport are rendered, which solves the memory consumption and rendering performance issues in the display of large-scale hierarchical data and improves the user experience.
Patent Information
- Application Number
- CN202511019560.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-07-23
- Publication Date
- 2025-12-16
AI Technical Summary
The existing Tree component consumes a lot of memory and reduces page rendering and interaction performance when handling large amounts or deep data displays, which affects the user experience.
A virtual scrolling mechanism is adopted. Scroll control parameters are added to the Tree component to generate a composite ID of the node index. The redundant viewport range is calculated by using the scroll control parameters and preset offset. Scroll bars are generated in combination with placeholder containers. Only target nodes within the user's visible viewport are rendered, avoiding full rendering.
Improved the smoothness of Tree component interaction in scenarios with a large number of nodes or deep layers, reduced memory consumption and operation lag, and enhanced user experience.
Smart Images
Figure CN121143784A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of information technology, and in particular to a method, system and related apparatus for virtual scrolling of a Tree component. Background Technology
[0002] With the rapid development of internet technology, the amount of data that front-end pages need to process and display is increasing dramatically. This is especially true in scenarios such as enterprise management systems and content management platforms, where the need for hierarchical data display is becoming increasingly common. For example, file resource management systems need to present multi-level folder structures, and organizational structure systems need to display hierarchical relationships from the company level to departments and then to employees. These scenarios place higher demands on the performance of front-end pages. The Tree component, as a core component for hierarchical data display in front-end pages, directly impacts the user experience.
[0003] In existing technologies, front-end pages typically use the Tree component provided by front-end component libraries such as Element UI to display hierarchical data. The Tree component presents a tree-like hierarchy by constructing a nested DOM structure. When it receives data, it renders all the elements corresponding to the tree nodes onto the front-end page at once, thereby achieving an intuitive hierarchical data visualization effect.
[0004] However, when using this Tree component implementation, the DOM structure becomes complex when dealing with a large number of tree nodes or a deep hierarchy. This not only consumes a lot of memory resources but also seriously affects the rendering and interaction performance of the page, causing the page to lag and delay when users perform operations, greatly reducing the user experience. Summary of the Invention
[0005] To address the aforementioned technical problems, this application provides a method, system, and related apparatus for virtual scrolling of a Tree component.
[0006] The technical solution provided in this application is described below: A first aspect of this application provides a method for virtual scrolling of a Tree component, the method comprising: Add scrolling control parameters to the preset virtual tree component, and generate a composite ID including the node index for each node of the preset virtual tree component; The redundant viewport range of the user's visible page is calculated using the scroll control parameters and the preset scroll offset. A preset placeholder container is inserted into the user's visible page to generate a scrollbar. When the user triggers the scroll event of the preset virtual tree component, the scroll distance is obtained by listening to the scrollbar, and the starting node is determined based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. The target node obtained based on the starting node and the redundant viewport range will be rendered, and the rendered target node will be inserted into the user's visible page to achieve virtual scrolling.
[0007] Optionally, the scrolling control parameters include a visible area height parameter and a single node height parameter; After adding scroll control parameters to the preset virtual tree component, the method further includes: Determine whether the visible area height parameter has been assigned a value; If so, then the step of generating a composite ID including the node index for each node of the preset virtual tree component is performed.
[0008] Optionally, the step of calculating the redundant viewport range of the user-visible page using the scroll control parameters and the preset scroll offset includes: The actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. The redundant viewport range is calculated based on the actual viewport range and the preset scroll offset.
[0009] Optionally, determining the starting node based on the total number of nodes in the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID includes: Obtain the total number of nodes in the preset virtual tree component and the total height of the preset placeholder container, and calculate the target index based on the scroll distance, the total height of the container, and the total number of nodes; The starting node is obtained by matching the target index with the node index in the composite ID.
[0010] Optionally, the step of rendering the target node obtained based on the starting node and the redundant viewport range, and inserting the rendered target node into the user-visible page to achieve virtual scrolling, includes: The end node is determined based on the starting node and the redundant viewport range, and all target nodes from the starting node to the end node are rendered; Clear all nodes in the current user-visible page and insert the rendered target node into the user-visible page to achieve virtual scrolling.
[0011] Optionally, before adding scroll control parameters to the preset virtual tree component, the method further includes: The properties and scroll events of the current page's Tree component are copied to a preset virtual Tree component using a mixins mechanism. The properties of the current page's Tree component include node functionality, and the scroll events of the current page's Tree component include click events and trigger events.
[0012] Optionally, after the user triggers the scroll event of the preset virtual tree component, the following further steps are included: Get the time difference between the current time the user triggers the scroll event and the time the user last triggered the scroll event; Determine whether the time difference is greater than a preset time threshold; If so, then execute the step of obtaining the scroll distance by listening to the scroll bar.
[0013] A second aspect of this application provides a system for virtual scrolling of a Tree component, the system comprising: The generation unit is used to add scrolling control parameters to the preset virtual tree component and generate a composite ID including the node index for each node of the preset virtual tree component using a depth-first search algorithm. The calculation unit is used to calculate the redundant viewport range of the user's visible page using the scroll control parameters and the preset scroll offset. The determining unit is used to insert the preset placeholder container into the user's visible page to generate a scroll bar. When the user triggers the scroll event of the preset virtual tree component, the unit obtains the scroll distance by listening to the scroll bar and determines the starting node based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. An insertion unit is used to render a target node obtained based on the starting node and the redundant viewport range, and insert the rendered target node into the user-visible page to achieve virtual scrolling.
[0014] Optionally, the generation unit is specifically used for: The scrolling control parameters include the visible area height parameter and the single node height parameter; After adding scroll control parameters to the preset virtual tree component, the method further includes: Determine whether the visible area height parameter has been assigned a value; If so, then the step of generating a composite ID including the node index for each node of the preset virtual tree component is performed.
[0015] Optionally, the computing unit is specifically used for: The actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. The redundant viewport range is calculated based on the actual viewport range and the preset scroll offset.
[0016] Optionally, the determining unit is specifically used for: Obtain the total number of nodes in the preset virtual tree component and the total height of the preset placeholder container, and calculate the target index based on the scroll distance, the total height of the container, and the total number of nodes; The starting node is obtained by matching the target index with the node index in the composite ID.
[0017] Optionally, the insertion unit is specifically used for: The end node is determined based on the starting node and the redundant viewport range, and all target nodes from the starting node to the end node are rendered; Clear all nodes in the current user-visible page and insert the rendered target node into the user-visible page to achieve virtual scrolling.
[0018] Optionally, a replication unit may also be included, specifically for: The properties and scroll events of the current page's Tree component are copied to a preset virtual Tree component using a mixins mechanism. The properties of the current page's Tree component include node functionality, and the scroll events of the current page's Tree component include click events and trigger events.
[0019] Optionally, a judgment unit may also be included, specifically used for: Get the time difference between the current time the user triggers the scroll event and the time the user last triggered the scroll event; Determine whether the time difference is greater than a preset time threshold; If so, then execute the step of obtaining the scroll distance by listening to the scroll bar.
[0020] A third aspect of this application provides an apparatus for virtual scrolling of a Tree component, the apparatus comprising: Processor, memory, input / output units, and bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program that the processor invokes to execute the first aspect and any optional method of virtual scrolling of the Tree component in the first aspect.
[0021] A fourth aspect of this application provides a computer-readable storage medium storing a program that, when executed on a computer, performs the method of virtual scrolling of the first aspect and any optional Tree component in the first aspect.
[0022] As can be seen from the above technical solutions, the embodiments of this application have the following advantages: This application optimizes performance for displaying large-scale hierarchical data by introducing a virtual scrolling mechanism and a viewport rendering mechanism. First, scrolling control parameters are added to the preset virtual tree component, and a composite ID containing an index is generated for each node. This converts the multi-level tree structure of the preset virtual tree component into a one-dimensional array, providing a foundation for dynamic rendering. Then, the redundant viewport range is calculated using the scrolling control parameters and preset scroll offsets. Combined with a placeholder container, a scrollbar is generated so that only target nodes within the user's visible viewport are rendered when the user scrolls, instead of rendering all DOM elements at once. Finally, the starting node is determined by listening to the scroll distance obtained from the scrollbar, the total number of nodes in the preset virtual tree component, the preset placeholder container, and the composite ID. The target node, obtained based on the starting node and the redundant viewport range, is then rendered, and the rendered target node is inserted into the user's visible page, ensuring a constant number of nodes on the page. The entire virtual scrolling process avoids the excessive memory consumption and operational lag issues caused by traditional full rendering, improving the smoothness of the tree component's interaction in scenarios with massive numbers of nodes or deep hierarchical structures, and enhancing the user experience. Attached Figure Description
[0023] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0024] Figure 1 A schematic flowchart of an embodiment of the method for virtual scrolling of the Tree component provided in this application; Figure 2 A schematic flowchart of an embodiment of the process for determining the starting node in the virtual scrolling of the Tree component provided in this application; Figure 3 A schematic flowchart of an embodiment of the virtual scrolling process in the Tree component provided in this application; Figure 4 A schematic flowchart of an embodiment of the process of obtaining and judging the time difference in the virtual scrolling of the Tree component provided in this application; Figure 5 A flowchart illustrating another embodiment of the method for virtual scrolling of the Tree component provided in this application; Figure 6 A schematic diagram of an embodiment of the system for virtual scrolling of the Tree component provided in this application; Figure 7 A schematic diagram of an embodiment of the device for virtual scrolling of the Tree component provided in this application. Detailed Implementation
[0025] This application provides a method for virtual scrolling of a Tree component, which can improve the user experience. This application can be applied to terminals, systems, and servers. For example, the terminal can be a smartphone, computer, tablet, smart TV, smartwatch, portable computer terminal, or a fixed terminal such as a desktop computer. For ease of explanation, this application uses a terminal as the execution subject for illustration.
[0026] Please see Figure 1 This application first provides an embodiment of a method for virtual scrolling of a Tree component, the embodiment including: S101. Add scrolling control parameters to the preset virtual tree component, and generate a composite ID including the node index for each node of the preset virtual tree component. In this embodiment, a scrolling control parameter is first added to the preset virtual tree component. This scrolling control parameter is mainly used for the precise control and calculation of the scrolling behavior in the future. At the same time as adding the scrolling control parameter, a composite ID including the node index is generated for each node of the preset virtual tree component.
[0027] Furthermore, a depth-first search algorithm, such as the DFS algorithm, can be used during the generation process. This DFS algorithm starts from the root node of the preset virtual tree component and traverses all nodes along a path until it can no longer proceed, then backtracks and traverses other paths in turn. During this process, a unique node index is assigned to each node, and the node index is combined with the node's own information to generate a composite ID. The generated composite ID includes the current node's level, the current node's index, the level number, and the total number of items in the level.
[0028] The entire generation process transforms the originally complex multi-level tree structure into a one-dimensional array that can be quickly located by index, providing basic data support for subsequent dynamic rendering and node positioning. S102. Calculate the redundant viewport range of the user's visible page using scroll control parameters and preset scroll offset. After generating the composite ID for each node, the redundant viewport range of the user's visible page is calculated using the scroll control parameters and preset scroll offset added to the preset virtual Tree component. The scroll control parameters contain various configuration information related to scrolling, while the preset scroll offset is an additional vertical offset distance added to the user's visible page to prevent blank content when the user scrolls quickly.
[0029] By combining scroll control parameters with preset scroll offsets, the resulting redundant viewport range not only includes the visible area that the user can currently see, but also covers a certain distance of redundant area before and after the visible area. This ensures that there is enough content to be rendered in advance when the user scrolls, solving the problem of blank content that occurs when traditional Tree components only render the visible area during scrolling. The setting of the redundant viewport range makes the scrolling process smoother, and the user will not notice the sudden loading of content, thus improving the user experience.
[0030] S103. Insert the preset placeholder container into the user's visible page to generate a scrollbar. When the user triggers the scroll event of the preset virtual tree component, obtain the scroll distance by listening to the scrollbar, and determine the starting node based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. In this embodiment, a preset placeholder container is first inserted into the user's visible page to generate a scrollbar. When the user triggers the scrolling event of the preset virtual tree component, the real-time scrolling distance is obtained by listening to the scrolling status of the scrollbar. The scrolling distance can reflect the relative proportion of the current scrolling position among all nodes.
[0031] Subsequently, by combining the scroll distance with the total number of nodes in the preset virtual tree component, the scroll distance, the preset placeholder container, and the node index in the composite ID, the starting node that needs to be rendered can be quickly calculated from the one-dimensional array-based node structure. This starting node provides an accurate starting point for determining the subsequent target nodes, avoids full rendering, reduces invalid DOM operations, and improves scrolling performance.
[0032] S104. Render the target node obtained based on the starting node and the redundant viewport range, and insert the rendered target node into the user's visible page to achieve virtual scrolling.
[0033] After determining the starting node, rendering will proceed based on the starting node and the target node determined by the redundant viewport range. The starting node clarifies the starting position of rendering, while the redundant viewport range specifies the size of the rendering area. Together, they determine the target node that needs to be rendered.
[0034] During rendering, only the target node undergoes DOM element generation and style processing; nodes outside the target node's scope are not rendered. After rendering is complete, the rendered target node is inserted into its corresponding position on the user's visible page.
[0035] In this way, the user's visible page always contains only the rendered nodes within the current viewport and redundant range. As the user scrolls, the above process is repeated continuously, dynamically updating the target node to be rendered, thus achieving the virtual scrolling effect of the Tree component.
[0036] This embodiment optimizes performance for displaying large-scale hierarchical data by introducing a virtual scrolling mechanism and a viewport rendering mechanism. First, scrolling control parameters are added to the preset virtual tree component, and a composite ID containing an index is generated for each node. This converts the multi-level tree structure of the preset virtual tree component into a one-dimensional array, providing a foundation for dynamic rendering. Then, the redundant viewport range is calculated using the scrolling control parameters and preset scroll offsets. Combined with a placeholder container, a scrollbar is generated so that only target nodes within the user's visible viewport are rendered when the user scrolls, rather than rendering all DOM elements at once. Finally, the starting node is determined by listening to the scroll distance obtained from the scrollbar, the total number of nodes in the preset virtual tree component, the preset placeholder container, and the composite ID. The target node, obtained based on the starting node and the redundant viewport range, is then rendered, and the rendered target node is inserted into the user's visible page, ensuring a constant number of nodes on the page. The entire virtual scrolling process avoids the excessive memory consumption and operational lag issues caused by traditional full rendering, improving the smoothness of interaction with the tree component in scenarios with massive numbers of nodes or deep hierarchical levels, and enhancing the user experience.
[0037] In step S103 above, during the process of determining the starting node, the target index needs to be obtained first. Please refer to [link to relevant documentation]. Figure 2 , Figure 2 An embodiment of the method for determining the starting node in the virtual scrolling of the Tree component provided in this application includes: S201. Obtain the total number of nodes in the preset virtual tree component and the total height of the preset placeholder container, and calculate the target index based on the scroll distance, the total height of the container, and the total number of nodes. In determining the starting node, this embodiment first obtains the total number of nodes in the preset virtual tree component. This total number reflects the overall number of nodes in the tree structure of the preset virtual tree component. Simultaneously, it obtains the total height of the preset placeholder container, which is the total height used to simulate node rendering and supports the normal display and scrolling logic of the scrollbar. Then, it calculates the target index using the obtained scroll distance, total container height, and total number of nodes. By combining the scroll distance, total container height, and total number of nodes to calculate the target index, a precise conversion from the scroll position to the node sequence position is achieved.
[0038] Specifically, the formula for calculating the target index is: scroll distance / total container height = target index / total number of nodes. For example, if the preset virtual tree component has 30 nodes and the preset placeholder container has a total height of 3000px, and when the user triggers a scroll event, the scroll distance obtained by listening to the scroll bar is 240px, then according to the formula for calculating the target index, 240 / 3000 = 2.4 / 30, the calculated target index is 2.4. Since the node index must be an integer and represent the position of a specific node, the target index after rounding up is 3. This calculation method is based on objective numerical ratios, avoiding errors from subjective judgment of node positions, providing an accurate quantitative indicator for determining the subsequent starting node, and ensuring the scientific and reliable positioning of the starting node.
[0039] S202. Match the target index with the node index in the composite ID to obtain the starting node.
[0040] In this embodiment, after obtaining the target index, it is matched with the node index in the composite ID of each node in the preset virtual tree component. The composite ID contains a unique node index for each node, and these node indexes have converted the multi-level tree structure into a one-dimensional array form that can be quickly located. During the matching process, the target index is compared with the node index in the composite ID of each node one by one. When a node index that completely matches the target index is found, the corresponding node is the starting node.
[0041] The starting node is determined by matching the target index with the node index in the composite ID. This fully leverages the uniqueness of the node index in the composite ID and the advantages of its one-dimensional array representation, enabling fast and accurate location of the starting node. This matching method avoids repeated traversal of complex multi-level tree structures, significantly reducing the time and performance overhead required for node location. It ensures high efficiency in determining the starting node in scenarios with massive numbers of nodes or deep hierarchies, thereby improving the overall operational efficiency of the function.
[0042] In step S104 above, during the implementation of virtual scrolling, it is necessary to first determine the end node. Please refer to [link / reference needed]. Figure 3 , Figure 3 An embodiment of the method for virtual scrolling of the Tree component provided in this application includes: S301. Determine the end node based on the starting node and the redundant viewport range, and render all target nodes from the starting node to the end node; In this embodiment, after determining the starting node, the ending node is determined based on the starting node and the redundant viewport range. Specifically, the starting node is used as a reference, and the position of the ending node is determined according to the number of nodes covered by the redundant viewport range. For example, if the number of nodes covered by the redundant viewport range is 10, the starting node is the 3rd node. Starting from the 3rd node, count 10 nodes, and then the ending node is the 12th node.
[0043] Then, all nodes between the start node and the end node are identified as target nodes. For example, if the start node is the 3rd node and the end node is the 12th node, then all nodes from the 3rd node to the 12th node are target nodes. After identifying the target nodes, these target nodes are then rendered.
[0044] By defining the starting node and the redundant viewport range to determine the ending node, the range of nodes that need to be rendered is clearly defined, ensuring that nodes within the user's visible area and the redundant area are rendered. This rendering method further avoids rendering all nodes in full, rendering only the necessary target nodes, thus reducing memory consumption and rendering pressure.
[0045] S302. Clear all nodes in the current user-visible page and insert the rendered target node into the user-visible page to achieve virtual scrolling.
[0046] After rendering the target node, all existing nodes in the current user-visible page are cleared. These existing nodes were rendered during the last scroll. Simultaneously, the rendered target node is inserted into its corresponding position in the user-visible page. This ensures that as the user scrolls, only nodes within the current viewport and redundant viewports are always displayed, achieving a virtual scrolling effect.
[0047] Clearing all nodes in the current user viewport and inserting the rendered target node ensures that the number of DOM elements in the user viewport remains constant within the redundant viewport range. This further avoids the stuttering issues caused by a large number of DOM elements in traditional full rendering, improves the page's interactive response speed, provides users with a smooth experience during scrolling, and also reduces performance consumption.
[0048] In step S103 above, after the user triggers the scroll event of the preset virtual Tree component, it is necessary to first obtain the time difference and judge the time difference. Please refer to [link to relevant documentation]. Figure 4 , Figure 4 An embodiment of the method for obtaining and judging the time difference in the virtual scrolling of the Tree component provided in this application includes: S401. Obtain the time difference between the user's current scroll event and the previous scroll event triggered by the user. When a user triggers a scroll event on the preset virtual Tree component, the time of the current trigger is recorded. Simultaneously, the time of the previous trigger of the same scroll event is retrieved. The time difference between the two events is calculated by determining the difference between the current and previous trigger times. For example, if the user first triggered the scroll event at 10:00:00 and the current trigger is at 10:00:02, the time difference is 2 seconds. This time difference reflects the frequency of the user's scrolling operation, providing a data foundation for subsequent steps.
[0049] S402. Determine whether the time difference is greater than the preset time threshold. After obtaining the time difference, the time difference is compared with a preset time threshold. The preset time threshold is a fixed time value set according to the actual application scenario and performance requirements. In this embodiment, it can be set to 5 seconds, but the specific value is not limited.
[0050] During the judgment process, the relationship between the time difference and the preset time threshold is compared. For example, if the time difference is 2 seconds and the preset time threshold is 5 seconds, then the time difference is less than the preset time threshold; if the time difference is 6 seconds and the preset time threshold is 5 seconds, then the time difference is greater than the preset time threshold.
[0051] If the time difference is greater than a preset time threshold, then step S403 is executed; if the time difference is less than or equal to the preset time threshold, then it is determined that the scroll event triggered by the user now is the same scroll event as the one previously triggered by the user. This effectively avoids repetitive user operations and reduces unnecessary computation and rendering overhead.
[0052] S403. Execute the step of obtaining the scroll distance by listening to the scroll bar.
[0053] In this embodiment, step S403 is similar to step S103 in the previous embodiment, and will not be described again here.
[0054] Please see Figure 5 This application also provides another embodiment of a method for virtual scrolling of a Tree component, the embodiment including: S501. The properties and scroll events of the current page Tree component are copied to the preset virtual Tree component through the mixins mechanism. The properties of the current page Tree component include node functions, and the scroll events of the current page Tree component include click events and trigger events.
[0055] In this embodiment, the properties and scroll events of the Tree component on the current page are reused through the mixins mechanism. The mixins mechanism is a code reuse mechanism that can copy the properties and scroll events of the Tree component on the current page to a preset virtual Tree component, eliminating the need to repeatedly develop the virtual Tree component.
[0056] Furthermore, the attributes of the current page's Tree component include node functionalities, such as the expanded, collapsed, and selected states of nodes. After these attributes are copied through the mixins mechanism, the default virtual Tree component can directly possess the same node operation capabilities. The scroll events of the current page's Tree component cover click-type events and trigger-type events. After being copied through the mixins mechanism, the default virtual Tree component can respond to user interaction behaviors consistent with those of the current page's Tree component.
[0057] S502. Add scroll control parameters to the preset virtual tree component. The scroll control parameters include the visible area height parameter and the single node height parameter. In this embodiment, scrolling control parameters are added to the preset virtual tree component, specifically including the visible area height parameter and the single node height parameter.
[0058] Specifically, the visible area height parameter defines the height range that the preset virtual tree component can be displayed on the page, while the single node height parameter indicates the height size occupied by each node on the page. For example, if the visible area height parameter is 500px and the single node height parameter is 50px, then the user's visible area can accommodate a maximum of 10 nodes.
[0059] S503. Determine whether the visible area height parameter has been assigned a value; After adding scroll control parameters including the visible area height parameter and the single node height parameter, a check is performed to determine whether the visible area height parameter has been assigned a value. The visible area height parameter is not only used to define the height range that the preset virtual tree component can be displayed on the page, but it is also the on / off switch for the virtual scrolling function. The assignment status of the visible area height parameter directly determines whether the virtual scrolling function is enabled.
[0060] During the judgment process, it is checked whether there is a valid value for the visible area height parameter. If there is a valid value, it is determined that the visible area height parameter has been assigned a value; if there is no valid value, it is determined that the visible area height parameter has not been assigned a value.
[0061] If it is determined that the visible area height parameter has been assigned a value, then step S504 is executed; if it is determined that the visible area height parameter has not been assigned a value, then the execution of subsequent steps is terminated. This determination of the assignment of the visible area height parameter enables flexible on / off control of the virtual scrolling function, ensuring the stability of the virtual scrolling function.
[0062] S504. Perform the step of generating a composite ID including the node index for each node of the preset virtual tree component; In this embodiment, step S504 is similar to step S101 in the previous embodiment, and will not be described again here.
[0063] S505. The actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. In this embodiment, the actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. Specifically, the visible area height parameter represents the total height that can be displayed in the user's visible page, and the single node height parameter represents the height of a single node. Combining the two, the number of nodes that can be accommodated within the actual viewport can be obtained, i.e., the actual viewport range. For example, if the visible area height is 500px and the single node height is 50px, then 500 / 50=10, and the actual viewport range is 10 nodes.
[0064] The actual viewport range defines the upper limit of the number of nodes that the user can currently see, which is the basis for subsequent calculation of the redundant viewport range. Compared with fixed range rendering, this method of dynamic calculation based on the visible area height parameter and the single node height parameter can adapt to different visible areas and node sizes, improving the flexibility of virtual scrolling.
[0065] S506. The redundant viewport range is calculated based on the actual viewport range and the preset scroll offset.
[0066] In this embodiment, after obtaining the actual viewport range, the redundant viewport range is calculated in combination with the preset scroll offset. The preset scroll offset is the number of nodes added on top of the actual viewport range to cope with content preloading when the user scrolls quickly and avoid blank spaces. For example, if the actual viewport range is 10 nodes and the preset scroll offset is 3 nodes, then the redundant viewport range is 10+3=13 nodes.
[0067] The calculation of redundant viewport range solves the problem of blank content during rapid scrolling. By preloading redundant nodes, users do not need to wait for new nodes to render when scrolling, achieving a seamless visual transition and improving the interactive experience.
[0068] S507. Insert the preset placeholder container into the user's visible page to generate a scrollbar. When the user triggers the scroll event of the preset virtual tree component, obtain the scroll distance by listening to the scrollbar, and determine the starting node based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. S508: Render the target node obtained based on the starting node and the redundant viewport range, and insert the rendered target node into the user's visible page to achieve virtual scrolling.
[0069] In this embodiment, steps S507 to S508 are similar to steps S103 to S104 in the previous embodiment, and will not be described again here.
[0070] The following provides a detailed description of the virtual scrolling system for the Tree component provided in this application. Please refer to [link / reference]. Figure 6 , Figure 6 An embodiment of a system for virtual scrolling of a Tree component provided in this application, the system comprising: The generation unit 601 is used to add scrolling control parameters to the preset virtual tree component and generate a composite ID including the node index for each node of the preset virtual tree component through a depth-first search algorithm. The calculation unit 602 is used to calculate the redundant viewport range of the user's visible page through scroll control parameters and preset scroll offset. The determining unit 603 is used to insert a preset placeholder container into the user's visible page to generate a scrollbar. When the user triggers the scroll event of the preset virtual tree component, the scroll distance is obtained by listening to the scrollbar, and the starting node is determined based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. The insertion unit 604 is used to render the target node obtained based on the starting node and the redundant viewport range, and insert the rendered target node into the user's visible page to achieve virtual scrolling.
[0071] Optionally, the generating unit 601 is specifically used for: Scroll control parameters include the visible area height parameter and the single node height parameter; After adding scroll control parameters to the preset virtual tree component, the method also includes: Determine if the visible area height parameter has been assigned a value; If so, then perform the step of generating a composite ID including the node index for each node of the preset virtual tree component.
[0072] Optionally, the computing unit 602 is specifically used for: The actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. The redundant viewport range is calculated based on the actual viewport range and the preset scroll offset.
[0073] Optionally, the determining unit 603 is specifically used for: Get the total number of nodes in the preset virtual tree component and the total height of the preset placeholder container, and calculate the target index based on the scroll distance, the total height of the container and the total number of nodes; Match the target index with the node index in the composite ID to obtain the starting node.
[0074] Optionally, the insertion unit 604 is specifically used for: The end node is determined based on the start node and the redundant viewport range, and all target nodes from the start node to the end node are rendered; Clear all nodes in the current user-visible page and insert the rendered target node into the user-visible page to achieve virtual scrolling.
[0075] Optionally, it also includes a replication unit 605, specifically used for: The properties and scroll events of the current page's Tree component are copied to a preset virtual Tree component using a mixins mechanism. The properties of the current page's Tree component include node functionality, and the scroll events of the current page's Tree component include click events and trigger events.
[0076] Optionally, a judgment unit 606 is also included, specifically used for: Get the time difference between the user's current scroll event and the last time the user triggered a scroll event; Determine if the time difference is greater than a preset time threshold; If so, then execute the step of obtaining the scroll distance by listening to the scroll bar.
[0077] For details on the implementation method, please refer to [link / reference]. Figures 1-5 Examples will not be described in detail here.
[0078] This application also provides a device for virtual scrolling of a Tree component; please refer to [link to relevant documentation]. Figure 7 , Figure 7 One embodiment of the apparatus for virtual scrolling of a Tree component provided in this application includes: Processor 701, memory 702, input / output unit 703, bus 704; The processor 701 is connected to the memory 702, the input / output unit 703, and the bus 704; The memory 702 stores a program, and the processor 701 calls the program to execute the virtual scrolling method of any of the Tree components mentioned above.
[0079] This application also relates to a computer-readable storage medium storing a program, characterized in that, when the program is run on a computer, it causes the computer to perform a method for virtually scrolling any of the Tree components described above.
[0080] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.
[0081] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. 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 an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.
[0082] 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.
[0083] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.
[0084] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
Claims
1. A method for virtual scrolling of a Tree component, characterized in that, include: Add scrolling control parameters to the preset virtual tree component, and generate a composite ID including the node index for each node of the preset virtual tree component; The redundant viewport range of the user's visible page is calculated using the scroll control parameters and the preset scroll offset. A preset placeholder container is inserted into the user's visible page to generate a scrollbar. When the user triggers the scroll event of the preset virtual tree component, the scroll distance is obtained by listening to the scrollbar, and the starting node is determined based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. The target node obtained based on the starting node and the redundant viewport range will be rendered, and the rendered target node will be inserted into the user's visible page to achieve virtual scrolling.
2. The method according to claim 1, characterized in that, The scrolling control parameters include the visible area height parameter and the single node height parameter; After adding scroll control parameters to the preset virtual tree component, the method further includes: Determine whether the visible area height parameter has been assigned a value; If so, then the step of generating a composite ID including the node index for each node of the preset virtual tree component is performed.
3. The method according to claim 2, characterized in that, The calculation of the redundant viewport range of the user's visible page using the scroll control parameters and preset scroll offset includes: The actual viewport range of the user's visible page is calculated using the visible area height parameter and the single node height parameter. The redundant viewport range is calculated based on the actual viewport range and the preset scroll offset.
4. The method according to claim 1, characterized in that, The process of determining the starting node based on the total number of nodes in the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID includes: Obtain the total number of nodes in the preset virtual tree component and the total height of the preset placeholder container, and calculate the target index based on the scroll distance, the total height of the container, and the total number of nodes; The starting node is obtained by matching the target index with the node index in the composite ID.
5. The method according to claim 1, characterized in that, The step of rendering the target node obtained based on the starting node and the redundant viewport range, and inserting the rendered target node into the user-visible page to achieve virtual scrolling, includes: The end node is determined based on the starting node and the redundant viewport range, and all target nodes from the starting node to the end node are rendered; Clear all nodes in the current user-visible page and insert the rendered target node into the user-visible page to achieve virtual scrolling.
6. The method according to any one of claims 1 to 5, characterized in that, Before adding scroll control parameters to the preset virtual tree component, the method further includes: The properties and scroll events of the current page's Tree component are copied to a preset virtual Tree component using a mixins mechanism. The properties of the current page's Tree component include node functionality, and the scroll events of the current page's Tree component include click events and trigger events.
7. The method according to any one of claims 1 to 5, characterized in that, After the user triggers the scroll event of the preset virtual tree component, the following is also included: Get the time difference between the current time the user triggers the scroll event and the time the user last triggered the scroll event; Determine whether the time difference is greater than a preset time threshold; If so, then execute the step of obtaining the scroll distance by listening to the scroll bar.
8. A system for virtual scrolling of a Tree component, characterized in that, include: The generation unit is used to add scrolling control parameters to the preset virtual tree component and generate a composite ID including the node index for each node of the preset virtual tree component using a depth-first search algorithm. The calculation unit is used to calculate the redundant viewport range of the user's visible page using the scroll control parameters and the preset scroll offset. The determining unit is used to insert the preset placeholder container into the user's visible page to generate a scroll bar. When the user triggers the scroll event of the preset virtual tree component, the unit obtains the scroll distance by listening to the scroll bar and determines the starting node based on the total number of nodes of the preset virtual tree component, the scroll distance, the preset placeholder container, and the composite ID. An insertion unit is used to render a target node obtained based on the starting node and the redundant viewport range, and insert the rendered target node into the user-visible page to achieve virtual scrolling.
9. A device for virtual scrolling of a tree component, characterized in that, include: Processor, memory, input / output units, and bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program, which the processor invokes to perform the method as described in any one of claims 1 to 7.
10. A computer-readable storage medium having a program stored thereon, the program performing the method as claimed in any one of claims 1 to 7 when executed on a computer.