Page jumping method and related device

Abstract

The invention discloses a page skipping method and a related device. List contents in N groups are displayed in a terminal device in groups through a virtual scrolling technology, N index controls corresponding to the N groups in a one-to-one mode are displayed, and then in response to a trigger operation of a first index control, based on an offset mapping table, the first index control and the second index control are subjected to page skipping. The current position information of the target component associated with the first index control in the virtual rendering container is determined, and then the list content of the target component is rendered in the virtual rendering container based on the current position information, so that only the list item in the current visible area can be rendered through the virtual rolling technology; the page rendering performance and the response speed are improved, meanwhile, under the scene that the height in the grouping list is dynamically changed, the rolling operation is executed in the virtual rendering container through the current position information, the list content of the target component can be accurately positioned, the list content is displayed on a display interface of the terminal equipment, and the user experience is improved. And the jumping precision of the page content is effectively improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a page jump method and related device. BACKGROUND

[0002] In the display interface of a terminal device, for a list with a large amount of data, a grouped display mode is usually used for display, for example, the list can be sorted according to the first letter of pinyin or a specific category, and then a virtual scrolling list is used to replace the actual list, and only the display content in the visible area is rendered to realize the display of the list content.

[0003] In the related art, for a long list display page in a grouped display mode, the page content jump is usually implemented based on the fixed height of the list item, which in the scenario where the height in the grouped list dynamically changes, will cause a serious jump error, so that the user cannot accurately jump to the target position, greatly affecting the user experience.

[0004] Therefore, it is urgent to provide a page jump method to solve the problem of inaccurate page jump in the grouped display of a list. SUMMARY

[0005] Therefore, the present application provides a page jump method and related device, which determines the target list content in the visible area by the current position information of the index control corresponding component in the virtual rendering container when the user clicks the index control, effectively improves the accuracy of page jump in the dynamically changing grouped list display interface.

[0006] To solve the above problems, the technical scheme provided by the present application is as follows:

[0007] On the one hand, the present application provides a page jump method, which comprises:

[0008] The list content in N groups is displayed in a grouped manner in the terminal device by using a virtual scrolling technology, and N index controls corresponding to the N groups respectively are displayed, wherein N>1;

[0009] In response to the triggering operation of a first index control, the current position information of a target component in a virtual rendering container is determined based on an offset mapping table, the first index control is one of the N index controls, the target component is a component associated with the first index control, the virtual rendering container is used to render the list content of the N groups, and the offset mapping table is used to identify the current position information of the components corresponding to the N groups in the virtual rendering container;

[0010] remove the initial list content in the visual area in the virtual rendering container, and perform a scrolling operation in the virtual rendering container based on the current position information, to display the target list content of the target component in the visual area of the terminal device.

[0011] In a possible implementation, the offset mapping table is constructed by the following manner:

[0012] obtain N components corresponding to the N groups and starting position information of the virtual rendering container, the N components being sub-containers inside the virtual rendering container;

[0013] based on the starting position information, determine a first height difference between a top of each component in the N components and a top of the virtual rendering container, and construct an offset mapping table based on the first height difference;

[0014] in response to a change in height of a first component, determine a second height difference between a current position of a top of each component in the virtual rendering container and the starting position of the top of the virtual rendering container, and update the offset mapping table based on the second height difference, the first component being one or more of the N components.

[0015] In a possible implementation, the response to the change in height of the first component, the determination of the second height difference between the current position of the top of each component in the virtual rendering container and the starting position of the top of the virtual rendering container, and the update of the offset mapping table based on the second height difference include:

[0016] in response to the change in height of the first component, determine a difference between a current height and an initial height of the first component, and M components located after the first component in the virtual rendering container;

[0017] add the difference to the first height difference corresponding to the M components respectively to obtain a second height difference between the current position of the top of the M components and the starting position of the top of the virtual rendering container;

[0018] update the offset mapping table based on the second height difference corresponding to the M components.

[0019] In a possible implementation, the method further includes:

[0020] dynamically monitor the N components;

[0021] if content in the first component is dynamically updated, determine whether the height of the first component changes.

[0022] In one possible implementation, the key of the offset map is a group identifier for each group, and the value of the offset map is the height difference between the top of the component corresponding to each group and the top of the virtual rendering container at the current moment.

[0023] In another aspect, this application provides a page navigation device, which includes a display unit, a determination unit, and a rendering unit:

[0024] The display unit is used to group and display the list content in N groups in the terminal device using virtual scrolling technology, and to display N index controls corresponding to the N groups respectively, where N>1;

[0025] The determining unit is used to respond to the triggering operation of the first index control, and determine the current position information of the target component in the virtual rendering container based on the offset mapping table. The first index control is one of the N index controls, the target component is a component associated with the first index control, the virtual rendering container is used to render the list content of the N groups, and the offset mapping table is used to identify the current position information of the components corresponding to the N groups in the virtual rendering container.

[0026] The rendering unit is used to remove the initial list content within the visible area of ​​the virtual rendering container, and perform a scrolling operation within the virtual rendering container based on the current position information, so as to display the target list content of the target component within the visible area of ​​the terminal device.

[0027] In one possible implementation, the apparatus further includes a building unit, the building unit being used for:

[0028] Obtain the N components corresponding to the N groups and the starting position information of the virtual rendering container, wherein the N components are sub-containers inside the virtual rendering container;

[0029] Based on the starting position information, a first height difference between the starting position of the top of each of the N components and the starting position of the top of the virtual rendering container is determined, and an offset mapping table is constructed based on the first height difference.

[0030] In response to a change in the height of the first component, a second height difference is determined between the current position of the top of each component within the virtual rendering container and the starting position of the top of the virtual rendering container, and the offset mapping table is updated based on the second height difference, wherein the first component is one or more of the N components.

[0031] In one possible implementation, the determining unit is specifically used for:

[0032] In response to a change in the height of the first component, the difference between the current height and the initial height of the first component is determined, as well as the M components located after the first component within the virtual rendering container;

[0033] The difference is added to the first height difference corresponding to the M components respectively to obtain the second height difference between the current position of the top of the M components and the starting position of the top of the virtual rendering container;

[0034] The offset mapping table is updated based on the second height difference corresponding to the M components.

[0035] In one possible implementation, the device further includes a detection unit:

[0036] The detection unit is used to dynamically monitor the N components;

[0037] The determining unit is further configured to determine whether the height of the first component has changed if the content in the first component is dynamically updated.

[0038] In one possible implementation, the key of the offset map is a group identifier for each group, and the value of the offset map is the height difference between the top of the component corresponding to each group and the top of the virtual rendering container at the current moment.

[0039] In another aspect, this application provides a computer device, which includes a processor and a memory:

[0040] The memory is used to store computer programs;

[0041] The processor is configured to execute the method described in any of the above-described embodiments according to the computer program.

[0042] In another aspect, this application provides a computer-readable storage medium for storing a computer program that, when executed by a computer device, implements the method described in any of the above-mentioned embodiments.

[0043] In another aspect, this application provides a computer program product including a computer program, which, when run on a computer device, causes the computer device to perform any of the methods described above.

[0044] As can be seen from the above technical solution, this solution first uses virtual scrolling technology to group and display the list content in N groups on the terminal device, and displays N index controls corresponding to each of the N groups. Then, in response to the triggering operation of the first index control, based on the offset mapping table, the current position information of the target component associated with the first index control in the virtual rendering container is determined. One component is used to render the list content of one group, and the virtual rendering container is used to render the list content of N groups. The virtual rendering container can render the display content within the visible area of ​​the terminal device. Then, based on the current position information, a scrolling operation is performed in the virtual rendering container to render the list content of the target component. This method displays the list content of the target component within the visible area of ​​the terminal device. By using virtual scrolling technology, only the list items within the currently visible area are rendered, significantly reducing the number of DOM elements and memory usage, thereby improving page rendering performance and response speed. At the same time, by using an offset mapping table, the position information of the target component corresponding to the first index control in the virtual rendering container can be found when the user triggers the first index control. In scenarios where the height within the grouped list changes dynamically, scrolling operations can be performed in the virtual rendering container based on the current position information, accurately locating the list content of the target component and displaying it on the terminal device's display interface, effectively improving the accuracy of page content navigation. Attached Figure Description

[0045] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, 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 recorded in this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0046] Figure 1 A flowchart illustrating a page redirection method provided in an embodiment of this application;

[0047] Figure 2 A schematic diagram of a virtual list provided for an embodiment of this application;

[0048] Figure 3 A system architecture diagram of an application page redirection method provided in this application embodiment;

[0049] Figure 4 A listening logic diagram of an asynchronous listening module provided in an embodiment of this application;

[0050] Figure 5 A schematic diagram illustrating a dynamically updated offset mapping table provided in an embodiment of this application;

[0051] Figure 6This is a schematic diagram of a page navigation device provided in an embodiment of this application. Detailed Implementation

[0052] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present application.

[0053] As described in the background section, related technologies widely employ lists sorted by the first letter of the pinyin or specific categories. For such large lists, grouping is typically used for display. In long lists displayed in groups, page navigation is usually based on the fixed height of the list items. However, the height of list items may dynamically adjust due to asynchronous factors such as image loading, changes in text length, and ad insertion. This dynamic change in height within grouped lists can lead to significant navigation errors, preventing users from accurately navigating to their target location and severely impacting user experience.

[0054] Meanwhile, while existing mainstream virtual list solutions can effectively reduce the number of DOM elements and improve rendering performance, they generally do not provide native support or a complete solution for the specific and common interactive behavior of "jumping by group index". They usually require preset or estimated height, or do not provide a direct group index jump mechanism, making it challenging for developers to implement such functionality.

[0055] This application provides a page navigation method that uses virtual scrolling technology to render only list items within the currently visible area, significantly reducing the number of DOM elements and memory usage, thereby improving page rendering performance and response speed. Simultaneously, by using an offset mapping table, the position information of the target component corresponding to the first index control within the virtual rendering container can be found when the user triggers the first index control. Even in scenarios where the height within the grouped list dynamically changes, scrolling operations can be performed within the virtual rendering container using the current position information, accurately locating the list content of the target component and displaying it on the terminal device's screen, effectively improving the accuracy of page content navigation.

[0056] The solutions provided in this application relate to the field of computer technology, and are specifically illustrated through the following embodiments.

[0057] See Figure 1The diagram shown is a flowchart of a page redirection method provided in an embodiment of this application. In this embodiment, it can be executed by a computer device.

[0058] S101: Using virtual scrolling technology, the list content in N groups is displayed in the terminal device, and N index controls corresponding to each of the N groups are displayed.

[0059] When a terminal device displays the contents of a list of N groups, it uses virtual scrolling within the virtual rendering container to render only the list items in the currently visible area, as well as some list items that are about to enter the visible area.

[0060] Index controls are used to manage page navigation. Each index control corresponds one-to-one with a group. By clicking the index control, the user can control the list content displayed for the corresponding group. Where N > 1.

[0061] S102: In response to the trigger operation of the first index control, determine the current position information of the target component in the virtual rendering container based on the offset mapping table.

[0062] The virtual rendering container is used to render the contents of N grouped lists. By using a virtual list to replace the actual list, it can render the content displayed in both the visible area (i.e., the display interface of the terminal device) and the invisible area of ​​the terminal device.

[0063] refer to Figure 2 The diagram shown is a schematic of a virtual list provided in an embodiment of this application. The multiple lists used for display are divided into 26 groups according to their first letter, and the list contents are displayed in alphabetical order. On the left side of the virtual list, some list contents included in groups C and D are displayed, and on the right side, some index controls of the index controls that correspond one-to-one with the 26 groups are displayed.

[0064] The virtual rendering container sets up a corresponding component for each group. The list content of each group is displayed on the terminal device's display interface after being rendered by the corresponding component.

[0065] The first index control is one of N index controls, and the target component is a component associated with the first index control.

[0066] In existing technologies, page navigation is achieved based on the initial rendering height of the corresponding component of the index control in the virtual rendering container. When the user clicks the index control, a scrolling operation is performed in the virtual rendering container based on a fixed height to render the corresponding list content, which is then displayed on the terminal device's display interface.

[0067] However, the relevant technology did not detect the dynamic changes in the height of the virtual list within each component in the virtual rendering container when the content of N components was rendered again due to asynchronous factors such as image loading, changes in text content length, or ad insertion.

[0068] In this embodiment of the application, the offset mapping table is used to identify the current position information of the components corresponding to the N groups in the virtual rendering container. In other words, the height information of the virtual list in the virtual rendering container at the current moment can be dynamically obtained through the offset mapping table.

[0069] In one possible implementation, the offset mapping table is constructed as follows:

[0070] A1: Obtain the starting position information of N components corresponding to N groups and the virtual rendering container. The N components are sub-containers inside the virtual rendering container.

[0071] A2: Based on the starting position information, determine the first height difference between the starting position of the top of each of the N components and the starting position of the top of the virtual rendering container, and construct an offset mapping table based on the first height difference;

[0072] A3: In response to a change in the height of the first component, determine the second height difference between the current position of the top of each component within the virtual rendering container and the starting position of the top of the virtual rendering container, and update the offset mapping table based on the second height difference.

[0073] The starting position information refers to the position information after the initial rendering of the list contents of N groups in the virtual rendering container.

[0074] By using the layout information acquisition interface provided by the browser, the starting position information of each component in the virtual rendering container and the virtual rendering container can be collected. Then, based on the starting position information, the first height difference between the starting position of the top of each component and the starting position of the top of the virtual rendering container can be determined, and an offset mapping table can be constructed based on the height difference.

[0075] The first component is one or more of N components. If the height of the first component among the N components in the virtual rendering container changes, it means that the height of some list items in the virtual list changes, and the actual list height in the display interface also changes accordingly. Then, based on the current position information of each component in the virtual rendering container at the current moment, the second height difference between the current position of the top of each component and the starting position of the top of the virtual rendering container is determined, and the offset mapping table is updated based on the height difference.

[0076] Therefore, by using the real-time height difference between the top of each component and the top of the virtual rendering container, the offset mapping table can be dynamically updated. This allows for precise positioning of the target list content when scrolling the virtual list based on the offset mapping table, avoiding page jump errors caused by changes in component height due to asynchronous loading.

[0077] In one possible implementation, step A3 includes:

[0078] B1: In response to a change in the height of the first component, determine the difference between the current height and the initial height of the first component, as well as the M components located after the first component within the virtual rendering container;

[0079] B2: Add the difference to the first height difference corresponding to the M components respectively to obtain the second height difference between the current position of the top of the M components and the starting position of the top of the virtual rendering container;

[0080] B3: Update the offset mapping table based on the second height difference corresponding to the M components.

[0081] When displaying lists in groups, the groups are usually displayed in a fixed order. When navigating using an index control, the position of the corresponding component in the virtual rendering container does not change. If the height of the first component changes, the height of the components before the first component will not be affected. Therefore, we can obtain only the current position information of the components after the first component in the virtual rendering container: First, determine the difference between the current height of the first component and the initial height corresponding to the starting position information, and the M components located after the first component in the virtual rendering container. Then, add the difference to the first height difference corresponding to the M components to obtain the second height difference between the current position of the top of the M components and the starting position of the top of the virtual rendering container. Update the current position information of the M components in the virtual rendering container in the offset mapping table.

[0082] This saves system resources and improves the efficiency of page rendering and redirection.

[0083] In one possible implementation, the method further includes:

[0084] C1: Dynamically monitor N components;

[0085] C2: If the content in the first component is dynamically updated, determine whether the height of the first component has changed.

[0086] You can dynamically monitor the content of N components by setting listener events. For example, you can use MutationObserver to monitor the content of the first component dynamically when the content is dynamically updated. Then, you can recapture the size information of each part of the content in the N components, such as images, lists, and text, and combine the total height of all the information to determine whether the height of the first component has changed.

[0087] Therefore, it can automatically adapt to asynchronous content updates (such as image loading and dynamic text), thereby dynamically correcting the offset mapping table through real-time monitoring, maintaining jump accuracy without manual refresh.

[0088] In one possible implementation, the key of the offset map is the group identifier for each group, and the value of the offset map is the height difference between the top of the component corresponding to each group and the top of the virtual rendering container at the current moment.

[0089] The identifier of each component in the virtual container can be consistent with the group identifier of the corresponding group to facilitate development and testing.

[0090] When this application uses an index control to navigate to a page, it navigates to the top of the corresponding group to display the list content within that group. In other words, the height of the list content within that group does not affect the accuracy of the page navigation.

[0091] Therefore, the offset mapping table can record the height difference between the top of each component and the top of the virtual rendering container. Then, based on the information in the offset mapping table, the page can jump to the top of the group corresponding to the first index control.

[0092] S103: Based on the current location information, render the target list content of the target component in the virtual rendering container so as to display the target list content in the visible area of ​​the terminal device.

[0093] The initial list within the visible area is typically the content of the first group of lists. The range of list items to be rendered within the visible area can be determined based on the size of the visible area and the size of the list items. Then, the content of the first group of lists is rendered based on this range.

[0094] When a user clicks the first index control to navigate to a new page, the initial list content within the visible area is first removed. Then, based on the current position information, a scrolling operation is performed within the virtual rendering container to scroll the target list content of the target component into the visible area of ​​the terminal device, thereby achieving precise page navigation.

[0095] Therefore, virtual scrolling technology can render only the list items within the currently visible area, significantly reducing the number of DOM elements and memory usage, thereby improving page rendering performance and response speed. At the same time, the offset mapping table can find the position information of the target component corresponding to the first index control in the virtual rendering container when the user triggers the first index control. In scenarios where the height within the grouped list changes dynamically, scrolling operations can be performed in the virtual rendering container based on the current position information, accurately locating the list content of the target component and displaying it on the terminal device's display interface, effectively improving the accuracy of page content navigation.

[0096] To more clearly describe this page redirection method, the following explanation will be provided in the context of a specific implementation scenario. (Reference) Figure 3 The diagram shown is a system architecture diagram of an application page navigation method provided in this application embodiment. The following four modules work together to achieve accurate navigation and high-performance rendering.

[0097] First, the list data is rendered using the virtual rendering container module to generate a virtual list. Then, the rendering result is input into the offset mapping module to build an offset mapping table. After that, the offset mapping module is updated through the asynchronous listening module. At the same time, the index jump module receives the user's page jump request, generates a scrolling instruction, and scrolls the virtual list through the virtual rendering container module.

[0098] The specific tasks of each module are as follows:

[0099] (1) Virtual Rendering Container Module: Responsible for rendering the list content in the display interface according to the data and configuration, by group dimension. This module uses virtual scrolling technology to generate and maintain DOM elements only within the visible area to optimize rendering performance and memory usage. It can be based on an existing mature virtual list library (such as an extension of VariableSizeList) or a custom implementation.

[0100] (2) Offset Mapping Module: Its core function is to dynamically record and maintain the precise vertical offset of each group within the virtual rendering container. This module builds and updates an offset mapping table, where the keys are group identifiers (such as the letters "A" and "B"), and the values ​​are the corresponding precise pixel offsets. This offset mapping table is the foundation for achieving precise jumps.

[0101] (3) Asynchronous listening module: Receives index jump requests from users (e.g., when a user clicks the index control in the sidebar). Based on the group identifier of the request, this module queries the offset mapping table to obtain the corresponding precise offset, and then calls the scrolling function of the virtual rendering container to smoothly scroll the target group into the visible area.

[0102] refer to Figure 4The diagram shown illustrates the listening logic of an asynchronous listening module provided in this embodiment. First, the index key clicked by the user (i.e., the index control) is obtained. Then, the offset mapping table is queried. If the offset mapping table exists, the target offset of the group corresponding to the index control is obtained. A scrolling function is then called for precise navigation, and a scrolling container is used to perform a scrolling operation, displaying the list content of the group corresponding to the index control within the visible area. If the offset mapping table does not exist, an error handling or default value is returned.

[0103] (4) Index Jump Module: Responsible for monitoring the size changes of each group of content within the virtual rendering container. When the height of any group changes due to asynchronous loading (such as images, videos) or dynamic content updates, this module can capture these changes and notify the offset mapping module to update accordingly, so as to ensure the real-time performance and accuracy of the offset mapping table.

[0104] The page redirection method provided in this application relies on the aforementioned system. Its workflow is designed to ensure efficient and accurate indexing and redirection under dynamic content and large data volumes, including the following steps:

[0105] Step 1: Data preprocessing and grouping.

[0106] First, the list data to be displayed is grouped according to preset rules (e.g., by the first letter of the pinyin) and each group is assigned a unique identifier.

[0107] Step 2: Component initialization and initial offset acquisition.

[0108] The virtual rendering container module begins rendering the initially visible grouped content. Simultaneously, the offset mapping module iterates through all rendered grouped containers (even invisible placeholders), using the browser's layout information acquisition interface to precisely capture the actual height of each group and its vertical offset relative to the top of the scrolling container, storing this data in the offset mapping table. This step ensures the accuracy of the offset mapping table in the initial state.

[0109] Step 3: Virtual list rendering and view management.

[0110] The virtual rendering container module continuously and dynamically renders and unloads grouped content within the visible area based on the user's scroll position. This means that only groups that the user can currently see or is about to see are rendered as actual DOM elements, thus significantly reducing DOM load and memory consumption.

[0111] Step 4: User index redirect response.

[0112] When a user clicks an index control in the sidebar, the index navigation module receives the request. It immediately queries the vertical offset in the offset mapping module and obtains the precise vertical offset based on the group identifier corresponding to the clicked index control. Subsequently, the index navigation module calls the scroll function of the scroll container to smoothly and accurately scroll the page to the top of the target group.

[0113] Step 5: Asynchronous content update and offset correction.

[0114] During the display of list content, if asynchronous loading (e.g., image loading completion, dynamic text content updates, ad loading, etc.) causes a change in the height of a component, the asynchronous listening module will capture these size changes in real time. Once a change is detected, the asynchronous listening module will trigger the offset mapping module to recalculate the vertical offset of the affected group and all subsequent groups, and update the offset mapping table. (Reference) Figure 5 The diagram illustrates a method for dynamically updating an offset mapping table according to an embodiment of this application. First, an asynchronous listener is initialized via an asynchronous listening module to monitor changes in group height. When a height change is detected, the offset mapping module is notified to update, recalculating the offset of the affected group and updating the offset mapping table. This process is automatic and real-time, ensuring that even with dynamic content changes, subsequent index jumps maintain high accuracy without requiring manual refresh by the user.

[0115] Therefore, the technical solution of this application solves the problems of inaccurate index jumping caused by dynamic changes in list item height and low performance of traditional rendering methods when displaying large amounts of grouped data (such as city selection, brand index, and contact list). This is achieved by dynamically calculating and accurately maintaining the group height information in the offset mapping table, combining virtual scrolling technology to render only the visible area, and introducing an asynchronous content update listening mechanism. It ensures accurate index jumping and high-performance rendering even in complex scenarios with massive list items and dynamic content loading, significantly improving the user experience. The solution has the following advantages:

[0116] (1) High-precision jump: Realizes dynamic collection of list group height and precise jump, with error controllable within a very small range (usually less than 1px), significantly improving user experience.

[0117] (2) Strong adaptability: It automatically adapts to asynchronous content updates (such as image loading and dynamic text), and maintains the jump accuracy by monitoring and dynamically correcting the offset mapping table in real time without manual refresh.

[0118] (3) High-performance rendering: Combined with the virtual list component, only the DOM elements in the area visible to the current user are rendered, which greatly reduces memory usage and rendering overhead, ensuring smooth operation under large data volume.

[0119] (4) Clear and scalable architecture: The system structure is modular, the design is clear, and it is easy to understand and maintain. The solution is compatible with mainstream front-end frameworks (such as React) and has good cross-platform compatibility and scalability.

[0120] (5) Excellent user experience: Provides a fast, accurate and smooth indexing experience, especially suitable for mobile and data-intensive applications.

[0121] Based on the above embodiments, this application provides a page redirection device, with reference to... Figure 6 The diagram shown is a schematic of a page navigation device provided in an embodiment of this application. The device 600 includes a display unit 601, a determination unit 602, and a rendering unit 603.

[0122] The display unit is used to group and display the list content in N groups in the terminal device using virtual scrolling technology, and to display N index controls corresponding to the N groups respectively, where N>1;

[0123] The determining unit is used to respond to the triggering operation of the first index control, and determine the current position information of the target component in the virtual rendering container based on the offset mapping table. The first index control is one of the N index controls, the target component is a component associated with the first index control, the virtual rendering container is used to render the list content of the N groups, and the offset mapping table is used to identify the current position information of the components corresponding to the N groups in the virtual rendering container.

[0124] The rendering unit is used to remove the initial list content within the visible area of ​​the virtual rendering container, and perform a scrolling operation within the virtual rendering container based on the current position information, so as to display the target list content of the target component within the visible area of ​​the terminal device.

[0125] Therefore, virtual scrolling technology can render only the list items within the currently visible area, significantly reducing the number of DOM elements and memory usage, thereby improving page rendering performance and response speed. At the same time, the offset mapping table can find the position information of the target component corresponding to the first index control in the virtual rendering container when the user triggers the first index control. In scenarios where the height within the grouped list changes dynamically, scrolling operations can be performed in the virtual rendering container based on the current position information, accurately locating the list content of the target component and displaying it on the terminal device's display interface, effectively improving the accuracy of page content navigation.

[0126] In one possible implementation, the apparatus further includes a building unit, the building unit being used for:

[0127] Obtain the N components corresponding to the N groups and the starting position information of the virtual rendering container, wherein the N components are sub-containers inside the virtual rendering container;

[0128] Based on the starting position information, a first height difference between the starting position of the top of each of the N components and the starting position of the top of the virtual rendering container is determined, and an offset mapping table is constructed based on the first height difference.

[0129] In response to a change in the height of the first component, a second height difference is determined between the current position of the top of each component within the virtual rendering container and the starting position of the top of the virtual rendering container, and the offset mapping table is updated based on the second height difference, wherein the first component is one or more of the N components.

[0130] Therefore, by using the real-time height difference between the top of each component and the top of the virtual rendering container, the offset mapping table can be dynamically updated. This allows for precise positioning of the target list content when scrolling the virtual list based on the offset mapping table, avoiding page jump errors caused by changes in component height due to asynchronous loading.

[0131] In one possible implementation, the determining unit is specifically used for:

[0132] In response to a change in the height of the first component, the difference between the current height and the initial height of the first component is determined, as well as the M components located after the first component within the virtual rendering container;

[0133] The difference is added to the first height difference corresponding to the M components respectively to obtain the second height difference between the current position of the top of the M components and the starting position of the top of the virtual rendering container;

[0134] The offset mapping table is updated based on the second height difference corresponding to the M components.

[0135] This saves system resources and improves the efficiency of page rendering and redirection.

[0136] In one possible implementation, the device further includes a detection unit:

[0137] The detection unit is used to dynamically monitor the N components;

[0138] The determining unit is further configured to determine whether the height of the first component has changed if the content in the first component is dynamically updated.

[0139] Therefore, it can automatically adapt to asynchronous content updates (such as image loading and dynamic text), thereby dynamically correcting the offset mapping table through real-time monitoring, maintaining jump accuracy without manual refresh.

[0140] In one possible implementation, the key of the offset map is a group identifier for each group, and the value of the offset map is the height difference between the top of the component corresponding to each group and the top of the virtual rendering container at the current moment.

[0141] Therefore, the offset mapping table can record the height difference between the top of each component and the top of the virtual rendering container. Then, based on the information in the offset mapping table, the page can jump to the top of the group corresponding to the first index control.

[0142] Based on the above embodiments, this application provides a computer device, which includes a processor and a memory:

[0143] The memory is used to store computer programs;

[0144] The processor is used to execute the above-described page redirection method according to the computer program.

[0145] Based on the above embodiments, this application provides a computer-readable storage medium for storing a computer program, which, when executed by a computer device, implements the above-described page redirection method.

[0146] Based on the above embodiments, this application provides a computer program product including a computer program, which, when run on a computer device, causes the computer device to execute the above-described page redirection method.

[0147] It should be noted that the various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the systems or apparatus disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and relevant parts can be referred to the method section.

[0148] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page jump method, characterized by, The method comprises: grouping display of list content in N groups in a terminal device through a virtual scrolling technology, and displaying N index controls corresponding to the N groups respectively, wherein N>1; in response to a triggering operation of a first index control, determining current position information of a target component in a virtual rendering container based on an offset mapping table, the first index control being one of the N index controls, the target component being a component associated with the first index control, the virtual rendering container being used for rendering list content of the N groups, and the offset mapping table being used for identifying current position information of components corresponding to the N groups in the virtual rendering container; removing initial list content in a visible area in the virtual rendering container, and performing a scrolling operation in the virtual rendering container based on the current position information, so as to display target list content of the target component in the visible area of the terminal device.

2. The method of claim 1, wherein, The offset mapping table is constructed in the following manner: obtaining N components corresponding to the N groups and starting position information of the virtual rendering container, the N components being sub-containers inside the virtual rendering container; based on the starting position information, determining a first height difference between a starting position of a top of each component in the N components and a starting position of a top of the virtual rendering container, and constructing an offset mapping table based on the first height difference; in response to a change in height of a first component, determining a second height difference between a current position of a top of each component in the virtual rendering container and the starting position of the top of the virtual rendering container, and updating the offset mapping table based on the second height difference, the first component being one or more of the N components.

3. The method of claim 2, wherein, The response to the change in height of the first component, the determination of the second height difference between the current position of the top of each component in the virtual rendering container and the starting position of the top of the virtual rendering container, and the updating of the offset mapping table based on the second height difference comprise: in response to a change in height of a first component, determining a difference between a current height and an initial height of the first component, and M components located after the first component in the virtual rendering container; performing addition operations on the difference and the first height difference corresponding to the M components respectively, to obtain second height differences between the current positions of the tops of the M components and the starting position of the top of the virtual rendering container; updating the offset mapping table based on the second height differences corresponding to the M components.

4. The method of claim 2, wherein, The method further comprises: dynamically monitoring the N components; if content in the first component is dynamically updated, determining whether the height of the first component changes.

5. The method according to any one of claims 1-2, characterized in that, The key of the offset mapping table is a group identifier of each group, and the value of the offset mapping table is a height difference between a top of a component corresponding to each group and a top of the virtual rendering container at a current time.

6. A page jump apparatus characterized by comprising: The apparatus comprises a display unit, a determination unit, and a rendering unit: The display unit is configured to display the list contents in the N groups by using a virtual scrolling technology and display N index controls corresponding to the N groups respectively, where N>1. The determination unit is configured to determine, in response to a triggering operation of a first index control, current position information of a target component in a virtual rendering container based on an offset mapping table, the first index control being one of the N index controls, the target component being one component associated with the first index control, the virtual rendering container being configured to render the list contents in the N groups, and the offset mapping table being configured to identify current position information of components corresponding to the N groups in the virtual rendering container. The rendering unit is configured to remove initial list contents in a visible area in the virtual rendering container and perform a scrolling operation in the virtual rendering container based on the current position information to display target list contents of the target component in the visible area of the terminal device.

7. The apparatus of claim 6, wherein, The apparatus further includes a construction unit configured to: obtain N components corresponding to the N groups and starting position information of the virtual rendering container, the N components being sub-containers inside the virtual rendering container; determine, based on the starting position information, a first height difference between a starting position of a top of each component in the N components and a starting position of a top of the virtual rendering container, and construct an offset mapping table based on the first height difference; in response to a change in a height of a first component, determine a second height difference between a current position of a top of each component in the virtual rendering container and the starting position of the top of the virtual rendering container, and update the offset mapping table based on the second height difference, the first component being one or more of the N components.

8. A computer device, comprising: The computer device includes a processor and a memory: The memory is configured to store a computer program; The processor is configured to execute the method according to any one of claims 1-5 based on the computer program.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium is configured to store a computer program, which, when executed by a computer device, implements the method according to any one of claims 1-5.

10. A computer program product comprising a computer program, characterised in that, When it runs on a computer device, it makes the computer device execute the method according to any one of claims 1-5.

Images