Page processing method and device
Through the nested relationship between the first view component and the second view component, the switching of the page display area is controlled, and the problem of lag in the switching of the display area is solved, achieving a smooth user experience.
Patent Information
- Application Number
- CN202010852051.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2020-08-21
- Publication Date
- 2025-08-19
- Estimated Expiration
- 2040-08-21
AI Technical Summary
In the prior art, the way of maintaining different display areas of the page through different frames leads to stuttering in the switching process between different display areas, affecting the user experience.
Through the nested relationship between the first view component and the second view component, in response to the preset sliding response condition, the content update of the first display area and the second display area is controlled to ensure that the actual sliding distance reaches the theoretical sliding distance.
Smooth switching between different display areas is achieved, avoiding lags during page sliding and improving user experience.
Smart Images

Figure CN113761411B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of computer technology, and in particular to a page processing method and device. Background Art
[0002] To enhance the usability of web pages, multiple display areas are often configured for each page, with different content displayed in different display areas. For example, on e-commerce shopping websites, in addition to the basic function display areas, additional display areas (such as product recommendation display areas and product selection display areas) are often added, such as shopping pages, product details display pages, payment pages, and shopping cart pages. In the prior art, different display areas are mainly maintained through different frameworks.
[0003] In the process of implementing the present invention, the inventors discovered that the prior art has at least the following problems:
[0004] The existing method of maintaining different display areas of a page through different frames will cause a jamming phenomenon during the switching process between different display areas, affecting the user experience. Summary of the Invention
[0005] In view of this, an embodiment of the present invention provides a page processing method and device, which can enable smooth switching between different display areas in a page, avoid freezes during page sliding, and improve user experience.
[0006] To achieve the above object, according to one aspect of an embodiment of the present invention, a page processing method is provided, comprising:
[0007] Obtaining a sliding instruction for a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page;
[0008] In response to a preset first sliding response condition, controlling the first display area through the first view component according to the sliding direction, so as to update the display content in the first display area;
[0009] In response to the first view component satisfying the stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second display area is continuously controlled by the second view component according to the sliding direction to update the display content in the second display area.
[0010] Preferably,
[0011] The first sliding response condition includes:
[0012] The navigation bar in the second display area is not located in the target area of the display screen where the page is located;
[0013] or,
[0014] There is no content to be displayed in the second display area;
[0015] or,
[0016] The direction in which all the to-be-displayed contents in the second display area enter the second display area is opposite to the sliding direction.
[0017] Preferably, the page processing method further includes:
[0018] For the case where the second view component is nested in the first view component,
[0019] In response to a preset second sliding response condition, the second display area is controlled by the second view component according to the sliding direction, so that the display content in the second display area is updated.
[0020] Preferably, the second sliding response condition includes:
[0021] The navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
[0022] Preferably,
[0023] The navigation bar in the second display area includes multiple navigation options, each of which corresponds to a different category of display content.
[0024] Controlling the second display area by the second view component so as to update the display content in the second display area includes:
[0025] In response to the currently displayed navigation option and the sliding direction, determining to-be-displayed content of a category matching the currently displayed navigation option;
[0026] According to the determined content to be displayed, the second display area is updated through the second view component.
[0027] Preferably, controlling the second view component to update the display content in the second display area includes:
[0028] The sliding direction indicates that content after the currently displayed content is displayed, and the currently displayed navigation option is not the last navigation option,
[0029] In response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the next navigation option to display the content of the matching category of the next navigation option in the second display area.
[0030] Preferably, controlling the second display area by the second view component so as to update the display content in the second display area includes:
[0031] The sliding direction indicates that content before the currently displayed content is displayed, and the currently displayed navigation option is not the first navigation option,
[0032] In response to the content of the currently displayed navigation option matching category satisfying the sliding stop condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the previous navigation option to display the content of the previous navigation option matching category in the second display area.
[0033] Preferably, the sliding stop condition includes:
[0034] The contents of the category matching the currently displayed navigation options are all displayed on the display screen where the page is located;
[0035] or,
[0036] The direction in which the to-be-displayed content of the currently displayed navigation option matching category enters the display screen where the page is located is opposite to the sliding direction.
[0037] Preferably, the page processing method further comprises: responding to a sliding event, wherein the sliding event includes a sliding direction, a sliding start position, and a sliding end position, and calculating a theoretical sliding distance according to the sliding start position and the sliding end position;
[0038] The acquiring the sliding instruction of the page includes: converting the sliding direction and the calculated theoretical sliding distance into a sliding instruction.
[0039] In a second aspect, an embodiment of the present invention provides a page processing device, comprising: an acquisition unit, a first view component and a second view component, wherein:
[0040] The acquisition unit is configured to acquire a sliding instruction of a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page;
[0041] The first view component is configured to control the first display area in response to a preset first sliding response condition and according to the sliding direction, so as to update the display content in the first display area;
[0042] The second view component is used to respond to the first view component meeting the stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, and to continue controlling according to the sliding direction so as to update the display content in the second display area.
[0043] Preferably,
[0044] For the case where the second view component is nested in the first view component,
[0045] The second view component is used to control the second display area in response to a preset second sliding response condition and according to the sliding direction, so as to update the display content in the second display area.
[0046] One embodiment of the above invention has the following advantages or beneficial effects: because a first display area included in a page is controlled by a first view component and a second display area included in the page is controlled by a second view component, and there is a nested relationship between the first view component and the second view component, the nested relationship makes switching between the first view component and the second view component relatively simple and convenient. Furthermore, in response to a preset first sliding response condition, the first view component controls the first display area according to the sliding direction to update the display content in the first display area. In response to the first view component satisfying a stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component controls the second display area according to the sliding direction to update the display content in the second display area. In other words, the switching between the first view component and the second view component is controlled by the first sliding response condition and the stop control condition. Therefore, the switching between the first view component and the second view component can be achieved with a relatively simple configuration. Furthermore, the switching between the first view component and the second view component does not involve content inheritance and is relatively independent. Therefore, the switching between the first view component and the second view component can be completed relatively quickly and smoothly, avoiding lag during page sliding, thereby improving the user experience.
[0047] The further effects of the above-mentioned non-conventional optional manner will be described below in conjunction with specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS
[0048] The accompanying drawings are provided for a better understanding of the present invention and are not intended to limit the present invention.
[0049] Figure 1 is a schematic diagram of the main process of the page processing method according to an embodiment of the present invention;
[0050] Figure 2 is a schematic diagram of various regions in a page according to an embodiment of the present invention;
[0051] Figure 3 is a schematic diagram of various regions in a page according to another embodiment of the present invention;
[0052] Figure 4 is a schematic diagram of various areas in a page according to yet another embodiment of the present invention;
[0053] Figure 5 is a schematic diagram of various regions in a page according to another embodiment of the present invention;
[0054] Figure 6 is a schematic diagram of various areas in a page according to yet another embodiment of the present invention;
[0055] Figure 7 is a schematic diagram of various areas in a page according to yet another embodiment of the present invention;
[0056] Figure 8 is a schematic diagram of main units of a page processing apparatus according to an embodiment of the present invention;
[0057] Figure 9 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;
[0058] Figure 10 It is a schematic diagram of the structure of a computer system of a terminal device suitable for implementing an embodiment of the present invention. DETAILED DESCRIPTION
[0059] The following description of exemplary embodiments of the present invention is made in conjunction with the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding. These details should be considered as merely exemplary. Therefore, it should be appreciated by those skilled in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.
[0060] Figure 1 is a page processing method according to an embodiment of the present invention, such as Figure 1 As shown, the page processing method may include the following steps:
[0061] S101: Obtaining a sliding instruction for a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page;
[0062] S102: In response to a preset first sliding response condition, controlling a first display area through a first view component according to a sliding direction, so as to update display content in the first display area;
[0063] S103: In response to the first view component satisfying the stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second display area is continuously controlled by the second view component according to the sliding direction to update the display content in the second display area.
[0064] The theoretical sliding distance refers to the distance that the page displayed on the screen needs to slide when the user slides on the terminal (mobile phone, computer, etc.) screen through gestures or input devices (such as mouse, keyboard, electronic pen, etc.).
[0065] The view component may maintain a virtual table consisting of one or more tables to provide the user with data in the database from a specific perspective in the display area controlled by the view component.
[0066] The nested relationship may include: a first view component nested within a second view component, or a second view component nested within a first view component. The first view component and the second view component may be constructed using view classes maintained by the Android system. The first view component may be constructed as a parent view component, and the second view component may be constructed as a child view component accordingly; or the second view component may be constructed as a parent view component, and the first view component may be constructed as a child view component accordingly.
[0067] In a preferred embodiment, the nested view component is a parent view component, and the view component nested in the parent view component is a child view component. For example, if the second view component is nested in the first view component, then the first view component is the parent view component and the second view component is the child view component. It is worth noting that one page generally corresponds to one parent view component, and one parent view component can nest at least one child view component. Among them, controlling the first display area by the first view component so that the display content in the first display area is updated can be specifically as follows: a part of the first display area is located on the display screen where the page is located, and as the page slides, another part of the first display area is displayed on the display screen where the page is located, and a part of the first display area is adjacent to the other part of the first display area, so that the content displayed on the display screen where the page is located changes; or, a part of the display content of the first display area is located on the display screen where the page is located, and as the page slides, the display content is updated with a part of the content to be displayed in the first display area on the display screen where the page is located.
[0068] Among them, the second display area is continuously controlled by the second view component so that the display content in the first display area is updated specifically as follows: a part of the second display area is located on the display screen where the page is located, and as the page slides, another part of the second display area is displayed on the display screen where the page is located, and a part of the second display area is adjacent to the other part of the second display area, so that the content displayed on the display screen where the page is located changes; or, a part of the display content of the second display area is located on the display screen where the page is located, and as the page slides, the display content is updated with a part of the content to be displayed in the second display area on the display screen where the page is located.
[0069] Among them, the stop control condition satisfied by the first view component may be the sliding response condition corresponding to the second view component, and the stop control condition satisfied by the first view component may be: the navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
[0070] The actual scroll distance of the page refers to the sum of the scroll distance of the display content in the first display area and the scroll distance of the display content in the second display area after the display content in the first display area stops scrolling. If the scroll distance of the display content in the first display area has reached the theoretical scroll distance, the scroll distance of the display content in the second display area after the display content in the first display area stops scrolling is 0.
[0071] like Figure 2 and Figure 3As shown, it is worth noting that the first display area and the second display area are each part of the page. For example, the first display area is the entire page area, and the second display area is an area maintained within the first display area. The display screen of the page can generally display part of the display content of the first display area and / or part of the display content of the second display area. For example, each display area may have content to be displayed or content that has been displayed but is not displayed on the display screen where the page is located.
[0072] The sliding response conditions will be described in detail below and will not be repeated here.
[0073] against Figure 1 In the illustrated embodiment, since the first display area included in the page is controlled by the first view component and the second display area included in the page is controlled by the second view component, and there is a nested relationship between the first view component and the second view component, this nested relationship makes switching between the first and second view components relatively simple and convenient. Furthermore, in response to a preset first sliding response condition, the first view component controls the first display area based on the sliding direction to update the displayed content in the first display area. In response to the first view component meeting a stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component then controls the second display area based on the sliding direction to update the displayed content in the second display area. In other words, the switching between the first and second view components is controlled by the first sliding response condition and the stop control condition. This means that switching between the first and second view components can be achieved with a relatively simple configuration. Furthermore, the switching between the first and second view components does not involve content inheritance and is relatively independent. Therefore, switching between the first and second view components can be completed quickly and smoothly, avoiding any lag during page sliding, thereby improving the user experience.
[0074] In particular, based on the sliding nested class provided by the Android system, the switching between the first view component and the second view component can be easily achieved through seamless sliding through simple code access, and the first view component and the second view component only need to maintain a set of page frames, saving labor costs.
[0075] In an embodiment of the present invention, the sliding response condition may include: the navigation bar in the second display area is not located in the target area of the display screen where the page is located. The navigation bar in the second display area is generally located in the starting position range of the second display area.
[0076] In an embodiment of the present invention, the above-mentioned sliding response conditions may include: there is no content to be displayed in the second display area, wherein the navigation bar of the second display area may be located in the target area of the display screen where the page is located or may not be located in the target area of the display screen where the page is located.
[0077] In an embodiment of the present invention, the sliding response condition may include: the direction of the display screen where all the content to be displayed in the second display area enters the page is opposite to the sliding direction. For example, if all the content to be displayed in the second display area is located below the current display content, then the direction of the display screen where all the content to be displayed in the second display area enters the page is upward; if all the content to be displayed in the second display area is located above the current display content, then the direction of the display screen where all the content to be displayed in the second display area enters the page is downward, and so on.
[0078] In an embodiment of the present invention, in the case where the second view component is nested in the first view component, in response to the preset second sliding response condition, the second display area is controlled by the second view component according to the sliding direction, so that the display content in the second display area is updated. After this step, it may also include: in response to the second view component meeting the stop control condition and the actual sliding distance of the page is less than the theoretical sliding distance, the first display area is continuously controlled by the first view component according to the sliding direction, so that the display content in the first display area is updated. This process exists in an alternative manner with the above-mentioned steps S102 and S103. That is, in response to the preset second sliding response condition, the situation of responding to the preset first sliding response condition will not occur at the same time, and in response to the first view component meeting the stop control condition, the situation of responding to the first view component meeting the stop control condition will not occur at the same time.
[0079] In an embodiment of the present invention, the second sliding response condition may include: the navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
[0080] like Figure 2 、 Figure 3 、 Figure 4 、 Figure 5 as well as Figure 6 The positional relationship among the second display area, the navigation bar, the display screen where the page is located, the first display area and the target area is given as an example, as well as the relationship between the direction in which the content to be displayed in the second display area enters the display screen where the page is located and the sliding direction. Figure 2 and Figure 3 Shows a situation where the navigation bar is not in the target area (the page can slide up and down). Figure 2 and Figure 3In the page structure shown, the first view component satisfies the first sliding response condition corresponding to the first view component, while the second display area does not satisfy the second sliding response condition corresponding to the second display area; Figure 4 Shows a Figure 2 The relative navigation bar is in the target area. Figure 5 Shows a Figure 3 The relative navigation bar is within the target area, and Figure 4 、 Figure 5 In the second display area, the content to be displayed is below the display content (the direction in which the content to be displayed enters the display screen is upward), and the sliding direction is the upward sliding indicated by the arrow, then Figure 4 、 Figure 5 In the page structure shown, the second view component satisfies the second sliding response condition. Figure 6 Another situation is shown where the navigation bar is not in the target area (the page can be slid left and right). Figure 6 In the page structure shown, the second view component does not meet the second sliding response condition; Figure 8 Shows a Figure 6 The relative navigation bar is within the target area, and Figure 8 The position of the content to be displayed in the second display area is to the right of the display content (that is, the direction of the content to be displayed in the second display area entering the display screen is to the left), and the sliding direction is the left sliding as shown by the arrow, then Figure 8 In the page structure shown, the second display component meets the sliding response condition.
[0081] It is worth noting that the area or size of the target area is generally not smaller than the navigation bar, so as to facilitate the control of the navigation bar. Figures 2 to 8 It can be seen that the target area is generally set on one side of the display screen. For the Android system, the position of the target area can be determined by the ceiling effect, that is, when the second display area controlled by the second view component produces a ceiling effect, the navigation bar in the display area controlled by the second view component is located in the target area.
[0082] In addition, the above Figures 2 to 8 The only sliding direction shown is sliding towards the navigation bar or the target area. If the sliding direction is sliding away from the navigation bar or the target area, and there is content that has been displayed above the second display area (that is, the content that has been displayed can be used as content to be displayed, then the direction in which the content to be displayed enters the display screen is also away from the navigation bar or the target area), then the second view component also meets the second sliding response condition.
[0083] like Figure 2 and Figure 3As shown in the page relationship, when the sliding direction is upward, the first display area (i.e., other areas outside the second display area) controlled by the first view component slides upward, and the position of the second display area also changes accordingly, while the data or content displayed in the second display area remains unchanged. When the navigation bar in the second display area reaches Figure 4 and Figure 5 After the target area is shown, if the actual sliding distance of the page is less than the theoretical sliding distance, the second view component is used to control the sliding of the display content in the second display area, so that the sliding distance of the display content in the second display area plus the sliding distance of the display content in the first display area is equal to the theoretical sliding distance.
[0084] In an embodiment of the present invention, the navigation bar includes multiple navigation options, and the multiple navigation options correspond to different categories of display content. Controlling the second display area through the second view component so that the display content in the second display area is updated may include: determining the content to be displayed of the category matching the currently displayed navigation option in response to the currently displayed navigation option and the sliding direction; and updating the second display area through the second view component based on the determined content to be displayed.
[0085] like Figure 4 and Figure 5 The display includes three navigation options, each with a matching category of display content. When any navigation option is selected, the matching category of content is displayed in the second display area. This allows different navigation options to be displayed in the same display area, making it easier for users to operate and select the content or information they want to view.
[0086] In an embodiment of the present invention, controlling the second display area through the second view component so that the display content in the second display area is updated may include: displaying the content after the currently displayed content according to the sliding direction indication, and the currently displayed navigation option is not the last navigation option, in response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition, and the actual sliding distance of the page is less than the theoretical sliding distance, controlling the jump from the currently displayed navigation option to the next navigation option through the second view component to display the content of the matching category of the next navigation option in the second display area.
[0087] You can sort the navigation options, for example, Figure 4 The navigation options shown are sorted from left to right or from right to left, or sorted according to the importance of the navigation options. This sorting mainly indicates the order in which the various navigation options are selected under the sliding operation. For example, Figure 4The navigation options are sorted from left to right (i.e., the content of the category matching the leftmost navigation option is displayed first, followed by the content of the category matching the middle navigation option, and finally the content of the category matching the rightmost navigation option).
[0088] The sliding direction indicates that the content after the current content is displayed, which means that the sliding direction is the direction close to the target area or the navigation bar. Figure 4 If the current navigation option shown is the leftmost navigation option, then the currently displayed navigation option is not the last navigation option. In response to the content of the category matching the currently displayed navigation option displayed in the second display area meeting the sliding stop condition and the actual sliding distance of the page is less than the theoretical sliding distance, the page jumps from the currently displayed navigation option to the next navigation option according to the sliding direction ( Figure 4 The middle navigation option shown) to display the next navigation option ( Figure 4 The middle navigation option shown) matches the content of the category, and so on.
[0089] In an embodiment of the present invention, controlling the second display area through the second view component so that the display content in the second display area is updated may include: displaying content before the currently displayed content according to the sliding direction indication, and the currently displayed navigation option is not the first navigation option, in response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition and the actual sliding distance of the page is less than the theoretical sliding distance, controlling the jump from the currently displayed navigation option to the previous navigation option through the second view component to display the content of the matching category of the previous navigation option in the second display area.
[0090] For the sliding direction indication, the content before the currently displayed content is displayed when the sliding direction is away from the navigation bar or the target area, for example Figure 4 and Figure 5 The opposite direction of the sliding direction is shown.
[0091] Still Figure 4 The navigation options shown are sorted from left to right or from right to left as an example (i.e., the content corresponding to the leftmost navigation option is displayed first, then the content corresponding to the navigation option in the middle position, and finally the content corresponding to the rightmost navigation option).
[0092] Then when the navigation option in the middle is the current navigation option, the sliding direction is the same as Figure 4 The sliding direction shown is opposite (i.e., the sliding direction indicates displaying the content before the currently displayed content), and the currently displayed navigation option is not the first navigation option. In response to the currently displayed navigation option satisfying the sliding stop condition and the actual sliding distance of the page being less than the theoretical sliding distance, the currently displayed navigation option is jumped to the previous navigation option according to the sliding direction. Figure 4) to display the previous navigation option ( Figure 3 The leftmost navigation option shown) matches the content of the category.
[0093] In an embodiment of the present invention, the sliding stop condition may include: the contents of the matching categories of the currently displayed navigation options are all displayed on the display screen where the page is located.
[0094] In an embodiment of the present invention, the sliding stop condition may include: the direction of the display screen where the content to be displayed of the currently displayed navigation option matching category enters the page is opposite to the sliding direction. For example, if the content to be displayed of the currently displayed navigation option matching category is located above the currently displayed content, then the direction of the content to be displayed of the currently displayed navigation option matching category entering the display screen is from top to bottom, while the sliding direction is from bottom to top, that is, the direction of the display screen where the content to be displayed of the currently displayed navigation option matching category enters the page is opposite to the sliding direction.
[0095] In an embodiment of the present invention, the page processing method may further include: responding to a sliding event, the sliding event including a sliding direction, a sliding starting position, and a sliding ending position, and calculating a theoretical sliding distance based on the sliding starting position and the sliding ending position; accordingly, obtaining a sliding instruction of the page may include: converting the sliding direction and the calculated theoretical sliding distance into a sliding instruction.
[0096] The theoretical sliding distance can be calculated by setting a coordinate axis for the display screen, and calculating the theoretical sliding distance according to the following calculation formula (1) using the coordinate of the sliding start position and the vertical coordinate of the sliding end position.
[0097] L1=|y1-y2| (1)
[0098] Wherein, L1 represents the theoretical sliding distance calculated by formula (1); y1 represents the vertical coordinate of the sliding start position; and y2 represents the vertical coordinate of the sliding end position.
[0099] The theoretical sliding distance can also be calculated by setting a coordinate axis for the display screen, and calculating the theoretical sliding distance according to the following calculation formula (2) using the coordinate of the sliding start position and the vertical coordinate of the sliding end position.
[0100] L2=|y1-y2|×α (2)
[0101] Wherein, L2 represents the theoretical sliding distance calculated by formula (2); y1 represents the vertical coordinate of the sliding start position; y2 represents the vertical coordinate of the sliding end position; α represents the conversion coefficient.
[0102] The conversion coefficient can be maintained by a pre-set mapping relationship table between the user's pressing force and the conversion coefficient, that is, in the mapping relationship table, a corresponding conversion coefficient is configured for each pressing force range, and the conversion coefficient in the above calculation formula (2) can be obtained by referring to the mapping relationship table.
[0103] like Figure 8 As shown, an embodiment of the present invention provides a page processing device 800, which may include: an acquisition unit 801, a first view component 802 and a second view component 803, wherein:
[0104] An acquisition unit 801 is configured to acquire a sliding instruction for a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page;
[0105] The first view component 802 is configured to control the first display area in response to a preset first sliding response condition and according to a sliding direction, so as to update the display content in the first display area;
[0106] The second view component 803 is used to control the second display area according to the sliding direction in response to the first view component meeting the stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, so as to update the display content in the second display area.
[0107] In this embodiment of the present invention, the first sliding response condition includes:
[0108] The navigation bar in the second display area is not located in the target area of the display screen where the page is located;
[0109] or,
[0110] There is no content to be displayed in the second display area;
[0111] or,
[0112] The direction of the display screen where all the to-be-displayed contents in the second display area enter the page is opposite to the sliding direction.
[0113] In an embodiment of the present invention, the second view component 803 is used to control the second display area through the second view component according to the sliding direction in response to a preset second sliding response condition in the case where the second view component is nested in the first view component, so as to update the display content in the second display area.
[0114] In an embodiment of the present invention, the second sliding response condition includes: the navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
[0115] In an embodiment of the present invention, the second view component 803 is used to include multiple navigation options for the navigation bar in the second display area, and the multiple navigation options respectively correspond to different categories of display content. In response to the currently displayed navigation option and the sliding direction, the second display area is updated through the second view component according to the determined content to be displayed.
[0116] In an embodiment of the present invention, the second view component 803 is used to display the content after the currently displayed content according to the sliding direction indication, and the currently displayed navigation option is not the last navigation option. In response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition, and the actual sliding distance of the page is less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the next navigation option to display the content of the matching category of the next navigation option in the second display area.
[0117] In an embodiment of the present invention, the second view component 803 is used to display content before the currently displayed content according to the sliding direction indication, and the currently displayed navigation option is not the first navigation option. In response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition and the actual sliding distance of the page is less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the previous navigation option to display the content of the matching category of the previous navigation option in the second display area.
[0118] In an embodiment of the present invention, the sliding stop condition includes:
[0119] The content of the categories matching the currently displayed navigation options are displayed on the display screen where the page is located;
[0120] or,
[0121] The direction of the display screen where the content to be displayed of the category matching the currently displayed navigation option enters the page is opposite to the sliding direction.
[0122] In an embodiment of the present invention, the acquisition unit 801 is used to respond to a sliding event, which includes a sliding direction, a sliding start position, and a sliding end position, calculate a theoretical sliding distance based on the sliding start position and the sliding end position; and convert the sliding direction and the calculated theoretical sliding distance into a sliding instruction.
[0123] Figure 9 An exemplary system architecture 900 is shown to which the page processing method or the page processing apparatus according to the embodiment of the present invention can be applied.
[0124] like Figure 9 As shown, system architecture 900 may include terminal devices 901, 902, 903, a network 904, and a server 905. Network 904 is used to provide a medium for communication links between terminal devices 901, 902, 903 and server 905. Network 904 may include various connection types, such as wired or wireless communication links or fiber optic cables.
[0125] Users can use terminal devices 901, 902, and 903 to interact with server 905 via network 904 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 901, 902, and 903, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).
[0126] The terminal devices 901 , 902 , and 903 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop computers, and desktop computers.
[0127] The server 905 may be a server that provides various services, such as a background management server that provides support for shopping websites browsed by users using the terminal devices 901 , 902 , and 903 (for example only).
[0128] It should be noted that the page processing method provided in the embodiment of the present invention is generally executed by the terminal devices 901, 902, and 903. Accordingly, the page processing apparatus is generally provided in the terminal devices 901, 902, and 903. The terminal devices 901, 902, and 903 display the page information received from the server and control the sliding of the page according to the sliding direction of the user.
[0129] It should be understood that Figure 9 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.
[0130] Reference below Figure 10 , which shows a schematic structural diagram of a computer system 1000 of a terminal device suitable for implementing an embodiment of the present invention. Figure 10 The terminal device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.
[0131] like Figure 10As shown, the computer system 1000 includes a central processing unit (CPU) 1001, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage unit 1008 into a random access memory (RAM) 1003. Various programs and data required for the operation of the system 1000 are also stored in the RAM 1003. The CPU 1001, the ROM 1002, and the RAM 1003 are connected to each other via a bus 1004. An input / output (I / O) interface 1005 is also connected to the bus 1004.
[0132] The following components are connected to the I / O interface 1005: an input section 1006 including a keyboard, a mouse, and the like; an output section 1007 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 1008 including a hard disk; and a communication section 1009 including a network interface card such as a LAN card or a modem. The communication section 1009 performs communication processing via a network such as the Internet. A drive 1010 is also connected to the I / O interface 1005 as needed. A removable medium 1011, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 1010 as needed, so that computer programs read therefrom can be installed into the storage section 1008 as needed.
[0133] In particular, according to the embodiments disclosed herein, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed herein include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 1009, and / or installed from a removable medium 1011. When the computer program is executed by the central processing unit (CPU) 1001, the above-mentioned functions defined in the system of the present invention are performed.
[0134] It should be noted that the computer-readable medium described in the present invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal can take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.
[0135] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present invention. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0136] The units involved in the embodiments of the present invention may be implemented in software or hardware. The units described may also be provided in a processor. For example, they may be described as follows: a processor includes an acquisition unit, a first view component, and a second view component. The names of these units do not, in some cases, limit the units themselves. For example, the acquisition unit may also be described as a "unit for acquiring a page sliding instruction."
[0137] As another aspect, the present invention further provides a computer-readable medium, which may be included in the device described in the above embodiment; or may exist independently and not be assembled into the device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by a device, the device includes: obtaining a sliding instruction of a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, and there is a nested relationship between the first view component and the second view component, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page; in response to a preset first sliding response condition, according to the sliding direction, the first display area is controlled by the first view component so that the display content in the first display area is updated; in response to the first view component meeting the stop control condition and the actual sliding distance of the page is less than the theoretical sliding distance, the second display area is continuously controlled by the second view component according to the sliding direction so that the display content in the second display area is updated.
[0138] According to the technical solution of an embodiment of the present invention, since the first display area included in the page is controlled by the first view component and the second display area included in the page is controlled by the second view component, and there is a nested relationship between the first view component and the second view component, the existence of this nested relationship makes switching between the first view component and the second view component relatively simple and convenient. In addition, in response to a preset first sliding response condition, the first view component controls the first display area according to the sliding direction to update the display content in the first display area. In response to the first view component meeting a stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component controls the second display area according to the sliding direction to update the display content in the second display area. In other words, the switching between the first view component and the second view component is controlled by the first sliding response condition and the stop control condition. In other words, the switching between the first view component and the second view component can be achieved with a relatively simple configuration. In addition, the switching between the first view component and the second view component does not involve content inheritance and is relatively independent. Therefore, the switching between the first view component and the second view component can be completed relatively quickly and smoothly, avoiding any lag during page sliding, thereby improving the user experience.
[0139] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.
Claims
1. A page processing method, characterized in that: include: Obtaining a sliding instruction for a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page; In response to a preset first sliding response condition, the first display area is controlled by the first view component according to the sliding direction, so that the display content in the first display area is updated; the first sliding response condition includes: the navigation bar in the second display area is not located in the target area of the display screen where the page is located; or, there is no content to be displayed in the second display area; or, all the content to be displayed in the second display area enters the display screen where the page is located in a direction opposite to the sliding direction; In response to the first view component satisfying a stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second display area is continuously controlled by the second view component according to the sliding direction, so that the display content in the second display area is updated; The theoretical sliding distance refers to the distance that the page displayed on the screen needs to slide due to the user sliding on the terminal screen through gestures or input devices; the actual sliding distance of the page refers to the sum of the sliding distance of the display content in the first display area and the sliding distance of the display content in the second display area after the display content in the first display area stops sliding; Also includes: For the case where the second view component is nested in the first view component, In response to a preset second sliding response condition, the second display area is controlled by the second view component according to the sliding direction so that the display content in the second display area is updated; the second sliding response condition includes: the navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
2. The page processing method according to claim 1, characterized in that: The navigation bar in the second display area includes multiple navigation options, each of which corresponds to a different category of display content. Controlling the second display area by the second view component so as to update the display content in the second display area includes: In response to the currently displayed navigation option and the sliding direction, determining to-be-displayed content of a category matching the currently displayed navigation option; According to the determined content to be displayed, the second display area is updated through the second view component.
3. The page processing method according to claim 2, characterized in that: Controlling the second display area by the second view component so as to update the display content in the second display area includes: The sliding direction indicates that content after the currently displayed content is displayed, and the currently displayed navigation option is not the last navigation option, In response to the content of the matching category of the currently displayed navigation option satisfying the sliding stop condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the next navigation option to display the content of the matching category of the next navigation option in the second display area.
4. The page processing method according to claim 2, characterized in that: Controlling the second display area by the second view component so as to update the display content in the second display area includes: The sliding direction indicates that content before the currently displayed content is displayed, and the currently displayed navigation option is not the first navigation option, In response to the content of the currently displayed navigation option matching category satisfying the sliding stop condition and the actual sliding distance of the page being less than the theoretical sliding distance, the second view component is used to control the jump from the currently displayed navigation option to the previous navigation option to display the content of the previous navigation option matching category in the second display area.
5. The page processing method according to claim 3 or 4, characterized in that: The sliding stop conditions include: The contents of the category matching the currently displayed navigation options are all displayed on the display screen where the page is located; or, The direction in which the to-be-displayed content of the currently displayed navigation option matching category enters the display screen where the page is located is opposite to the sliding direction.
6. The page processing method according to any one of claims 1 to 4, characterized in that: The method further includes: responding to a sliding event, the sliding event including a sliding direction, a sliding start position, and a sliding end position, and calculating a theoretical sliding distance according to the sliding start position and the sliding end position; The acquiring the sliding instruction of the page includes: converting the sliding direction and the calculated theoretical sliding distance into the sliding instruction.
7. A page processing device, characterized in that: include: An acquisition unit, a first view component, and a second view component, wherein: The acquisition unit is configured to acquire a sliding instruction of a page, wherein the page includes a first display area and a second display area, the first display area is controlled by a first view component, the second display area is controlled by a second view component, the first view component and the second view component are in a nested relationship, and the sliding instruction includes a sliding direction and a theoretical sliding distance of the page; The first view component is configured to control the first display area according to the sliding direction in response to a preset first sliding response condition, so as to update the display content in the first display area; the first sliding response condition includes: the navigation bar in the second display area is not located in the target area of the display screen where the page is located; or, there is no content to be displayed in the second display area; or, all the content to be displayed in the second display area enters the display screen where the page is located in a direction opposite to the sliding direction; The second view component is configured to, in response to the first view component satisfying a stop control condition and the actual sliding distance of the page being less than the theoretical sliding distance, continue to control the second display area according to the sliding direction so as to update the display content in the second display area; The theoretical sliding distance refers to the distance that the page displayed on the screen needs to slide due to the user sliding on the terminal screen through gestures or input devices; the actual sliding distance of the page refers to the sum of the sliding distance of the display content in the first display area and the sliding distance of the display content in the second display area after the display content in the first display area stops sliding; For the case where the second view component is nested in the first view component, The second view component is used to control the second display area in response to a preset second sliding response condition and according to the sliding direction, so that the display content in the second display area is updated; the second sliding response condition includes: the navigation bar in the second display area is located in the target area of the display screen, and the direction in which the content to be displayed in the second display area enters the display screen is the same as the sliding direction.
8. An electronic device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 6.
9. A computer-readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.
Citation Information
Patent Citations
Wap-page-based area interaction method and system
CN103970759A
Page switching control method and device, equipment and computer readable storage medium
CN109918002A
Sliding view display method and device and mobile terminal
CN110568974A
Graphical User Interface for Mobile Phones
CN305317005S