CN115758019A

CN115758019A - Page jump method and device, computer equipment and storage medium

Info

Publication number: CN115758019A
Application number: CN202211457900.XA
Authority: CN
Inventors: 何伟能
Original assignee: Douyin Vision Co Ltd
Current assignee: Douyin Vision Co Ltd
Priority date: 2022-11-21
Filing date: 2022-11-21
Publication date: 2023-03-07

Abstract

The disclosure provides a page jumping method, a page jumping device, computer equipment and a storage medium, wherein the method comprises the following steps: in response to a jump instruction to a jump anchor in a long list page, determining a first component in a target list of the long list page that is associated with the jump anchor; determining a component height for 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 matched with the jump anchor point from the long list page based on the component height; determining a second component in the target list, which is located in 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

Page jump method and device, computer equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a page jump method and apparatus, a computer device, and a storage medium.

Background

With the development of the mobile internet technology, the content presented by the user side page becomes rich and diverse, the requirements of various page technologies are higher and higher, although the traditional web page technology is widely applied, due to the technical limitation when the web page is embedded into an APP (Application), the display effect of the web page with rich content is not ideal, and in view of this, for the page with rich content, the long list mode is generally adopted in the prior art for display.

For the above list page, the industry usually uses a virtual scrolling list to replace the actual scrolling list, that is, when maintaining the list, only the display content in the current height range of the screen is usually maintained, and when scrolling, the display elements in the screen are dynamically replaced. However, the long list based on the virtual scrolling technology cannot use the fixed point jump function of the page, which limits the application scenarios of the long list page, thereby reducing the use experience of the user.

Disclosure of Invention

The embodiment of the disclosure at least provides a page jumping method, a page jumping device, computer equipment and a storage medium.

In a first aspect, an embodiment of the present disclosure provides a page jump method, including: in response to a jump instruction to a jump anchor in a long list page, determining a first component in a target list of the long list page that is associated with the jump anchor; determining a component height for 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 matched with the jump anchor point from the long list page based on the component height; determining a second component in the target list, wherein the second component is located in 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.

In an alternative embodiment, the determining, based on the component height, a target rendering area matching the jump anchor from the long-list page includes: determining the jump type of the jump anchor point; the skip type is used for indicating a skip mode that a visual area of the long list page skips from a current display area to the skip anchor point; determining the target rendering zone based on the jump type and the component height.

In an optional embodiment, the determining the target rendering region based on the jump type and the component height includes: under the condition that the jump type is a first jump type, acquiring the area height of the visible area; wherein the first jump type is used for indicating that the current display area jumps to the jump anchor point directly; determining a target rendering zone in the target list based on the component height and a zone height of the viewable zone; wherein, the area height of the target rendering area is the area height of the visual area, and the first component is positioned in the target rendering area.

In an alternative embodiment, the determining a target rendering area in the target list based on the component height and the area height of the visible area includes: determining a predicted display position of the first component in the target rendering area; and processing the height of the component and the height of the area of the visual area according to a processing mode matched with the predicted display position to obtain the target rendering area.

In an optional embodiment, the determining the target rendering area based on the jump type and the component height includes: determining the display height of the current display area in the target list under the condition that the jump type is a second jump type; wherein the second jump type is used for indicating that the jump from the current display area to the jump anchor point is performed in a transitional animation mode; determining a height difference between the display height and the component height; determining the target rendering area based on a list area in the target list corresponding to the height difference.

In an alternative embodiment, the target rendering area comprises a plurality of sub-areas; the determining the target rendering area based on the list area corresponding to the height difference in the target list comprises: determining the number of animation frames in the transition animation corresponding to the second jump type; dividing the list region into a plurality of sub-regions based on the number of animation frames; each sub-region corresponds to one animation frame in the transition animation, and the sub-region is a rendering region corresponding to each animation frame in the transition animation.

In an alternative embodiment, the 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 a second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area; showing the component rendering results in the visible region.

In an alternative embodiment, the target rendering area comprises a plurality of sub-areas; performing layout rendering on a second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area, including: performing layout rendering on a second component in each sub-region based on the list display data to obtain a sub-rendering result of each sub-region; and splicing each sub-rendering result and the current display area of the long list page to obtain the component rendering result.

In a second aspect, an embodiment of the present disclosure provides a page jump apparatus, including: the device comprises a first component determination unit, a first component determination unit and a second component determination unit, wherein the first component determination unit is used for responding to a jump instruction of a jump anchor point in a long list page and determining a first component which is associated with the jump anchor point in a target list of the long list page; an altitude determination unit configured to determine a component altitude of the first component, wherein the component altitude is determined based on a position of the first component in the target list; a display area determining unit, configured to determine, based on the component height, a target rendering area that matches the jump anchor from the long list page; a second component determination unit, configured to determine a second component in the target list that is located within the target rendering area; wherein the second component comprises the first component; and the display unit is used for displaying the second component and the list display data corresponding to the second component in a visible area of the long list page.

In a third aspect, an embodiment of the present disclosure further provides a computer device, including: a processor, a memory and a bus, the memory storing machine-readable instructions executable by the processor, the processor and the memory communicating via the bus when the computer device is running, the machine-readable instructions when executed by the processor performing the steps of the first aspect described above, or any possible implementation of the first aspect.

In a fourth aspect, this disclosed embodiment also provides a computer-readable storage medium, on which a computer program is stored, where the computer program is executed by a processor to perform the steps in the first aspect or any one of the possible implementation manners of the first aspect.

In the embodiment of the disclosure, first, in response to a jump instruction to a jump anchor in a long list page, a first component associated with the jump anchor in a 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 matched with the jump anchor point is determined in the long list page based on the component height; next, a second component located in the target rendering area may 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.

In the above embodiment, by determining the target rendering region matched with the jump anchor point based on the component height, and displaying the second component in the target rendering region and the list display data corresponding to the second component in the visible region of the long list page, partial rendering of the list content (i.e., the second component and the list display data thereof) can be realized, so that when a virtual scrolling scheme is applied to 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 scene of the long list page, and improving the use experience of the user.

In order to make the aforementioned objects, features and advantages of the present disclosure more comprehensible, preferred embodiments accompanied with figures are described in detail below.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings required for use in the embodiments will be briefly described below, and the drawings herein incorporated in and forming a part of the specification illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the technical solutions of the present disclosure. It is appreciated that the following drawings depict only certain embodiments of the disclosure and are therefore not to be considered limiting of its scope, for those skilled in the art will be able to derive additional related drawings therefrom without the benefit of the inventive faculty.

Fig. 1 shows a flowchart of a page jump method provided by an embodiment of the present disclosure;

FIG. 2 is a flow chart illustrating a target initialization operation provided by an embodiment of the present disclosure;

FIG. 3 is a flowchart illustrating a specific method for determining a target rendering area matching a jump anchor based on a component height in a jump method of a page provided by an embodiment of the present disclosure;

fig. 4 is a flowchart illustrating 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 jump method provided by the embodiment of the disclosure;

FIG. 5 is a flowchart illustrating a method for skipping to another page according to an embodiment of the disclosure;

FIG. 6 is a schematic diagram illustrating a page jump apparatus provided in an embodiment of the present disclosure;

fig. 7 shows a schematic diagram of a computer device provided by an embodiment of the present disclosure.

Detailed Description

To make the objects, technical solutions and advantages of the embodiments of the present disclosure more apparent, the technical solutions in the embodiments of the present disclosure will be described clearly and completely with reference to the drawings in the embodiments of the present disclosure, and it is obvious that the described embodiments are only a part of the embodiments of the present disclosure, not all of the embodiments. The components of the embodiments of the present disclosure, generally described and illustrated in the figures herein, can be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the disclosure, provided in the accompanying drawings, is not intended to limit the scope of the disclosure, as claimed, but is merely representative of selected embodiments of the disclosure. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the disclosure without making creative efforts, shall fall within the protection scope of the disclosure.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

The term "and/or" herein merely describes an associative relationship, meaning that three relationships may exist, e.g., a and/or B, may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the term "at least one" herein means any one of a variety or any combination of at least two of a variety, for example, including at least one of A, B, C, and may mean including any one or more elements selected from the group consisting of A, B and C.

Research shows that with the development of mobile internet technology, the content presented by a user side page becomes rich and diverse, and the requirements of various page technologies are higher and higher, although the traditional web page technology is widely applied, due to the technical limitation when the web page is embedded into the APP, the display effect of the web page with rich content is not ideal, and in view of this, for the page with rich content, the long list mode is usually adopted in the prior art for display.

For long list pages, industry often uses virtual scrolling lists instead of actual scrolling lists, i.e. when maintaining lists, only the presentation content currently within one screen height range is usually maintained, and when scrolling, the presentation elements within the screen are dynamically replaced. The virtual rolling scheme can effectively reduce the number of content nodes needing to be maintained in the page, thereby greatly reducing the complexity of the page.

In addition, the fixed point jump function is a capability with a wide range of applications, for example, a user usually needs to jump to a specified position in a scene of choosing a movie ticket, watching an article, etc., for example, jump to a specific chapter and jump to a specific ticket buying time. Thus, jumping to a particular anchor point is a very common interaction. One precondition for using the fixed point jump function in a long-list page is that all list content in the long-list page is rendered prior to the fixed point jump.

Since the virtual scrolling scheme does not render all the contents in the list, if a fixed-point jump is to be implemented in the virtual scrolling scheme, all the contents of the list need to be rendered during the fixed-point jump, which increases the rendering cost of the page and does not embody the advantages of the virtual scrolling scheme. Therefore, in the scene of "fixed point jump", the virtual scrolling cannot realize the fixed point jump by using the browser native self-contained scrollTo (animated scrolling to element or position) function and the smooth transition (smooth transition) attribute thereof like the actual scrolling list scheme, which limits the application scene of the long list page, thereby reducing the use experience of the user.

Based on the research, the disclosure provides a page jumping method, a page jumping device, a computer device and a storage medium. In the embodiment of the disclosure, first, in response to a jump instruction to a jump anchor in a long list page, a first component associated with the jump anchor in a 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 matched with the jump anchor point is determined from the long list page based on the component height; next, a second component located in the target rendering area may be determined, and the second component and the list presentation data corresponding to the second component may be presented, where the second component includes the first component.

To facilitate understanding of the present embodiment, first, a page jump method disclosed in the embodiments of the present disclosure is described in detail, where an execution subject of the page jump method provided in the embodiments of the present disclosure is generally a computer device with certain computing capability, and the computer device includes, for example: a terminal device, which may be a User Equipment (UE), a mobile device, a User terminal, a terminal, or other processing devices. In some possible implementations, the method of jumping of the page may be implemented by the processor calling computer readable instructions stored in the memory.

Referring to fig. 1, a flowchart of a page jumping method provided in the embodiment of the present disclosure is shown, where the method includes steps S101 to S107, where:

s101: in response to a jump instruction to a jump anchor in a long list page, a first component in a target list of the long list page associated with the jump anchor is determined.

Here, the jump anchor may be used to indicate a target jump location in the long list page. For example, if the long list page is a book reading page of the target book, and a chapter displayed in the current time in the visible area of the book reading page is a 1 st chapter of the target book, if the user wants to jump to a 3 rd chapter, the 3 rd chapter can be understood as the target jump position.

After detecting the triggering operation of a user on a target button in a long list page, determining to detect a jump instruction of a jump anchor point in the long list page; the target button is a button used for triggering the long list page to jump to a target jumping position corresponding to the jumping anchor point in the long list page.

In the embodiment of the present disclosure, corresponding component index information may be set for each anchor point in advance, so as to determine a component corresponding to the anchor point through the component index information.

Here, after a jump instruction to the jump anchor is detected, component index information corresponding to the jump anchor may be determined, and a component associated with the jump anchor may be determined as a first component in the target list based on the component index information.

S103: determining a component height for the first component, wherein the component height is determined based on a position of the first component in the target list.

In embodiments of the present disclosure, after the first component is determined, a component height of the first component may be determined.

Here, a component height list may be obtained, where the component height list includes component index information and component heights of components in the target list. Then, the component height of the first component can be determined in the component height list according to the component index information of the first component.

Here, the component height may be used to indicate a distance between the first component and the bottom of the list of the target list, or to indicate a distance between the first component and the top of the list of the target list, which is not specifically limited by the present disclosure so as to be implementable.

S105: and determining a target rendering area matched with the jump anchor point from the long list page based on the component height.

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

In the embodiment of the disclosure, after the height of the component is determined, the region of the visible region of the long list page in the process of jumping from the current display region to the target jumping position can be predicted according to the height of the component, so that the target rendering region is obtained.

The skip anchor point corresponds to multiple skip types, namely, the skip modes of skipping the visual area of the long list page from the current display area to the target skip position are multiple, the target rendering areas corresponding to different skip modes are different, and the skip effects corresponding to different target rendering areas are different. Therefore, the jump type and the component height of the jump anchor point can be combined to determine a rendering area (namely, a target rendering area) in the process of jumping the visual area of the long-list page from the current display area to the target jump position.

S107: determining a second component in the target list, which is located in 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.

After the target rendering area is determined, a second component of the target list that is within the target rendering area may be determined, where the second component includes the first component.

After the second component is determined, performing component layout rendering on the second component to obtain a component rendering result of the second component; next, the component rendering result of the second component may 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.

In the embodiment of the disclosure, first, in response to a jump instruction to a jump anchor in a long list page, a first component associated with the jump anchor in a 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 matched with the jump anchor point is determined from the long list page based on the component height; next, a second component located within the target rendering area may be determined, and the second component and the list presentation data corresponding to the second component may be presented.

The above steps will be described with reference to specific embodiments.

In the embodiment of the present disclosure, before the processes described in the above steps S101 to S107 are performed, the target initialization operation needs to be completed. Through the target initialization operation, the component height of each component in the target list can be determined, so that a component height list is obtained. As shown in fig. 2, the specific operation procedure of the target initialization operation is described as follows:

(1) Acquiring list data of a long list page and acquiring a component generation rule; and the target list data is data to be rendered into a visible area corresponding to the long list page.

(2) Generating a container outside the visible area, and generating a display component in the container based on the list data and the component generation rule; the display component is a component displayed in the visual area at the current moment, and comprises a plurality of components, and each component is used for displaying corresponding list data.

Here, the display component is a carrier for displaying list data in the interface, the component in the display component is a unit component of the display component, the display component may be composed of a plurality of different components, and each component may be a carrier for partial data in the list data; the component generation rule is used for defining the relative position relation of each component in the display component.

(3) And judging whether the event generated by the display component is monitored. If yes, executing the subsequent process, and if not, continuing monitoring.

When the generation of the display component is completed, the label of the display component is modified, the label can be changed from a null value at the beginning to the display component, based on the change, the event signal can be acquired by monitoring the change of the label, and when the label is changed, the generation of the display component can be determined to be completed; if no change in the tag is detected, indicating that the display component has not been generated, then the listening continues.

(4) And traversing the Clientheight (high in visible area of the webpage content) attribute of each component in the display components so as to obtain and record the component height of each component.

(5) And establishing a mapping relation between each component in the display components and the corresponding component height so as to obtain a component height list.

In specific implementation, the component index information of each component in the display components can be determined, and the mapping relation between the component index information and the component height is established, so that a component height list is obtained.

(6) And deleting the generated display component. After the associated component height list is generated, the process of acquiring the component height of the component is completed, and the generated display component may be deleted to reduce the memory load.

Here, for each component in the long list page, the component height of each component may be determined in the manner described above, so as to obtain a component height list including the component heights of each component in the target list.

In the embodiment of the present disclosure, after it is detected that the user accesses the long list page, the target initialization operation may be completed in the manner described above.

After the target initialization operation is completed, the trigger operation of the target button by the user can be detected. After detecting the trigger operation, it may be determined that a jump instruction to the jump anchor is detected. Then, the first component can be determined according to the component index information corresponding to the jump anchor point, and the component height of the first component can be determined in the component height list according to the component index information. The target rendering region may then be determined based on the component height.

In an optional embodiment, as shown in fig. 3, the step S105 of determining a target rendering area matching the jump anchor based on the component height specifically includes the following steps:

step S301: determining the jump type of the jump anchor point; the skip type is used for indicating a skip mode that a visual area of the long list page skips from a current display area to the skip anchor point;

step S302: determining the target rendering zone based on the jump type and the component height.

In the embodiment of the disclosure, anchor point attribute information corresponding to a jump anchor point may be acquired, so that a jump type corresponding to the jump anchor point is determined according to the anchor point attribute information.

Here, the jump types corresponding to the jump anchor point generally include the following: instant type (direct jump type) and smooth type (jump type of transition animation). Wherein the instant type is used to instruct jumping from the current display area to a jump anchor (or, a target jump position) in a jump manner without a transition animation. The smooth type is used to instruct jumping from the current display area to a jump anchor (or, a target jump position) by a jump manner with transitional animation.

Because the jump modes corresponding to different jump types are different, the target rendering areas corresponding to different jump modes are different, and the displayed jump effects are different.

Based on this, a target rendering region that matches the jump anchor may be determined in the target list based on the jump type and the component height.

In specific implementation, a jump processing mode matched with the jump type can be determined, wherein the jump processing mode is used for indicating a mode for processing the height of the component; then, the component height of the first component can be processed based on the jump processing mode, and the target rendering area is calculated.

In the above embodiment, by determining the target rendering area based on the skip type and the component height of the skip anchor point, the application scenarios of the page skip method provided by the embodiment of the present disclosure can be enriched, so that it is satisfied that multiple types of skip anchor points perform automatic page skip according to their respective skip modes.

The process of determining the target rendering area will be described below with respect to different jump types.

The first condition is as follows: the jump type is a first jump type.

In this case, the step S302 of determining the target rendering area based on the skip type and the component height specifically includes the following steps:

step S11: acquiring the area height of the visible area; wherein the first jump type is used for indicating that the current display area jumps to the jump anchor point directly;

step S12: determining a target rendering zone in the target list based on the component height and a zone height of the viewable zone; wherein, the area height of the target rendering area is the area height of the visual area, and the first component is positioned in the target rendering area.

Here, the first jump type may be understood as an instant type (direct jump type) described above, that is, a jump from the current display area to the jump anchor point in a jump manner without a transition animation, that is, a jump from the current display area to the jump anchor point directly.

In the embodiment of the present disclosure, the screen height, that is, the area height of the visible area, may be obtained through a browser-owned screen height attribute. A target rendering zone may then be determined based on the component height of the first component and the zone height of the viewable area.

In this case, the target rendering area may be understood as an area corresponding to the target jumping position, where an area height of the target rendering area is a screen height, that is, an area height of the target rendering area is an area height of the visible area, and in this case, the first component is located at a target position in the target rendering area, where the target position includes any one of: the center of the target rendering zone, the top edge of the target rendering zone, and the bottom edge of the target rendering zone.

For example, the long list page is a book list page, where the book list page includes a plurality of book introduction information and book classification tags, for example, the book classification tags may include urban and ancient books. And each book classification label contains matched book introduction information. It is assumed that the current display area displays the book introduction information corresponding to the book classification tag "city". If the triggering operation of the book classification label 'ancient dress' is detected, at this moment, the relevant area of the book introduction information belonging to the 'ancient dress' in the long list page is the target rendering area.

Also for example, the long list page is a news information page, wherein the news information page includes a plurality of information and information category labels, for example, the information category labels may include sports and society. For each information classification label, the matched information is contained. Suppose that the information corresponding to the information classification label "sports" is displayed in the current display area. If the trigger operation of the consultation classification label 'society' is detected, at this time, the relevant area of the consultation information belonging to the 'society' in the long list page is the target rendering area.

The manner in which the target rendering region is determined is different for different target locations based on the component height and the region height of the viewable region.

In an optional embodiment, determining a target rendering area in the target list based on the height of the component and the area height of the visible area specifically includes the following steps:

firstly, determining a predicted display position of the first component in the target rendering area;

and secondly, processing the height of the assembly and the height of the area of the visible area according to a processing mode matched with the predicted display position to obtain the target rendering area.

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 included in the target rendering area.

In a specific implementation, the target position of the first component corresponding to the anchor point in the target rendering area may be predicted based on the anchor point attribute information of the anchor point, so as to obtain a predicted display position, for example, at the center of the target rendering area, at the top edge of the target rendering area, or at the bottom edge of the target rendering area.

Next, a processing mode matching the predicted display position can be determined, which is described in the following cases:

the first processing mode is as follows: the predicted display position is the center of the target rendering area.

In this mode, the processing mode matching the predicted display position is: [ a-h/2, a + h/2]; where a represents the component height and h represents the zone height of the viewable zone.

That is, in this mode, the display area of half screen is taken up and the display area of half screen is taken down centering on the jump anchor, thereby obtaining the target rendering area.

And a second processing mode: the predicted display position is at the top edge of the target rendering area.

In this mode, the processing mode matching the predicted display position is: [ a, a-h ]; where a represents the component height and h represents the zone height of the viewable zone.

That is, in this mode, the display area of one screen is taken down with the X-axis direction of the jump anchor point as the top edge of the target rendering area, thereby obtaining the target rendering area.

And a third processing mode: the predicted display position is at a bottom edge of the target rendering area.

In this mode, the processing mode matching the predicted display position is: [ a + h, a ]; where a represents the component height and h represents the zone height of the viewable zone.

That is, in this mode, the X-axis direction where the jump anchor point is located is taken as the bottom edge of the target rendering area, and the display area of one screen is taken upward, so that the target rendering area is obtained.

After the processing mode matching each predicted display position is determined, the component height and the area height of the visible area may be processed based on the processing mode to obtain the target rendering area.

For the first processing mode: [ a-h/2, a + h/2].

For example, if the area height h is 600px, 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 ].

For the second processing mode: [ a, a-h ].

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

For the third processing mode: [ a + h, a ].

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

In the foregoing embodiment, by the processing manner, partial rendering of list contents (that is, list contents corresponding to the target rendering area) can be realized, so that when a virtual scrolling scheme is applied to a long list page, all list contents do not need to be rendered, thereby reducing rendering cost of the page, expanding an application scene of the long list page, and improving user experience.

Case two: the jump type is a second jump type.

step S21: determining the display height of the current display area in the target list; wherein the second jump type is used for indicating that the jump from the current display area to the jump anchor point is performed in a transitional animation mode;

step S22: determining a height difference between the display height and the component height;

step S23: determining the target rendering area based on a list area in the target list corresponding to the height difference.

In the embodiment of the present disclosure, the second jump type may be understood as a smooth type (jump type of transition animation) described above, that is, jumping from the current display area to the jump anchor (or, target jump position) by means of a jump with transition animation, that is, jumping from the current display area to the jump anchor by means of transition animation. Wherein, the transition animation refers to playing the animation which is scrolled from the current display area to the jump anchor point in the visual area.

In a specific implementation, the display height of the current display area in the target list in the visible area of the long-list page may be determined, for example, the display height is 18000px. Thereafter, the height difference between the display height and the component height can be calculated, and if the component height of the first component corresponding to the jump anchor point is 27000px, the height difference is 27000-18000=9000px. Wherein the height difference 9000px may be used to indicate a global rendering distance for jumping from the current display region to the jump anchor. For example, [27000, 18000] is the overall rendering distance for jumping from the current display area to the jump anchor point.

After the height difference is determined, the target rendering region may be determined based on the overall rendering distance indicated by the height difference. For example, the region range of the target rendering region may be [27000, 18000].

Because the transition animation comprises a plurality of animation frames, the rendering height corresponding to each animation frame is a part of the rendering area in the target rendering area. Based on this, it is also necessary to determine a rendering area corresponding to each animation frame in the target rendering area.

Based on this, when the target rendering area includes a plurality of sub-areas, the step S23 determines the target rendering area based on the list area corresponding to the height difference in the target list, which specifically includes the following steps:

step S231: determining the number of animation frames in the transition animation corresponding to the second jump type;

step S232: dividing the list region into a plurality of sub-regions based on the number of animation frames; each sub-region corresponds to one animation frame in the transition animation, and the sub-region is a rendering region corresponding to each animation frame in the transition animation.

In the embodiment of the disclosure, first, the animation playing time of the transition animation may be determined, and then the number of animation frames in the transition animation may be determined based on the animation playing time. For example, if the animation playing time is 1 second, the number of animation frames of the transitional animation may be 30 frames.

After the number of the animation frames is determined, the list area corresponding to the height difference may be averagely divided into a plurality of sub-areas based on the number of the animation frames, where each sub-area is the rendering area corresponding to each of the animation frames described above.

Assuming that the list area corresponding to the height difference is the area corresponding to [27000, 18000], the plurality of sub-areas may be [18000, 18300], [18300, 18600], [18600, 18900], [18900, 19200], …, [26700, 27000].

Here, to optimize the scrolling effect of the transition animation, sub-regions [18000, 18300] may be discarded, starting with [18300, 18600 ].

In the above embodiment, for the transition animation-based jump mode, the rendering region of each animation frame is determined, so that the list region to be rendered can be rendered without rendering all the list contents, the rendering cost of the page is reduced, the application scene of the long-list page is enlarged, and the use experience of the user is improved.

In an optional embodiment, as shown in fig. 4, the step S107 of displaying the second component and the list display data corresponding to the second component in the visible area of the long list page specifically includes the following steps:

step S401: performing layout rendering on a second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area;

step S402: showing the component rendering results in the visible region.

In the embodiment of the present disclosure, after the target rendering region and the second component in the target rendering region are determined in the manner described above, the Layout diagram of the second component may be obtained by performing Layout processing on the second component. Next, the list presentation data can be rendered on the component layout diagram, thereby obtaining a component rendering result.

If a plurality of second components are contained in the target rendering area, and the plurality of second components contain incomplete components. At this time, the target rendering area may be enlarged, so that the plurality of second components included in the enlarged target rendering area are all complete components. Then, the plurality of second components in the enlarged target rendering area can be subjected to Layout processing, so as to obtain a component Layout diagram of the second components.

After the component rendering result of the second component is obtained, the component rendering result can be displayed in the visible area of the long list page, so that the on-screen processing of the component rendering effect is realized.

Here, for the enlarged target rendering zone, a component rendering result matching the target rendering zone before enlargement may be determined among the component rendering results determined based on the enlarged target rendering zone, and then the matching component rendering result may be displayed in the visible region of the long-list page.

Here, for the first skip type, the target rendering area and the second component may be determined in the manner described in the above case one, and a component rendering result of the target rendering area is obtained in the manner described in the above steps S401 and S402. Then, the visual area of the long list page can be switched to the rendering result of the display component, so that the list content in the current display area of the visual area is replaced, and the page jump is realized.

Aiming at the second jump type, the transition animation comprises a plurality of animation frames, and the target rendering area comprises a plurality of sub-areas; in this case, the step S401 performs layout rendering on the second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area, and specifically includes the following steps:

step S4011: performing layout rendering on a second component in each sub-region based on the list display data to obtain a sub-rendering result of each sub-region;

step S4012: and splicing each sub-rendering result and the current display area of the long list page to obtain the component rendering result.

In the embodiment of the present disclosure, after the plurality of sub-areas and the second component in each sub-area are determined in the above-described manner, the Layout diagram of the second component in each sub-area can be obtained by performing Layout processing on the second component in each sub-area. Next, the tabular display data may be rendered on the sub-layout map, thereby obtaining a sub-rendering result for each sub-region.

If a plurality of second components are contained in the sub-area and the plurality of second components comprise incomplete components. At this time, the sub-area may be enlarged so that the plurality of second components included in the sub-area after the enlargement are all complete components. Then, the plurality of second components in the expanded sub-area may be subjected to Layout processing to obtain an expanded sub-Layout, and the list display data is rendered on the expanded sub-Layout to obtain an expanded sub-rendering result. Next, a sub-rendering result that matches the sub-region before enlargement is determined as a sub-rendering result of the sub-region.

After the sub-rendering result of each sub-region is obtained, the sub-rendering result and the current display region of the long list page can be spliced, so that a component rendering result is obtained.

In a specific implementation, a splicing position of the sub-rendering result in the current display area may be determined, where the splicing position includes an area top end of the current display area and an area bottom end of the current display area. For example, a difference between the height of the sub-area and the display height of the current display area in the target list may be calculated, where if the difference is a positive number, the stitching position is determined as the top of the current display area, and if the difference is a negative number, the stitching position is determined as the bottom of the current display area.

After the component rendering results are obtained in the manner described above, the component rendering results may be presented in the visible area of the long list page.

In specific implementation, a requestanimation frame method provided by a browser can be called, a refreshing time of each animation frame in the transition animation is obtained through the method, and the long-list page is rolled downwards or upwards through a scrollTo method through the time, wherein the rolling distance is the distance of each animation frame, namely the height of the area of the sub-area, which is 300px according to the above example, and the page is continuously circulated until the jump anchor point, so that the page jump is completed.

In the above embodiment, for the transition animation-based jump mode, the list area to be rendered can be rendered without rendering all the list contents by determining the sub-rendering result of each sub-area and splicing the sub-rendering results of all the sub-areas with the current display area to obtain the component rendering result, so that the rendering cost of the page is reduced, the application scene of the long-list page is enlarged, and the use experience of the user is improved.

Referring to fig. 5, a flowchart of another page jumping method provided in the embodiment of the present disclosure is shown, where the method includes steps S501 to S511, where:

step S501: and after detecting the access request of the user to the long list page, executing target initialization operation to obtain a component height list.

Here, the target initialization operation may be completed in the manner described in the above embodiments, and will not be described in detail here.

Step S502: after the triggering operation of the target button by the user is detected, the jump instruction of the jump anchor point is determined to be detected.

Step S503: a first component associated with the jump anchor is determined, and a component height of the first component is determined.

After detecting the trigger operation, it may be determined that a jump instruction to the jump anchor is detected. Then, the first component can be determined according to the component index information corresponding to the jump anchor point, and the component height of the first component can be determined in the component height list according to the component index information.

Step S504: in the case that the jump type of the jump anchor is instant type, a target rendering area is determined in the target list based on the component height and the area height of the visual area.

In the embodiment of the present disclosure, the screen height, that is, the area height of the visible area, may be obtained through a browser-owned screen height attribute. A target rendering zone may then be determined based on the component height of the first component and the zone height of the viewable zone.

Step S505: determining a second component in the target list that is located within the target rendering zone.

Step S506: and rendering the second component in the target rendering area to the upper screen.

In specific implementation, the layout rendering can be performed on the second component in the target rendering area based on the list display data, so as to obtain a component rendering result of the target rendering area; showing the component rendering results in the visible region.

Step S507: and under the condition that the jump type of the jump anchor point is a smooth type, calculating the distance between the display height of the current display area and the first component to obtain a height difference, and based on a list area corresponding to the height difference in the target list.

Step S508: the list area is divided into a plurality of sub-areas according to the number of animation frames. Wherein the region height of each sub-region is used to indicate the list height that each animation frame needs to be rendered.

Step S509: a second component within each sub-region is determined.

Step S510: and rendering the second assembly in each sub-area to obtain a sub-rendering result, and splicing each sub-rendering result with the current display area to obtain an assembly rendering result.

Step S511: and scrolling the rendering result of the playing component by a requestAnimationFrame method provided by the browser until the rendering result is scrolled to the jump anchor point.

As can be seen from the above description, the embodiments of the present disclosure provide a solution for implementing fixed point jump under virtual scrolling, where rendering of all list contents is not required, and the capability of anchor point jump is implemented while the advantage of low memory consumption brought by virtual scrolling is maintained.

It will be understood by those skilled in the art that in the method of the present invention, the order of writing the steps does not imply a strict order of execution and any limitations on the implementation, and the specific order of execution of the steps should be determined by their function and possible inherent logic.

Based on the same inventive concept, the embodiment of the present disclosure further provides a page jump apparatus corresponding to the page jump method, and since the principle of the apparatus in the embodiment of the present disclosure for solving the problem is similar to the page jump method in the embodiment of the present disclosure, the implementation of the apparatus may refer to the implementation of the method, and repeated details are not repeated.

Referring to fig. 6, a schematic diagram of a page jump apparatus provided in an embodiment of the present disclosure is shown, where the apparatus includes: a first component determination unit 10, a height determination unit 20, a display area determination unit 30, a second component determination unit 40, and a presentation unit 50; wherein the content of the first and second substances,

the device comprises a first component determination unit, a first component determination unit and a second component determination unit, wherein the first component determination unit is used for responding to a jump instruction of a jump anchor point in a long list page and determining a first component which is associated with the jump anchor point in a target list of the long list page;

an altitude determination unit configured to determine a component altitude of the first component, wherein the component altitude is determined based on a position of the first component in the target list;

a display area determining unit, configured to determine, based on the component height, a target rendering area that matches the jump anchor from the long-list page;

a second component determination unit, configured to determine a second component in the target list that is located within the target rendering area; wherein the second component comprises the first component;

and the display unit is used for displaying the second component and the list display data corresponding to the second component in a visible area of the long list page.

In a possible implementation, the display area determining unit is further configured to: determining the jump type of the jump anchor point; the skip type is used for indicating a skip mode that a visual area of the long list page skips from a current display area to the skip anchor point; determining the target rendering zone based on the jump type and the component height.

In a possible implementation, the display area determining unit is further configured to: under the condition that the jump type is a first jump type, acquiring the area height of the visible area; wherein the first jump type is used for indicating that the current display area jumps to the jump anchor point directly; determining a target rendering zone in the target list based on the component height and a zone height of the viewable zone; wherein, the area height of the target rendering area is the area height of the visual area, and the first component is positioned in the target rendering area.

In a possible implementation, the display area determining unit is further configured to: determining a predicted display position of the first component in the target rendering area; and processing the height of the component and the height of the area of the visual area according to a processing mode matched with the predicted display position to obtain the target rendering area.

In a possible implementation, the display area determining unit is further configured to: determining the display height of the current display area in the target list under the condition that the jump type is a second jump type; wherein the second jump type is used for indicating that the jump from the current display area to the jump anchor point is performed in a transitional animation mode; determining a height difference between the display height and the component height; determining the target rendering zone based on a list zone in the target list corresponding to the height difference.

In a possible implementation, the display area determining unit is further configured to: determining the number of animation frames in the transition animation corresponding to the second jump type under the condition that the target rendering area comprises a plurality of sub-areas; dividing the list region into a plurality of sub-regions based on the number of animation frames; each sub-region corresponds to one animation frame in the transition animation, and the sub-region is a rendering region corresponding to each animation frame in the transition animation.

In one possible embodiment, the display unit is further configured to: performing layout rendering on a second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area; showing the component rendering results in the visible region.

In one possible embodiment, the display unit is further configured to: under the condition that the target rendering area comprises a plurality of sub-areas, performing layout rendering on a second component in each sub-area based on the list display data to obtain a sub-rendering result of each sub-area; and splicing each sub-rendering result and the current display area of the long list page to obtain the component rendering result.

The description of the processing flow of each unit in the device and the interaction flow between each unit may refer to the related description in the above method embodiments, and will not be described in detail here.

Corresponding to the page jump method in fig. 1, an embodiment of the present disclosure further provides a computer device 700, and as shown in fig. 7, a schematic structural diagram of the computer device 700 provided in the embodiment of the present disclosure includes:

processor 71, memory 72, and bus 73; the memory 72 is used for storing execution instructions and includes a memory 721 and an external memory 722; the memory 721 is also referred to as an internal memory, and is used for temporarily storing the operation data in the processor 71 and the data exchanged with the external memory 722 such as a hard disk, the processor 71 exchanges data with the external memory 722 through the memory 721, and when the computer device 700 is operated, the processor 71 communicates with the memory 72 through the bus 73, so that the processor 71 executes the following instructions:

in response to a jump instruction to a jump anchor in a long list page, determining a first component in a target list of the long list page that is associated with the jump anchor;

determining a component height for 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 matched with the jump anchor point from the long list page based on the component height;

determining a second component in the target list, which is located in 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.

The embodiment of the present disclosure further provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the computer program performs the steps of the page jump method in the foregoing method embodiment. The storage medium may be a volatile or non-volatile computer-readable storage medium.

The embodiments of the present disclosure further provide a computer program product, where the computer program product carries a program code, and instructions included in the program code may be used to execute the steps of the page jump method in the foregoing method embodiments, which may be specifically referred to the foregoing method embodiments and are not described herein again.

The computer program product may be implemented by hardware, software or a combination thereof. In an alternative embodiment, the computer program product is embodied in a computer storage medium, and in another alternative embodiment, the computer program product is embodied in a Software product, such as a Software Development Kit (SDK), or the like.

It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the system and the apparatus described above may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again. In the several embodiments provided in the present disclosure, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present disclosure may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.

The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such understanding, the technical solutions of the present disclosure, which are essential or part of the technical solutions contributing to the prior art, may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the methods described in the embodiments of the present disclosure. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

Finally, it should be noted that: the above-mentioned embodiments are merely specific embodiments of the present disclosure, which are used for illustrating the technical solutions of the present disclosure and not for limiting the same, and the scope of the present disclosure is not limited thereto, and although the present disclosure is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive of the technical solutions described in the foregoing embodiments or equivalent technical features thereof within the technical scope of the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the embodiments of the present disclosure, and should be construed as being included therein. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims

1. A page jump method is characterized by comprising the following steps:

2. The method of claim 1, wherein determining a target rendering region from the long-list page that matches the jump anchor based on the component height comprises:

determining the jump type of the jump anchor point; the skip type is used for indicating a skip mode that a visual area of the long list page skips from a current display area to the skip anchor point;

determining the target rendering zone based on the jump type and the component height.

3. The method of claim 2, wherein determining the target rendering region based on the jump type and the component height comprises:

under the condition that the jump type is a first jump type, acquiring the area height of the visible area; wherein the first jump type is used for indicating that the current display area jumps directly to the jump anchor point;

determining a target rendering zone in the target list based on the component height and a zone height of the viewable zone; wherein, the area height of the target rendering area is the area height of the visual area, and the first component is positioned in the target rendering area.

4. The method of claim 3, wherein determining a target rendering zone in the target list based on the component height and a zone height of the viewable zone comprises:

determining a predicted display position of the first component in the target rendering area;

and processing the height of the component and the height of the area of the visual area according to a processing mode matched with the predicted display position to obtain the target rendering area.

5. The method of claim 2, wherein determining the target rendering region based on the jump type and the component height comprises:

determining the display height of the current display area in the target list under the condition that the jump type is a second jump type; wherein the second jump type is used for indicating that the jump from the current display area to the jump anchor point is performed in a transitional animation mode;

determining a height difference between the display height and the component height;

determining the target rendering area based on a list area in the target list corresponding to the height difference.

6. The method of claim 5, wherein the target rendering region comprises a plurality of sub-regions; the determining the target rendering area based on the list area corresponding to the height difference in the target list comprises:

determining the number of animation frames in the transition animation corresponding to the second jump type;

dividing the list region into a plurality of sub-regions based on the number of animation frames; each sub-region corresponds to one animation frame in the transition animation, and the sub-region is a rendering region corresponding to each animation frame in the transition animation.

7. The method of claim 1, wherein said presenting the second component and list presentation data corresponding to the second component in the viewable area of the long list page comprises:

performing layout rendering on a second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area;

showing the component rendering results in the visible region.

8. The method of claim 7, wherein the target rendering region comprises a plurality of sub-regions;

the performing layout rendering on the second component in the target rendering area based on the list display data to obtain a component rendering result of the target rendering area includes:

performing layout rendering on a second component in each sub-region based on the list display data to obtain a sub-rendering result of each sub-region;

and splicing each sub-rendering result and the current display area of the long list page to obtain the component rendering result.

9. A page jump apparatus, comprising:

a display area determining unit, configured to determine, based on the component height, a target rendering area that matches the jump anchor from the long list page;

10. A computer device, comprising: a processor, a memory and a bus, the memory storing machine-readable instructions executable by the processor, the processor and the memory communicating via the bus when a computer device is running, the machine-readable instructions when executed by the processor performing the steps of the method of jumping a page according to any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, which computer program, when being executed by a processor, performs the steps of the method for jumping of pages of one of the claims 1 to 8.