Page jump method and device, computer device, and storage medium

Abstract

The present disclosure provides a page jump method and device, computer equipment and a storage medium, wherein the method comprises: in response to a jump instruction of a jump anchor point in a long list page, determining a first component associated with the jump anchor point in a target list of the long list page; determining a component height of the first component, wherein the component height is determined based on a position of the first component in the target list; determining a target rendering area matching the jump anchor point from the long list page based on the component height; determining a second component in the target list within the target rendering area, and displaying the second component and list display data corresponding to the second component in a visible area of the long list page; wherein the second component comprises the first component.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a method, apparatus, computer device, and storage medium for page navigation. Background Technology

[0002] With the development of mobile internet technology, the content presented on user-end pages has become richer and more diverse, and the requirements for various page technologies are also getting higher and higher. Although traditional web page technologies are widely used, due to the technical limitations of embedding web pages into apps (Applications), their display effect on content-rich pages is not ideal. In view of this, for content-rich pages, existing technologies usually use long lists for display.

[0003] For list pages, the industry typically uses virtual scrolling lists instead of physical scrolling lists. This means that when maintaining the list, only the content displayed within the current screen height is maintained, and the displayed elements within the screen are dynamically replaced during scrolling. However, long lists based on virtual scrolling technology cannot use the page's point-to-point navigation function, which limits the application scenarios of long list pages and thus reduces the user experience. Summary of the Invention

[0004] This disclosure provides at least one method, apparatus, computer device, and storage medium for page navigation.

[0005] In a first aspect, embodiments of this disclosure provide a page navigation method, comprising: responding to a navigation instruction on a navigation anchor point in a long list page, determining a first component in a target list of the long list page associated with the navigation anchor point; determining a component height of the first component, wherein the component height is determined based on the position of the first component in the target list; determining a target rendering area in the long list page that matches the navigation anchor point based on the component height; determining a second component in the target list located within the target rendering area, and displaying the second component and list display data corresponding to the second component in a visible area of ​​the long list page; wherein the second component includes the first component.

[0006] In one optional implementation, determining the target rendering area matching the jump anchor point from the long list page based on the component height includes: determining the jump type of the jump anchor point; wherein the jump type is used to indicate the jump method of the visible area of ​​the long list page jumping from the current display area to the jump anchor point; and determining the target rendering area based on the jump type and the component height.

[0007] In one optional implementation, determining the target rendering area based on the jump type and the component height includes: when the jump type is a first jump type, obtaining the region height of the visible area; wherein the first jump type is used to indicate a direct jump from the current display area to the jump anchor point; determining the target rendering area in the target list based on the component height and the region height of the visible area; wherein the region height of the target rendering area is the region height of the visible area, and the first component is located within the target rendering area.

[0008] In one optional implementation, determining the target rendering region in the target list based on the component height and the region height of the visible area includes: determining the predicted display position of the first component in the target rendering region; and processing the component height and the region height of the visible area according to a processing mode that matches the predicted display position to obtain the target rendering region.

[0009] In one optional implementation, determining the target rendering area based on the jump type and the component height includes: when the jump type is a second jump type, determining the display height of the current display area in the target list; wherein the second jump type is used to indicate a jump from the current display area to the jump anchor point via a transition animation; determining the height difference between the display height and the component height; and determining the target rendering area based on the list area in the target list corresponding to the height difference.

[0010] In one optional implementation, the target rendering area includes multiple sub-regions; determining the target rendering area based on the list area corresponding to the height difference in the target list includes: determining the number of animation frames in the transition animation corresponding to the second jump type; dividing the list area into multiple sub-regions based on the number of animation frames; wherein each sub-region corresponds to one animation frame in the transition animation, and the sub-region is the rendering area corresponding to each animation frame in the transition animation.

[0011] In one optional implementation, displaying the second component and the list display data corresponding to the second component in the visible area of ​​the long list page includes: performing layout rendering on the second component within the target rendering area based on the list display data to obtain the component rendering result of the target rendering area; and displaying the component rendering result in the visible area.

[0012] In one optional implementation, the target rendering area includes multiple sub-areas; the step of performing layout rendering on the second component within the target rendering area based on the list display data to obtain the component rendering result of the target rendering area includes: performing layout rendering on the second component within each sub-area based on the list display data to obtain a sub-rendering result for each sub-area; and concatenating each sub-rendering result with the current display area of ​​the long list page to obtain the component rendering result.

[0013] Secondly, embodiments of this disclosure provide a page navigation device, comprising: a first component determining unit, configured to determine a first component associated with the jump anchor in a target list of the long list page in response to a jump instruction on a jump anchor in the long list page; a height determining unit, configured to determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list; a display area determining unit, configured to determine a target rendering area matching the jump anchor in the long list page based on the component height; a second component determining unit, configured to determine a second component located within the target rendering area in the target list; wherein the second component includes the first component; and a display unit, configured to display the second component and list display data corresponding to the second component in a visible area of ​​the long list page.

[0014] Thirdly, embodiments of this disclosure also provide a computer device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0015] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation of the first aspect.

[0016] In this embodiment of the disclosure, firstly, in response to a jump instruction on a jump anchor point in a long list page, a first component associated with the jump anchor point in the target list of the long list page is determined; then, the component height of the first component can be determined, and a target rendering area matching the jump anchor point in the long list page is determined based on the component height; next, a second component located within the target rendering area can be determined, and the second component and the list display data corresponding to the second component are displayed, where the second component includes the first component.

[0017] In the above embodiments, by determining the target rendering area that matches the jump anchor point based on the component height, and displaying the second component and the list display data corresponding to the second component within the target rendering area in the visible area of ​​the long list page, partial rendering of the list content (i.e., the second component and its list display data) can be achieved. Thus, when applying the virtual scrolling scheme in the long list page, it is not necessary to render all the list content, thereby reducing the rendering cost of the page, expanding the application scenarios of the long list page, and improving the user experience.

[0018] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0019] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0020] Figure 1 A flowchart illustrating a page navigation method provided in an embodiment of this disclosure is shown;

[0021] Figure 2 A flowchart of a target initialization operation provided by an embodiment of this disclosure is shown;

[0022] Figure 3 The flowchart illustrates a specific method for determining a target rendering area that matches the jump anchor point based on the component height in the page jump method provided in this embodiment of the present disclosure.

[0023] Figure 4 The flowchart illustrates a specific method for displaying the second component and the list display data corresponding to the second component in the visible area of ​​the long list page in the page navigation method provided in the embodiments of this disclosure.

[0024] Figure 5 A flowchart illustrating another page navigation method provided in an embodiment of this disclosure is shown;

[0025] Figure 6 A schematic diagram of a page navigation device provided in an embodiment of this disclosure is shown;

[0026] Figure 7A schematic diagram of a computer device provided in an embodiment of this disclosure is shown. Detailed Implementation

[0027] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0028] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0029] In this document, the term "and / or" merely describes a relationship, indicating that three relationships can exist. For example, A and / or B can represent three cases: A alone, A and B simultaneously, and B alone. Furthermore, the term "at least one" in this document means any combination of at least two of any one or more elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0030] Research has found that with the development of mobile internet technology, the content presented on user-end pages has become richer and more diverse, and the requirements for various page technologies are also getting higher and higher. Although traditional web page technologies are widely used, due to the technical limitations of embedding web pages into apps, their display effect on content-rich pages is not ideal. In view of this, for content-rich pages, existing technologies usually use long lists for display.

[0031] For long list pages, the industry typically uses virtual scrolling lists instead of physical scrolling lists. This means that when maintaining the list, only the content displayed within the current screen height is maintained, and the displayed elements within the screen are dynamically replaced as the page scrolls. Applying a virtual scrolling solution can effectively reduce the number of content nodes that need to be maintained on the page, thereby significantly reducing page complexity.

[0032] Furthermore, targeted navigation is a widely used capability. For example, when users are selecting movie tickets or reading articles, they often need to jump to a specific location, such as a particular chapter or a specific ticket purchase time. Therefore, jumping to a specific anchor point is a very common interaction. A prerequisite for using targeted navigation on long list pages is that all list content on the long list page must be rendered before the targeted navigation.

[0033] Since virtual scrolling doesn't render all the content in the list, achieving a fixed-point jump requires rendering all the list content during the jump, increasing rendering costs and negating the advantages of virtual scrolling. Therefore, in "fixed-point jump" scenarios, virtual scrolling cannot use the browser's native `scrollTo` (animated scroll to element or position) and `smooth` (smooth transition) properties like a traditional scrolling list. This limits the application scenarios for long list pages and reduces the user experience.

[0034] Based on the above research, this disclosure provides a page navigation method, apparatus, computer device, and storage medium. In an embodiment of this disclosure, firstly, in response to a navigation instruction to a navigation anchor point in a long list page, a first component associated with the navigation anchor point is determined in the target list of the long list page; then, the component height of the first component is determined, and based on the component height, a target rendering area matching the navigation anchor point is determined from the long list page; next, a second component located within the target rendering area is determined, and the second component and the list display data corresponding to the second component are displayed, wherein the second component includes the first component.

[0035] In the above embodiments, by determining the target rendering area that matches the jump anchor point based on the component height, and displaying the second component and the list display data corresponding to the second component within the target rendering area in the visible area of ​​the long list page, partial rendering of the list content (i.e., the second component and its list display data) can be achieved. Thus, when applying the virtual scrolling scheme in the long list page, it is not necessary to render all the list content, thereby reducing the rendering cost of the page, expanding the application scenarios of the long list page, and improving the user experience.

[0036] To facilitate understanding of this embodiment, a page navigation method disclosed in this disclosure will first be described in detail. The execution entity of the page navigation method provided in this disclosure is generally a computer device with certain computing capabilities. This computer device may include, for example, a terminal device, a server, or other processing devices. The terminal device may be a user equipment (UE), a mobile device, a user terminal, or a terminal. In some possible implementations, the page navigation method can be implemented by the processor calling computer-readable instructions stored in memory.

[0037] See Figure 1 The diagram shows a flowchart of a page navigation method provided in an embodiment of this disclosure. The method includes steps S101 to S107, wherein:

[0038] S101: In response to a jump instruction on a jump anchor in a long list page, determine a first component in the target list of the long list page that is associated with the jump anchor.

[0039] Here, jump anchors can be used to indicate the target jump location within a long list page. For example, if the long list page is the book reading page for the target book, and assuming the visible area of ​​the book reading page currently displays Chapter 1 of the target book, then if the user wants to jump to Chapter 3, Chapter 3 can be understood as the aforementioned target jump location.

[0040] After detecting a user's trigger action on a target button in the long list page, it is determined that a jump instruction for a jump anchor point in the long list page has been detected; wherein, the target button is a button in the long list page used to trigger a jump from the long list page to the target jump position corresponding to the jump anchor point.

[0041] In this embodiment of the disclosure, corresponding component index information can be pre-set for each jump anchor point so as to determine the component corresponding to the jump anchor point through the component index information.

[0042] Here, after detecting a jump instruction for a jump anchor point, the component index information corresponding to the jump anchor point can be determined, and based on the component index information, the component associated with the jump anchor point can be determined as the first component in the target list.

[0043] S103: Determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list.

[0044] In this embodiment of the disclosure, after the first component is determined, the component height of the first component can be determined.

[0045] Here, a list of component heights can be obtained, which contains the component index information and component height of each component in the target list. Then, the component height of the first component can be determined from the component height list based on its component index information.

[0046] Here, the component height can be used to indicate the distance between the bottom of the first component and the target list, or to indicate the distance between the top of the first component and the target list. This disclosure does not specifically limit this, but only to what is feasible.

[0047] S105: Based on the component height, determine the target rendering area that matches the jump anchor point from the long list page.

[0048] Here, the target rendering area is used to indicate the area in the target list that needs to be rendered and displayed in the visible area when the visible area of ​​the long list page jumps from the current display area to the jump anchor point (or the target jump position).

[0049] In this embodiment of the disclosure, after determining the component height, the visible area of ​​the long list page during the process of jumping from the current display area to the target jump position can be predicted based on the component height, thereby obtaining the target rendering area.

[0050] Since jump anchors correspond to various jump types—meaning there are multiple ways for the visible area of ​​a long list page to jump from the current display area to the target jump position—and different jump methods correspond to different target rendering areas, resulting in different jump effects, we can also combine the jump anchor type and component height to determine the rendering area (i.e., the target rendering area) during the process of the visible area of ​​the long list page jumping from the current display area to the target jump position.

[0051] S107: Determine the second component in the target list located within the target rendering area, and display the second component and the list display data corresponding to the second component in the visible area of ​​the long list page; wherein, the second component includes the first component.

[0052] After determining the target rendering area, the second component in the target list that is located within the target rendering area can be identified. Here, the second component contains the first component.

[0053] After the second component is determined, the component layout rendering of the second component can be performed to obtain the component rendering result of the second component; next, the component rendering result of the second component can be displayed on the display screen, where the content displayed on the display screen is the content displayed in the visible area of ​​the long list page.

[0054] In this embodiment of the disclosure, firstly, in response to a jump instruction on a jump anchor point in a long list page, a first component associated with the jump anchor point in the target list of the long list page is determined; then, the component height of the first component can be determined, and based on the component height, a target rendering area matching the jump anchor point is determined from the long list page; next, a second component located within the target rendering area can be determined, and the second component and the list display data corresponding to the second component are displayed.

[0055] In the above embodiments, by determining the target rendering area that matches the jump anchor point based on the component height, and displaying the second component and the list display data corresponding to the second component within the target rendering area in the visible area of ​​the long list page, partial rendering of the list content (i.e., the second component and its list display data) can be achieved. Thus, when applying the virtual scrolling scheme in the long list page, it is not necessary to render all the list content, thereby reducing the rendering cost of the page, expanding the application scenarios of the long list page, and improving the user experience.

[0056] The above steps will be described below with reference to specific implementation methods.

[0057] In this embodiment of the disclosure, before executing the processes described in steps S101 to S107 above, a target initialization operation needs to be completed. Through this target initialization operation, the component height of each component in the target list can be determined, thereby obtaining a component height list. For example... Figure 2 As shown, the specific operation process of the target initialization operation is described as follows:

[0058] (1) Obtain the list data of the long list page and obtain the component generation rules; where the target list data is the data to be rendered into the visible area corresponding to the long list page.

[0059] (2) Generate a container outside the visible area, and generate display components in the container based on the list data and component generation rules; wherein, the display component is the component currently displayed in the visible area, and the display component contains multiple components, each of which is used to display the corresponding list data.

[0060] Here, the display component is the carrier of list data in the display interface. The components in the display component are the unit components of the display component. The display component can be composed of multiple different components, and each component can be the carrier of part of the list data. The component generation rules are used to define the relative positional relationship of each component in the display component.

[0061] (3) Determine whether the event indicating that the display component has been generated has been detected. If yes, proceed with the subsequent steps; otherwise, continue listening.

[0062] When a display component is fully generated, its label will be modified, changing from an initial null value to the value of the display component itself. Based on this, event signals can be obtained by listening for changes in the label. When the label changes, it can be determined that the display component has been fully generated; if no change in the label is detected, it means that the display component has not yet been fully generated, so continue listening.

[0063] (4) Iterate through the ClientHeight (height of the visible area of ​​the web page content) property of each component in the display component to obtain the component height of each component and record it.

[0064] (5) Establish a mapping relationship between each component in the display components and the corresponding component height to obtain a list of component heights.

[0065] In practice, the component index information of each component in the display component can be determined, and a mapping relationship between the component index information and the component height can be established to obtain a list of component heights.

[0066] (6) Delete the generated display components. Once the list of associated component heights is generated, the process of obtaining the component heights is complete. To reduce memory load, the generated display components can be deleted.

[0067] Here, for each component in the long list page, the component height of each component can be determined in the manner described above, thereby obtaining a component height list containing the component heights of each component in the target list.

[0068] In this embodiment of the disclosure, the target initialization operation can be completed in the manner described above after detecting that a user has accessed the long list page.

[0069] After completing the target initialization, user actions on the target button can be detected. Upon detecting a trigger action, a jump instruction to the jump anchor point can be identified. Then, the first component can be determined based on the component index information corresponding to the jump anchor point, and its height can be determined from the component height list based on that component index information. Finally, the target rendering area can be determined based on this component height.

[0070] In one alternative implementation, such as Figure 3 As shown, step S105 above determines the target rendering area that matches the jump anchor point based on the component height, specifically including the following steps:

[0071] Step S301: Determine the jump type of the jump anchor point; wherein, the jump type is used to indicate the jump method in which the visible area of ​​the long list page jumps from the current display area to the jump anchor point;

[0072] Step S302: Determine the target rendering area based on the jump type and the component height.

[0073] In this embodiment of the disclosure, the anchor point attribute information corresponding to the jump anchor point can be obtained, and the jump type corresponding to the jump anchor point can be determined based on the anchor point attribute information.

[0074] Here, the jump types corresponding to the jump anchor points typically include the following: instant type (direct jump type) and smooth type (jump type with transition animation). The instant type indicates a jump from the current display area to the jump anchor point (or, the target jump position) without transition animation. The smooth type indicates a jump from the current display area to the jump anchor point (or, the target jump position) with transition animation.

[0075] Because different jump types correspond to different jump methods, and different jump methods correspond to different target rendering areas, the jump effects presented are also different.

[0076] Based on this, the target rendering area that matches the jump anchor point can be determined in the target list based on the jump type and component height.

[0077] In practice, a jump processing mode that matches the jump type can be determined, wherein the jump processing mode is used to indicate how to process the component height; then, the component height of the first component can be processed based on the jump processing mode to calculate the target rendering area.

[0078] In the above embodiments, by determining the target rendering area based on the jump type and component height of the jump anchor point, the application scenarios of the page jump method provided in this disclosure can be enriched, thereby satisfying the automatic page jump of various types of jump anchor points according to their respective jump methods.

[0079] The process of determining the target rendering area will be described below according to different jump types.

[0080] Case 1: The jump type is the first jump type.

[0081] In this case, step S302 above determines the target rendering area based on the jump type and the component height, specifically including the following steps:

[0082] Step S11: Obtain the region height of the visible area; wherein, the first jump type is used to indicate a direct jump from the current display area to the jump anchor point;

[0083] Step S12: Based on the component height and the region height of the visible area, determine the target rendering region in the target list; wherein, the region height of the target rendering region is the region height of the visible area, and the first component is located within the target rendering region.

[0084] Here, the first jump type can be understood as the instant type (direct jump type) described above, that is, jumping from the current display area to the jump anchor point without transition animation, that is, jumping directly from the current display area to the jump anchor point.

[0085] In this embodiment, the screen height, or the height of the visible area, can be obtained using the browser's built-in screenHeight property. Then, the target rendering area can be determined based on the component height of the first component and the height of the visible area.

[0086] In this case, the target rendering area can be understood as the area corresponding to the target jump position. At this time, the area height of the target rendering area is one screen height, that is, the area height of the target rendering area is the area height of the visible area. In this case, the first component is located at the target position within the target rendering area, where the target position includes any of the following: the center of the target rendering area, the top edge of the target rendering area, and the bottom edge of the target rendering area.

[0087] For example, a long list page might be a book list page, containing multiple book descriptions and category tags, such as "urban" and "historical." Each category tag includes corresponding book descriptions. Let's assume the currently displayed area shows the descriptions for the book with the "urban" category tag. If a trigger action is detected on the "historical" category tag, then the relevant area of ​​the long list page displaying the descriptions for books belonging to the "historical" category will become the target rendering area.

[0088] For example, a long list page might be a news page, containing multiple news items and category tags, such as "Sports" and "Society." Each category tag contains matching news information. Assume the currently displayed area shows the news information corresponding to the "Sports" category tag. If a trigger action is detected on the "Society" category tag, then the relevant area of ​​the "Society" news information on the long list page will become the target rendering area.

[0089] For different target locations, the method for determining the target rendering area based on the component height and the area height of the visible region is different.

[0090] In an optional implementation, the target rendering area is determined from the target list based on the component height and the region height of the visible area, specifically including the following steps:

[0091] First, determine the predicted display position of the first component in the target rendering area;

[0092] Secondly, the component height and the area height of the visible area are processed according to a processing mode that matches the predicted display position to obtain the target rendering area.

[0093] Since the target rendering area is the area where the target jump location is located, the first component corresponding to the jump anchor point is usually contained within this target rendering area.

[0094] In practice, the target position of the first component corresponding to the jump anchor point in the target rendering area can be predicted based on the anchor point attribute information of the jump anchor point, so as to obtain the predicted display position, such as the center of the target rendering area, the top edge of the target rendering area, or the bottom edge of the target rendering area.

[0095] Next, we can determine the processing mode that matches the predicted display position. The processing modes are described below in different cases:

[0096] Processing Mode 1: Predict the display position as the center of the target rendering area.

[0097] In this mode, the processing pattern that matches the predicted display position is: [ah / 2, a+h / 2]; where a represents the component height and h represents the area height of the visible region.

[0098] In other words, in this mode, the target rendering area is obtained by taking half of the screen's display area upwards and half of the screen's display area downwards, with the jump anchor point as the center.

[0099] Processing Mode 2: Predict the display position to be at the top edge of the target rendering area.

[0100] In this mode, the processing pattern that matches the predicted display position is: [a, ah]; where a represents the component height and h represents the area height of the visible region.

[0101] In other words, in this mode, the target rendering area is obtained by taking the top edge of the target rendering area along the X-axis where the jump anchor point is located, and then taking down one screen's display area.

[0102] Processing Mode 3: Predict the display position to be at the bottom edge of the target rendering area.

[0103] In this mode, the processing pattern that matches the predicted display position is: [a+h, a]; where a represents the component height and h represents the area height of the visible region.

[0104] In other words, in this mode, the target rendering area is obtained by taking the bottom edge of the target rendering area along the X-axis where the jump anchor point is located, and then taking the display area of ​​one screen upwards.

[0105] After determining the processing mode that matches each predicted display position, the component height and the area height of the visible region can be processed based on the processing mode to obtain the target rendering area.

[0106] For the above processing mode 1: [ah / 2, a+h / 2].

[0107] For example, if the area height h is 600px and the component height a of the first component corresponding to the jump anchor point is 1500px, then the area range corresponding to the target rendering area is [1500-600 / 2, 1500+600 / 2], that is, the area range corresponding to the target rendering area is: [1200px, 1800px].

[0108] Regarding the above processing mode two: [a, ah].

[0109] For example, if the area height h is 600px and the component height a of the first component corresponding to the jump anchor is 1500px, then the area range corresponding to the target rendering area is [1500, 1500-600], that is, the area range corresponding to the target rendering area is: [1500px, 900px].

[0110] Regarding the above processing mode three: [a+h, a].

[0111] For example, if the area height h is 600px and the component height a of the first component corresponding to the jump anchor point is 1500px, then the area range corresponding to the target rendering area is [1500+600, 1500], that is, the area range corresponding to the target rendering area is: [2100px, 1500px].

[0112] In the above embodiments, the above processing method can realize partial rendering of list content (i.e., list content corresponding to the target rendering area). Therefore, when applying the virtual scrolling scheme in a long list page, it is not necessary to render all list content, thereby reducing the rendering cost of the page, expanding the application scenarios of long list pages, and improving the user experience.

[0113] Scenario 2: The jump type is the second jump type.

[0114] In this case, step S302 above determines the target rendering area based on the jump type and the component height, specifically including the following steps:

[0115] Step S21: Determine the display height of the current display area in the target list; wherein, the second jump type is used to indicate a jump from the current display area to the jump anchor point by means of a transition animation;

[0116] Step S22: Determine the height difference between the display height and the component height;

[0117] Step S23: Determine the target rendering area based on the list area in the target list that corresponds to the height difference.

[0118] In this embodiment of the disclosure, the second jump type can be understood as the smooth type (jump type with transition animation) described above, that is, jumping from the current display area to the jump anchor point (or, the target jump position) through a jump method with transition animation, that is, jumping from the current display area to the jump anchor point through a transition animation. Here, transition animation refers to playing an animation that scrolls from the current display area to the jump anchor point within the visible area.

[0119] In practice, the display height of the currently displayed area within the target list can be determined, for example, 18000px. Then, the height difference between the display height and the component height can be calculated. If the height of the first component corresponding to the jump anchor point is 27000px, then the height difference is 27000 - 18000 = 9000px. This height difference of 9000px can be used to indicate the overall rendering distance from the current display area to the jump anchor point. For example, [27000, 18000] represents the overall rendering distance from the current display area to the jump anchor point.

[0120] Once the height difference is determined, the target rendering area can be determined based on the overall rendering distance indicated by the height difference. For example, the range of the target rendering area can be [27000, 18000].

[0121] Since the transition animation consists of multiple animation frames, the rendering height of each animation frame is a portion of the target rendering region. Therefore, it is also necessary to determine the rendering region corresponding to each animation frame within the target rendering region.

[0122] Based on this, when the target rendering area includes multiple sub-regions, step S23 above determines the target rendering area based on the list area in the target list corresponding to the height difference, specifically including the following steps:

[0123] Step S231: Determine the number of animation frames in the transition animation corresponding to the second jump type;

[0124] Step S232: Divide the list area into multiple sub-regions based on the number of animation frames; wherein each sub-region corresponds to one animation frame in the transition animation, and the sub-region is the rendering area corresponding to each animation frame in the transition animation.

[0125] In this embodiment of the disclosure, firstly, the playback time of the transition animation can be determined, and then the number of animation frames in the transition animation can be determined based on the playback time. For example, if the playback time is 1 second, then the number of animation frames in the transition animation can be 30 frames.

[0126] After determining the number of animation frames, the list area corresponding to the height difference can be divided into multiple sub-regions based on the number of animation frames. Each sub-region is the rendering area corresponding to each animation frame as described above.

[0127] Assuming the list area corresponding to the height difference is the area corresponding to [27000, 18000], then multiple sub-regions can be [18000, 18300], [18300, 18600], [18600, 18900], [18900, 19200], ..., [26700, 27000].

[0128] Here, to optimize the scrolling effect of the transition animation, the sub-region [18000, 18300] can be discarded, and the animation can start from [18300, 18600].

[0129] In the above embodiments, for the transition animation-based jump method, by determining the rendering area of ​​each animation frame, it is possible to render only the list area that needs to be rendered, instead of rendering all the list content. This reduces the rendering cost of the page, expands the application scenarios of long list pages, and improves the user experience.

[0130] In one alternative implementation, such as Figure 4 As shown, step S107 above displays the second component and the list display data corresponding to the second component in the visible area of ​​the long list page, specifically including the following steps:

[0131] Step S401: Based on the list display data, perform layout rendering on the second component within the target rendering area to obtain the component rendering result of the target rendering area;

[0132] Step S402: Display the rendering result of the component in the visible area.

[0133] In this embodiment of the disclosure, after determining the target rendering area and the second component within the target rendering area as described above, the second component can be processed using layout techniques to obtain a component layout diagram of the second component. Next, the list display data can be rendered onto the component layout diagram to obtain the component rendering result.

[0134] If the target rendering area contains multiple second components, and some of these second components are incomplete, the target rendering area can be expanded so that all the second components within the expanded area are complete. Then, the multiple second components in the expanded target rendering area can be arranged using layout techniques to obtain the component layout diagram for each second component.

[0135] After obtaining the component rendering result of the second component, the component rendering result can be displayed in the visible area of ​​the long list page, thereby realizing the on-screen processing of the component rendering effect.

[0136] Here, for the expanded target rendering area, the component rendering result that matches the target rendering area before expansion can be determined from the component rendering result determined based on the expanded target rendering area. Then, the matching component rendering result is displayed in the visible area of ​​the long list page.

[0137] Here, for the first type of redirection mentioned above, the target rendering area and the second component can be determined in the manner described in Case 1 above, and the component rendering result of the target rendering area can be obtained in accordance with the methods described in steps S401 and S402 above. Next, the visible area of ​​the long list page can be switched to display the component rendering result, thereby replacing the list content in the current display area of ​​the visible area, and thus realizing the page redirection.

[0138] For the second type of transition mentioned above, the transition animation contains multiple animation frames, and the target rendering area includes multiple sub-regions. In this case, step S401 above performs layout rendering on the second component within the target rendering area based on the list display data to obtain the component rendering result of the target rendering area, specifically including the following steps:

[0139] Step S4011: Based on the list display data, perform layout rendering on the second component in each sub-region to obtain the sub-rendering result of each sub-region;

[0140] Step S4012: Concatenate each of the sub-rendering results with the current display area of ​​the long list page to obtain the component rendering result.

[0141] In this embodiment of the disclosure, after determining multiple sub-regions and a second component within each sub-region as described above, layout processing can be performed on the second component within each sub-region to obtain a sub-layout diagram of the second component in each sub-region. Next, the list display data can be rendered on the sub-layout diagram to obtain the sub-rendering result for each sub-region.

[0142] If a sub-region contains multiple second components, and some of these second components are incomplete, the sub-region can be expanded so that all second components within the expanded sub-region are complete. Then, the multiple second components in the expanded sub-region can be arranged using a layout method to obtain an expanded sub-layout diagram. The list display data is then rendered on this expanded sub-layout diagram, resulting in the expanded sub-rendering result. Finally, the sub-rendering result that matches the original sub-region is selected as the sub-rendering result for that sub-region.

[0143] After obtaining the sub-rendering results for each sub-region, the sub-rendering results can be concatenated with the current display area of ​​the long list page to obtain the component rendering result.

[0144] In practice, the splicing position of the sub-rendered result within the current display area can be determined. This splicing position includes both the top and bottom edges of the current display area. For example, the difference between the height of the sub-region and the display height of the current display area in the target list can be calculated. If the difference is positive, the splicing position is determined to be the top edge of the current display area; if the difference is negative, the splicing position is determined to be the bottom edge of the current display area.

[0145] After obtaining the component rendering result as described above, the component rendering result can be displayed in the visible area of ​​the long list page.

[0146] In practice, you can call the requestAnimationFrame method provided by the browser to obtain the refresh timing of each animation frame in the transition animation. Then, using this timing, you can use the scrollTo method to scroll the long list page up or down. The scrolling distance is the distance of each animation frame, which is the height of the sub-area. Continuing with the previous example, this distance is 300px. The scrolling continues until the jump anchor point is reached, at which point the page jump is complete.

[0147] In the above embodiments, for the transition animation-based jump method, by determining the sub-rendering result of each sub-region and concatenating the sub-rendering results of all sub-regions with the current display area to obtain the component rendering result, it is possible to render only the list area that needs to be rendered, without having to render all the list content. This reduces the rendering cost of the page, expands the application scenarios of long list pages, and improves the user experience.

[0148] See Figure 5 The diagram shows a flowchart of another page navigation method provided in this embodiment of the present disclosure. The method includes steps S501 to S511, wherein:

[0149] Step S501: After detecting a user's access request to the long list page, perform the target initialization operation to obtain the component height list.

[0150] Here, the target initialization operation can be completed in the manner described in the above embodiments, and will not be described in detail here.

[0151] Step S502: After detecting the user's trigger operation on the target button, determine that a jump instruction to the jump anchor point has been detected.

[0152] Step S503: Determine the first component associated with the jump anchor point and determine the component height of the first component.

[0153] After detecting the trigger operation, it can be determined that a jump instruction to the jump anchor point has been detected. Then, the first component can be determined based on the component index information corresponding to the jump anchor point, and the component height of the first component can be determined from the component height list based on the component index information.

[0154] Step S504: If the jump type of the jump anchor is instant, determine the target rendering area in the target list based on the component height and the area height of the visible area.

[0155] In this embodiment, the screen height, or the height of the visible area, can be obtained using the browser's built-in screenHeight property. Then, the target rendering area can be determined based on the component height of the first component and the height of the visible area.

[0156] Step S505: Determine the second component in the target list located within the target rendering area.

[0157] Step S506: Render the second component within the target rendering area onto the screen.

[0158] In practice, the second component within the target rendering area can be laid out and rendered based on the list display data to obtain the component rendering result of the target rendering area; the component rendering result is then displayed in the visible area.

[0159] Step S507: If the jump type of the jump anchor point is smooth, calculate the display height of the current display area and the distance between the first component to obtain the height difference, and then select the list area in the target list that corresponds to the height difference.

[0160] Step S508: Divide the list area into multiple sub-regions according to the number of animation frames. The height of each sub-region indicates the list height that needs to be rendered for each animation frame.

[0161] Step S509: Determine the second component within each sub-region.

[0162] Step S510: Render the second component within each sub-area to obtain the sub-rendering result, and then concatenate each sub-rendering result with the current display area to obtain the component rendering result.

[0163] Step S511: Use the requestAnimationFrame method provided by the browser to scroll through the component rendering result until you reach the jump anchor point.

[0164] As can be seen from the above description, the embodiments of this disclosure provide a solution for fixed-point jump under virtual scrolling. This solution does not require rendering all list content, and can ensure that the low memory consumption advantage of virtual scrolling is retained while realizing the ability of anchor point jump.

[0165] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0166] Based on the same inventive concept, this disclosure also provides a page jump device corresponding to the page jump method. Since the principle of the device in this disclosure for solving the problem is similar to the page jump method described above in this disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0167] Reference Figure 6 The diagram shown is a schematic representation of a page navigation device according to an embodiment of this disclosure. The device includes: a first component determining unit 10, a height determining unit 20, a display area determining unit 30, a second component determining unit 40, and a display unit 50; wherein,

[0168] The first component determining unit is configured to determine, in response to a jump instruction on a jump anchor point in a long list page, a first component in the target list of the long list page that is associated with the jump anchor point;

[0169] A height determination unit is used to determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list;

[0170] The display area determination unit is used to determine, based on the component height, the target rendering area that matches the jump anchor point from the long list page;

[0171] The second component determining unit is used to determine a second component located within the target rendering area in the target list; wherein the second component includes the first component;

[0172] The display unit is used to display the second component and the list display data corresponding to the second component in the visible area of ​​the long list page.

[0173] In the above embodiments, by determining the target rendering area that matches the jump anchor point based on the component height, and displaying the second component and the list display data corresponding to the second component within the target rendering area in the visible area of ​​the long list page, partial rendering of the list content (i.e., the second component and its list display data) can be achieved. Thus, when applying the virtual scrolling scheme in the long list page, it is not necessary to render all the list content, thereby reducing the rendering cost of the page, expanding the application scenarios of the long list page, and improving the user experience.

[0174] In one possible implementation, the display area determination unit is further configured to: determine the jump type of the jump anchor point; wherein the jump type is used to indicate the jump method in which the visible area of ​​the long list page jumps from the current display area to the jump anchor point; and determine the target rendering area based on the jump type and the component height.

[0175] In one possible implementation, the display area determination unit is further configured to: obtain the area height of the visible area when the jump type is a first jump type; wherein the first jump type is used to indicate a direct jump from the current display area to the jump anchor point; and determine a target rendering area in the target list based on the component height and the area height of the visible area; wherein the area height of the target rendering area is the area height of the visible area, and the first component is located within the target rendering area.

[0176] In one possible implementation, the display area determination unit is further configured to: determine the predicted display position of the first component in the target rendering area; and process the component height and the area height of the visible area according to a processing mode that matches the predicted display position to obtain the target rendering area.

[0177] In one possible implementation, the display area determination unit is further configured to: determine the display height of the current display area in the target list when the jump type is a second jump type; wherein the second jump type is used to indicate a jump from the current display area to the jump anchor point by means of a transition animation; determine the height difference between the display height and the component height; and determine the target rendering area based on the list area in the target list corresponding to the height difference.

[0178] In one possible implementation, the display area determination unit is further configured to: determine the number of animation frames in the transition animation corresponding to the second jump type when the target rendering area includes multiple sub-regions; divide the list area into multiple sub-regions based on the number of animation frames; wherein each sub-region corresponds to one animation frame in the transition animation, and the sub-region is the rendering area corresponding to each animation frame in the transition animation.

[0179] In one possible implementation, the display unit is further configured to: perform layout rendering on a second component within the target rendering area based on the list display data, to obtain a component rendering result for the target rendering area; and display the component rendering result in the visible area.

[0180] In one possible implementation, the display unit is further configured to: when the target rendering area includes multiple sub-areas, perform layout rendering on the second component within each sub-area based on the list display data to obtain a sub-rendering result for each sub-area; and concatenate each sub-rendering result with the current display area of ​​the long list page to obtain the component rendering result.

[0181] The description of the processing flow of each unit in the device and the interaction flow between each unit can be found in the relevant descriptions in the above method embodiments, and will not be detailed here.

[0182] Corresponding to Figure 1 In addition to the page navigation method, this disclosure also provides a computer device 700, such as... Figure 7 The diagram shown is a structural schematic of a computer device 700 provided in an embodiment of this disclosure, including:

[0183] The computer device 700 comprises a processor 71, a memory 72, and a bus 73. The memory 72 stores execution instructions and includes main memory 721 and external memory 722. The main memory 721, also called internal memory, temporarily stores the processing data in the processor 71, as well as data exchanged with external memory such as a hard disk. The processor 71 exchanges data with the external memory 722 through the main memory 721. When the computer device 700 is running, the processor 71 communicates with the memory 72 through the bus 73, causing the processor 71 to execute the following instructions:

[0184] In response to a jump instruction on a jump anchor point in a long list page, determine a first component in the target list of the long list page that is associated with the jump anchor point;

[0185] Determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list;

[0186] Based on the component height, a target rendering area matching the jump anchor point is determined from the long list page;

[0187] A second component located within the target rendering area in the target list is identified, and the second component and the list display data corresponding to the second component are displayed in the visible area of ​​the long list page; wherein, the second component includes the first component.

[0188] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page navigation method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0189] This disclosure also provides a computer program product carrying program code. The program code includes instructions that can be used to execute the steps of the page redirection method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0190] The aforementioned computer program product can be implemented through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0191] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0192] 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.

[0193] In addition, the functional units in the various embodiments of this disclosure 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.

[0194] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion 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 disclosure. 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.

[0195] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A method for page redirection, characterized in that, include: In response to a jump instruction on a jump anchor point in a long list page, determine a first component in the target list of the long list page that is associated with the jump anchor point; Determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list; Based on the component height, a target rendering area matching the jump anchor point is determined from the long list page; A second component located within the target rendering area in the target list is identified, and a portion of the target list is rendered in the visible area of ​​the long list page to display the second component and the list display data corresponding to the second component; wherein, the second component includes the first component.

2. The method according to claim 1, characterized in that, The step of determining the target rendering area matching the jump anchor point from the long list page based on the component height includes: Determine the jump type of the jump anchor point; wherein, the jump type is used to indicate the jump method in which the visible area of ​​the long list page jumps from the current display area to the jump anchor point; The target rendering area is determined based on the jump type and the component height.

3. The method according to claim 2, characterized in that, Determining the target rendering area based on the jump type and the component height includes: When the jump type is the first jump type, the region height of the visible area is obtained; wherein, the first jump type is used to indicate a direct jump from the current display area to the jump anchor point; Based on the component height and the region height of the visible area, a target rendering region is determined in the target list; wherein the region height of the target rendering region is the region height of the visible area, and the first component is located within the target rendering region.

4. The method according to claim 3, characterized in that, Determining the target rendering region in the target list based on the component height and the region height of the visible area includes: Determine the predicted display position of the first component in the target rendering area; The component height and the region height of the visible area are processed according to a processing mode that matches the predicted display position to obtain the target rendering region.

5. The method according to claim 2, characterized in that, Determining the target rendering area based on the jump type and the component height includes: When the jump type is the second jump type, the display height of the current display area in the target list is determined; wherein, the second jump type is used to indicate a jump from the current display area to the jump anchor point by means of a transition animation; Determine the height difference between the display height and the component height; The target rendering area is determined based on the list area in the target list that corresponds to the height difference.

6. The method according to claim 5, characterized in that, The target rendering region includes multiple sub-regions; determining the target rendering region based on the list region in the target list corresponding to the height difference includes: Determine the number of animation frames in the transition animation corresponding to the second jump type; The list area is divided into multiple sub-regions based on the number of animation frames; wherein each sub-region corresponds to one animation frame in the transition animation, and the sub-region is the rendering area corresponding to each animation frame in the transition animation.

7. The method according to claim 1, characterized in that, The step of displaying the second component and the list display data corresponding to the second component in the visible area of ​​the long list page includes: Based on the list display data, the second component within the target rendering area is laid out and rendered to obtain the component rendering result of the target rendering area; The rendering result of the component is displayed in the visible area.

8. The method according to claim 7, characterized in that, The target rendering area includes multiple sub-regions; The step of laying out and rendering the second component within the target rendering area based on the list display data to obtain the component rendering result of the target rendering area includes: Based on the list display data, the second component in each sub-region is laid out and rendered to obtain the sub-rendering result of each sub-region; The component rendering result is obtained by concatenating each of the sub-rendering results with the current display area of ​​the long list page.

9. A page navigation device, characterized in that, include: The first component determining unit is configured to determine, in response to a jump instruction on a jump anchor point in a long list page, a first component in the target list of the long list page that is associated with the jump anchor point; A height determination unit is used to determine the component height of the first component, wherein the component height is determined based on the position of the first component in the target list; The display area determination unit is used to determine, based on the component height, the target rendering area that matches the jump anchor point from the long list page; The second component determining unit is used to determine a second component located within the target rendering area in the target list; wherein the second component includes the first component; The display unit is used to render the target list portion in the visible area of ​​the long list page, and to display the second component and the list display data corresponding to the second component.

10. A computer device, characterized in that, include: The computer device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the computer device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, they perform the steps of the page navigation method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page navigation method as described in any one of claims 1 to 8.

Images