Page switching method, device, terminal and storage medium

Abstract

The present application relates to the field of information processing technology, and in particular to a page switching method, device, terminal and storage medium. The method includes: when receiving a sliding parameter sent by a display container, determining whether the corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the monitored sliding event, and the sliding parameter includes the sliding direction and sliding distance corresponding to the sliding event, the display container is the page container bound to the current page, and the current page is the page currently displayed by the terminal; when it is determined that the sliding event is valid, determining the target page based on at least one parameter in the sliding parameter; switching the display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page. The method of the present application can improve the efficiency of page switching in mobile terminal software.

Description

Technical Field

[0001] The present application relates to the field of information processing technology, and in particular to a page switching method, device, terminal and storage medium. Background Art

[0002] Currently, there are usually multiple home pages in mobile software, such as the several tabs corresponding to the Tab navigation bar at the bottom of the software, each tab corresponds to a different home page; the Tab container corresponding to the Tab navigation bar is used to control switching between pages, and each page corresponds to a container; when the Tab container switches a page container to a display container, the page container renders the content in the page for display.

[0003] In the related art, the method of switching between home pages requires the user to select the target tag in the Tab navigation bar at the bottom, so as to switch the current page displayed in the display area of ​​the terminal to the home page corresponding to the target tag; that is, in the related art, the user can only switch pages by clicking the tag in the Tab navigation bar. However, when the screen size of the mobile terminal is large, such as when using software on a car computer, a large-sized mobile phone or a tablet computer, the user's palm needs to travel a long distance to move to the Tab navigation bar to switch to the home page; the page switching method in the related art is inefficient; and in scenarios where the user needs to switch home pages frequently, the home page switching method in the related art may bring a bad user experience.

[0004] Therefore, how to improve the efficiency of page switching in mobile software is an urgent problem to be solved. Summary of the Invention

[0005] Based on this, it is necessary to provide a page switching method, device, terminal and storage medium that can improve the efficiency of page switching in mobile software to address the above technical problems.

[0006] In a first aspect, the present application provides a page switching method, wherein a terminal is configured with a Tab container and multiple page containers, the page container is used to render and display bound pages, and the method is applied to the Tab container in the terminal, the method comprising:

[0007] Upon receiving a sliding parameter sent by a display container, determining whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the detected sliding event, and the sliding parameter includes a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal;

[0008] When it is determined that the sliding event is valid, determining a target page based on at least one parameter among the sliding parameters;

[0009] The display container is switched from the page container bound to the current page to the page container bound to the target page, so that the target page is rendered and displayed through the page container bound to the target page.

[0010] In one embodiment, determining whether the sliding event is valid based on the sliding parameter includes:

[0011] determining whether the sliding event is valid based on a relationship between the sliding distance and a distance threshold; and / or,

[0012] Whether the sliding event is valid is determined based on the switching order corresponding to the sliding direction and the sequential relationship between the pages in the level where the current page is located.

[0013] In one embodiment, determining the target page based on at least one of the sliding parameters includes:

[0014] Determining a switching order corresponding to the sliding direction;

[0015] Based on the switching sequence, a target page is determined from the sequential relationship between pages in the level where the current page is located.

[0016] In one embodiment, determining the target page based on at least one of the sliding parameters includes:

[0017] Receiving a tab preview table sent by the display container; wherein the tab preview table is rendered and generated by the display container when a sliding event is detected, and the tab preview table is displayed in the triggering area of ​​the sliding event; the tab preview table includes page labels of each to-be-selected page, wherein each to-be-selected page is determined based on the sliding direction and the order relationship between pages at the level of the current page;

[0018] Based on the correspondence between the preset distance and each page label, the target page corresponding to the sliding distance is determined from the label preview table.

[0019] In one embodiment, the method further comprises:

[0020] determining at least one of the sliding direction, the current page, and the target page as a target switching condition;

[0021] Determining the switching animation corresponding to the target switching condition based on the corresponding relationship between the switching condition and the switching animation;

[0022] The switching animation is called and displayed during the switching process of the display container.

[0023] In one embodiment, the tab container stores tabs corresponding to each page, and the method further includes:

[0024] When receiving a cut-out notification sent by a container bound to the current page, based on the cut-out notification, changing the label corresponding to the current page to a first state, wherein the first state representation is not displayed;

[0025] When receiving a cut-in notification sent by the container bound to the target page, based on the cut-in notification, the tag corresponding to the target page is updated to a second state, where the second state represents waiting to be displayed or being displayed.

[0026] In one embodiment, the method further comprises:

[0027] Each of the pages is provided with a corresponding candidate area, and a switching mark is displayed in the candidate area. The switching mark is used to prompt the user to perform a sliding operation in the candidate area to switch pages. The sliding event includes the display container monitoring the sliding operation generated in the candidate area of ​​the current page.

[0028] In a second aspect, the present application further provides a page switching device, the device comprising a validity judgment module, a target page determination module, and a switching module, wherein:

[0029] a validity determination module, configured to, upon receiving a sliding parameter sent by a display container, determine whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on a detected sliding event, the sliding parameter including a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal;

[0030] a target page determining module, configured to determine a target page based on at least one of the sliding parameters when determining that the sliding event is valid;

[0031] The switching module is used to switch the display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page.

[0032] In a third aspect, the present application further provides a terminal, comprising a memory and a processor, wherein the memory stores a computer program, a tab container and multiple page containers are configured in the terminal, and the page container is used to render the content in the page, and when the processor executes the computer program, the following steps are implemented:

[0033] Upon receiving a sliding parameter sent by a display container, determining whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the detected sliding event, and the sliding parameter includes a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal;

[0034] When it is determined that the sliding event is valid, determining a target page based on at least one parameter among the sliding parameters;

[0035] The display container is switched from the page container bound to the current page to the page container bound to the target page, so that the target page is rendered and displayed through the page container bound to the target page.

[0036] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the following steps are implemented:

[0037] Upon receiving a sliding parameter sent by a display container, determining whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the detected sliding event, and the sliding parameter includes a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal;

[0038] When it is determined that the sliding event is valid, determining a target page based on at least one parameter among the sliding parameters;

[0039] The display container is switched from the page container bound to the current page to the page container bound to the target page, so that the target page is rendered and displayed through the page container bound to the target page.

[0040] In a fifth aspect, the present application further provides a computer program product, comprising a computer program, which, when executed by a processor, implements the following steps:

[0041] Upon receiving a sliding parameter sent by a display container, determining whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the detected sliding event, and the sliding parameter includes a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal;

[0042] When it is determined that the sliding event is valid, determining a target page based on at least one parameter among the sliding parameters;

[0043] The display container is switched from the page container bound to the current page to the page container bound to the target page, so that the target page is rendered and displayed through the page container bound to the target page.

[0044] The above-mentioned page switching method, device, terminal and storage medium include at least one of the following beneficial technical effects:

[0045] 1. A user's sliding operation on the terminal screen can trigger a sliding event and be detected by the current page container, and the current page container can send the sliding parameters corresponding to the sliding operation to the Tab container, so that the Tab container can further determine the validity of the sliding event. After the Tab container determines the sliding event triggered by the user, the Tab container determines the target page to which the user wants to switch based on the sliding direction and / or sliding distance, and the Tab container switches the display container from the current page container to the container of the target page to display the target page. Compared with the method in the related art that can only switch pages by clicking on the label in the Tab navigation bar, in the method of the present application, the user can switch to the target page by sliding on the current page. That is, through the method of this embodiment, when the user is using a larger-sized terminal, the user's palm does not need to move a large distance to the Tab navigation bar to switch pages, but can control the page switching by sliding on the current screen, thereby improving the user's efficiency in switching pages and enhancing the user experience.

[0046] 2. After determining the sliding direction, the user's desired page switching order can be determined. Based on the switching order and the order of the current page within the hierarchy, one of the pages before or after the current page is determined as the target page. In other words, the sliding distance is used solely as a criterion for determining the validity of the sliding event; the sliding direction determines the target page as one of the pages adjacent to the current page. This effectively reduces the risk of users accidentally switching pages through sliding, thereby reducing the chance of users switching multiple pages due to sliding.

[0047] 3. A preview sheet is displayed within the area of ​​the current page triggered by the user's swipe action, indicating how many pages can be switched to in the current swipe direction. In the swipe preview sheet, the page label corresponding to the user's swipe distance is marked, making it easier for users to see the target page that can be switched to within the current swipe distance. This provides a reference for users switching between multiple pages, thereby improving the convenience and accuracy of users switching between multiple pages and reducing the chance of accidental switching. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the following briefly introduces the drawings required for use in the embodiments or related technical descriptions. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0049] Figure 1 A diagram illustrating an application environment of a page switching method in one embodiment;

[0050] Figure 2 1 is a flow chart of a page switching method according to an embodiment;

[0051] Figure 3 A schematic diagram of candidate areas and special areas on a page in one embodiment;

[0052] Figure 4 A flowchart of steps for obtaining sliding parameters in one embodiment;

[0053] Figure 5 A schematic diagram illustrating a scale line in one embodiment;

[0054] Figure 6 A flowchart illustrating steps for determining a target page in one embodiment;

[0055] Figure 7 A flowchart illustrating steps for determining a switching animation in one embodiment;

[0056] Figure 8 FIG1 is a flow chart of updating a label in one embodiment;

[0057] Figure 9 A logical diagram of the implementation principle of a page switching method in another embodiment;

[0058] Figure 10 is a structural block diagram of a page switching device in one embodiment;

[0059] Figure 11 FIG. 4 is a diagram showing the internal structure of a terminal in an embodiment. DETAILED DESCRIPTION

[0060] In order to make the purpose, technical solutions and advantages of this application more clear, the following further describes this application in detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain this application and are not intended to limit this application.

[0061] The page switching method provided in the embodiment of the present application can be applied to Figure 1In the application environment of the terminal shown, a Tab container and multiple page containers are configured in the terminal. The Tab container is used to control the switching between page containers. The Tab container controls which page container is switched to the display container, and which page is the page for display. The page container then starts rendering the content in the page for display. The terminal can be, but is not limited to, various personal computers, laptops, smart phones, tablets, IoT devices, and portable wearable devices. IoT devices can be smart speakers, smart TVs, smart air conditioners, smart car-mounted devices, etc. Portable wearable devices can be smart watches, smart bracelets, head-mounted devices, etc.

[0062] In an exemplary embodiment, Figure 2 As shown, a page switching method is provided, which is applied to Figure 1 The following steps are taken as an example:

[0063] Step 10: Upon receiving the sliding parameters sent by the display container, determine whether the corresponding sliding event is valid based on the sliding parameters. The sliding parameters are sent by the display container based on the detected sliding event. The sliding parameters include the sliding direction and sliding distance corresponding to the sliding event. The display container is the page container bound to the current page, and the current page is the page currently displayed on the terminal.

[0064] For the embodiment of the present application, a Tab container and multiple page containers are configured in the terminal, and the page container is used to render and display the bound pages. In addition, a Pan event is added to the Tab container and set as a strong reference; wherein the Pan event is a gesture operation event, and Pan is the abbreviation of the sliding gesture object; the Pan event represents the user using a finger to slide / drag in a specified area; the strong reference is to store the Pan object in the system memory to ensure that the Pan event is unique and to achieve unified processing. When the user slides the display area of ​​the terminal, the current page container being used for display can monitor the occurrence of the Pan event (sliding event); a notification of the Pan event of the Tab container is added in advance to each page container, so that the Tab container can receive the notification of the Pan time sent by the current page container. The notification of the Pan event of the Tab container by the current page container includes the sliding parameters corresponding to the sliding event, that is, the sliding parameters at least include the sliding direction and sliding distance corresponding to the user's sliding operation.

[0065] For the embodiment of the present application, since the user's sliding operation is represented by sliding parameters, in order to reduce erroneous operations caused by the user's accidental touching of the terminal screen, the embodiment of the present application determines whether the sliding event triggered by the user's sliding operation is valid through set verification rules; if the sliding parameters meet the verification rules, the sliding event is determined to be valid; if the sliding parameters do not meet the verification rules, the sliding event is determined to be invalid.

[0066] Where the sliding parameters include sliding direction and sliding distance, the validation rules may include validation conditions for the sliding direction and / or the sliding distance. Where the sliding parameters also include other parameters, the validation rules may also include validation conditions for other parameters. For example, where the sliding parameters also include the sliding area (the area on the screen) corresponding to the user-triggered sliding operation, the validation rules may also include validation conditions for the sliding area.

[0067] Step 20: When it is determined that the sliding event is valid, determine the target page based on at least one parameter among the sliding parameters.

[0068] For the embodiments of the present application, in one possible implementation, the user's sliding operation can only switch between single pages, that is, the user can only switch to one of the pages adjacent to the current page; that is, the relationship between the sliding direction and the switching order can be pre-set, and then the switching order can be determined based on the sliding direction, and then the target page can be determined based on the sliding order from the sequential relationship between the pages of the level where the current page is located. For example, in one example, the Tab bar is set to the bottom of the display area of ​​the terminal screen, the switching method between pages is left and right switching, and it is set that the user swipes to the right to switch to the page on the left, and the user swipes to the left to switch to the page on the left; the sequence number of the current page is set to 3, and the user swipes to the right, indicating that the page with sequence number 2 is the target page.

[0069] In another possible implementation, the user's operation can also achieve cross-page switching, that is, the user can switch to any page in the hierarchy of the current page; that is, the sliding direction is used as a condition for filtering the pages to be selected, and then the labels of the pages to be selected are displayed to the user, and a corresponding sliding distance is set for each page to be selected, and the corresponding target page is determined according to the user's sliding distance. In one example, the label of the current page is 2, and the labels of the pages to be selected based on the user's sliding direction are 3, 4, and 5 respectively; the sliding distance is set to 10 for the page with label 3, 30 for the page with label 4, and 40 for the page with label 5; when the sliding parameter corresponding to the user's sliding operation is 40, the page with label 5 is determined to be the target page.

[0070] Step 30: Switch the display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page.

[0071] For the embodiment of the present application, the Tab container controls which page container switches to the display container, and which page is the page for display. The Tab container is also used to display the label corresponding to the page, that is, the Tab container stores the label corresponding to each page. When the Tab container switches a page container to a display container, it will also switch to the label corresponding to the page or update the status of the label corresponding to the page, so that the label of the page matches the status of the page for display. How the Tab container implements the process of switching the label of the target page or updating the status of the label of the target page will be introduced in more detail in the subsequent embodiments, and will not be elaborated on here.

[0072] In the above-mentioned page switching method, the user's sliding operation on the terminal screen can trigger a sliding event and be monitored by the current page container, and the current page container can send the sliding parameters corresponding to the sliding operation to the Tab container, so as to further enable the Tab container to judge the validity of the sliding event. The Tab container determines the sliding event triggered by the user, and the Tab container determines the target page to which the user wants to switch based on the sliding direction and / or sliding distance, and the Tab container switches the display container from the current page container to the container of the target page to display the target page; compared with the method in the related art that can only switch pages by clicking on the label in the Tab navigation bar, in the method of the present application, the user can switch to the target page by sliding on the current page; that is, through the method of this embodiment, when the user is using a larger-sized terminal, the user's palm does not need to move a large distance to the Tab navigation bar to switch pages, but can control the page switching by sliding on the current screen, thereby improving the user's efficiency in switching pages and enhancing the user's usage experience.

[0073] Furthermore, embodiments of the present application provide a detailed explanation of the process by which the current page container monitors and obtains the sliding parameters of a sliding event, and the process by which the current page container sends the sliding parameters to the Tab container. The sliding parameters are sent to the Tab container when the current page container monitors a first-class sliding event triggered by a user. The first-class sliding event is a sliding event triggered by a sliding operation within a candidate area of ​​the current page. Each page has at least one candidate area, which is used to indicate that the user can switch pages by sliding.

[0074] Specifically, the directions of sliding are usually divided into forward and backward sliding and left and right sliding. In the embodiments of the present application, it is necessary to set the effective sliding direction, and the effective sliding direction is determined based on the display position of the Tab navigation bar on the terminal screen. When the display position of the Tab navigation bar is at the top or bottom of the terminal screen, the effective sliding direction is left and right sliding (in this case, the page switches left and right); when the display position of the Tab navigation bar is at the left or right side of the terminal screen, the effective sliding direction is up and down sliding (in this case, the page switches up and down). Furthermore, the effective sliding direction can also be customized by the user, and the specific direction of the effective sliding direction is not specifically limited in the embodiments of the present application.

[0075] Specifically, each page is provided with a corresponding candidate area, and a switch indicator is displayed in the candidate area. The switch indicator is used to prompt the user to perform a swipe operation within the candidate area to switch pages. A swipe event occurs when the display container detects a swipe operation within the candidate area of ​​the current page. In other words, each tab corresponds to a corresponding candidate area in the page, and the locations of the candidate areas in pages corresponding to different tabs may be the same or different. This is because a page may also have a built-in special area that allows content switching via swiping. Special areas can be sub-areas or embedded areas within the current page, but not all pages have special areas. The current page container can detect swipe events triggered by a user swiping on the terminal screen. User-triggered swipe events can be divided into at least first and second categories. When the current page container detects a user swiping operation within the candidate area, it determines that a first-category swipe event has been triggered and notifies the tab container of the swipe parameters of the first-category swipe event. When the current page container detects a user swiping operation within the special area, it determines that a second-category swipe event has been triggered. The current page container may or may not notify the tab container of the swipe parameters of the second-category swipe event.

[0076] In an example, in the current page, the distribution of candidate areas and special areas is as follows: Figure 3 Shown: In Figure 3 On the current page, special area A can simultaneously display thumbnails A2, A3, and A4. Users can swipe left or right within A to switch between thumbnails A1, A5, A6, and so on (the current page doesn't switch during this process; only the thumbnails displayed within special area A switch). A swipe within area A is a second-type swipe event. Candidate area B is used to prompt users to swipe within this area to switch pages. Therefore, a swipe within area B triggers a first-type swipe event.

[0077] It should be noted that since the current mainstream operation method in the mid-range is to return to the previous level page through sliding on the side, in order to avoid the user switching pages due to sliding on the side, in the embodiment of the present application, the candidate area is set to not overlap with any side of the display area of ​​the terminal screen; that is, in the scheme of this embodiment, the user cannot switch between the pages of the level where the current page is located by sliding on the side (edge ​​of the screen).

[0078] Further, refer to Figure 4 When obtaining the sliding parameters of the sliding event, the display container may specifically include steps 01 and 02, wherein:

[0079] Step 01: When the current page container obtains the sliding initial point of the sliding event, it constructs an identification scale line along the preset direction with the sliding initial point as the origin;

[0080] Step 02: Monitor the change of the sliding position in the sliding event to obtain the sliding end point of the sliding event, determine the distance between the sliding end point and the sliding starting point on the identification scale line as the sliding distance, and determine the direction from the sliding starting point to the sliding end point as the sliding direction.

[0081] In the embodiment of the present application, valid sliding directions are divided into valid positive directions and valid negative directions. In a sliding process, the distance slid in the valid positive direction is a positive value, and the distance slid in the valid negative direction is a negative value. Through the design of this solution, even if the user first swipes in the valid positive direction and then swipes in the valid negative direction during the sliding process, the actual sliding distance of the user can be determined more accurately, thereby better identifying the user's true intention.

[0082] In one example of an embodiment of the present application, a Gesture Recognizer processes a Pan event or a similar mechanism to detect and respond to a user's sliding / drag operation. When the gesture of the sliding operation triggered by the user changes, the gesture recognizer in the current page container monitors the direction of the gesture sliding and sets TranslationX to negative for left sliding and positive for right sliding to prevent the problem of sliding left and then sliding right.

[0083] like Figure 5 As shown, at the start of a sliding operation, the sliding initial point is obtained. Then, a scale line is established along the effective sliding direction, starting from the sliding initial point as the origin. The scale line is determined based on the screen size of the terminal or the pixels of the corresponding display area of ​​the terminal. The sliding end point is further obtained, and the sliding direction and distance are determined based on the orthographic projection point of the sliding end point on the scale line and the origin.

[0084] The above content is the process of the current page container monitoring and obtaining the sliding parameters of the sliding event, and the process of the current page container sending the sliding parameters to the Tab container.

[0085] In one embodiment, in step 10, the Tab container may specifically use at least one of the first and second methods to determine whether the sliding event is valid.

[0086] Method 1: Determine whether a sliding event is valid based on the relationship between the sliding distance and the distance threshold.

[0087] Method 2: Determine whether the sliding event is valid based on the switching order corresponding to the sliding direction and the order relationship between the pages in the hierarchy where the current page is located.

[0088] In Method 1, the distance threshold can be pre-set or determined based on the size of the current terminal device's display screen. For example, the distance threshold can be set to 300 pixels, and the sliding distance can be set to 20% of the current screen width. This application does not specify the specific value of the distance threshold, as long as it can reduce the probability of page switching due to user accidental touch operations (short-distance sliding).

[0089] In one possible implementation, the validity of the sliding event is determined only by comparing the sliding distance and the distance threshold in method one. That is, when the sliding distance is greater than or equal to the distance threshold, the sliding event is determined to be valid; when the sliding distance is less than the distance threshold, the sliding event is determined to be invalid.

[0090] In another possible implementation method, the validity of the sliding event is judged by both method one and method two; that is, when the sliding distance is greater than or equal to the distance threshold, and there is a switchable page along the switching order of the current page, the sliding event is determined to be valid; when the sliding distance is less than the distance threshold, and / or there is no switchable page along the switching order of the current page, the sliding event is determined to be invalid.

[0091] Furthermore, in one of the embodiments, in step 20, the target page is determined based on at least one parameter in the sliding parameters, including two achievable methods. The method of determining the target page actually executed by the terminal can be pre-selected by the user; the following content analyzes the two achievable methods of determining the target page respectively.

[0092] In one embodiment, referring to Figure 6 , a first achievable manner of determining a target page may specifically include the first achievable manner including step 2A1 and step 2A2, wherein:

[0093] Step 2A1: Determine the switching order corresponding to the sliding direction;

[0094] Step 2A2: Based on the switching order, determine the target page from the sequential relationship between the pages in the level where the current page is located.

[0095] Specifically, the switching number corresponding to the switching order is fixed at 1, which means that the switching order only indicates the order in which a page is switched. The mapping relationship between the sliding direction and the switching order is pre-set. After determining the sliding direction, the order in which the user wants to switch pages can be determined. Then, based on the switching order and the order of the current page in the hierarchy, one of the pages before and after the current page is determined as the target page the user wants to switch to. In other words, in the first feasible method, the sliding distance is only used as the basis for judging the validity of the sliding event. The sliding direction determines that the target page is one of the pages adjacent to the current page. This can effectively reduce the user's erroneous operation when switching pages, thereby reducing the probability of the user's sliding operation causing the switching of multiple pages.

[0096] In one embodiment, referring to Figure 6 The second achievable method for determining the target page may specifically include the first achievable method including step 2B1 and step 2B2, wherein:

[0097] Step 2B1: receiving a label preview table sent by the display container;

[0098] Step 2B2: Based on the correspondence between the preset distance and each page label, determine the target page corresponding to the sliding distance from the label preview table.

[0099] The label preview table is rendered and generated by the display container when a sliding event is detected. The label preview table is displayed in the trigger area of ​​the sliding event. The label preview table includes the page labels of each to-be-selected page, and each to-be-selected page is determined based on the sliding direction and the sequential relationship between the pages in the level where the current page is located. Furthermore, since the label preview representation is generated based on the sliding direction and the sequential relationship between the pages in the level where the current page is located, the label preview table can be generated by the display container and sent to the Tab container, or it can be generated by the Tab container. Moreover, the label preview table has an expiration date, and the expiration date of the label preview table is the life cycle of the sliding event, that is, the label preview table is generated in response to the establishment of the sliding event, and the label preview table is deleted in response to the end of the sliding event, thereby reducing the cache occupancy in the Tab container and making the Tab container respond more quickly to user operations.

[0100] The preview table is displayed in the area of ​​the current page triggered by the user's sliding operation to prompt the user how many pages can be switched in the current sliding direction; in the sliding preview table, the page label corresponding to the user's sliding distance will be set to a marked state, making it easier for the user to view the target page that can be switched to by the current sliding distance, providing a reference for the user to switch between multiple pages, thereby improving the convenience and accuracy of the user's switching between multiple pages and reducing the chance of incorrect switching.

[0101] Specifically, the relationship between distance and number of switches is pre-set, and the mapping relationship between sliding direction and switching order is pre-set; the number of switches is positively correlated with the sliding distance in the sliding parameter. Based on the preset correspondence between distance and number, the number of switches corresponding to the sliding distance is determined, and the switching order corresponding to the sliding direction is determined. Then, based on the switching order and number of switches, the target page is determined from the sequential relationship between the pages in the layer where the current page is located. In other words, this method can achieve leapfrogging switches across multiple pages, thereby further improving the efficiency of user page switching.

[0102] Furthermore, in one embodiment, referring to Figure 7 In step 30, the method may specifically include: calling the switching animation and displaying the switching animation during the switching process of the display container. The method of calling the switching animation may specifically include steps 31 and 32, wherein:

[0103] Step 31: determining at least one of the sliding direction, the current page, and the target page as a target switching condition;

[0104] Step 32: Based on the corresponding relationship between the switching condition and the switching animation, determine the switching animation corresponding to the target switching condition.

[0105] Specifically, the switching animation is a visual element object when switching from one page to another page for display. In one possible implementation, a fixed switching animation can be set, and the fixed switching animation is directly called each time the page is switched.

[0106] In another possible implementation, a corresponding cut-in animation may be set for each page, and when switching to a target page, the cut-in animation corresponding to the target page is called as the switching animation for switching.

[0107] In another possible implementation, a corresponding cut-out animation may be set for each page, and when switching to a target page, the cut-out animation corresponding to the current page is called as the cut-in animation for switching.

[0108] In another possible implementation method, a switching animation can be set for each switching direction. For example, switching to the left is the first switching animation, and switching to the right is the second switching animation. When the switching direction is determined based on the sliding direction, the corresponding switching animation (first switching animation / second switching animation) is called based on the switching direction for switching.

[0109] In another possible implementation, a corresponding switching animation can be set for each content type; for example, a first switching animation is set for text content, and a second switching animation is set for video content. When switching to the target page, the type of content to be displayed on the target page is obtained, and the corresponding switching animation is called based on the type of content to be displayed to switch. The specific method for determining the switching animation is not specifically limited in the embodiments of this application.

[0110] Further, in step 03, referring to Figure 8 When a tab container switches a page container to a display container, the process of updating the page label may specifically include steps 033 and 034, wherein:

[0111] Step 033: upon receiving a cut-out notification sent by the container bound to the current page, based on the cut-out notification, changing the label corresponding to the current page to a first state, wherein the first state representation is not displayed;

[0112] Step 034: When receiving a cut-in notification sent by the container bound to the target page, based on the cut-in notification, update the tag corresponding to the target page to a second state, where the second state indicates that the tag is to be displayed or is being displayed.

[0113] Specifically, in an embodiment of the present application, each page container is configured with a ViewWillAppear function and a ViewWillDisappear function; wherein, the ViewWillAppear function is called when the view is about to be cut in, and the ViewWillDisappear function is called when the view is about to be cut out. When the current page is about to be cut out, the current page container calls the ViewWillDisappear function to send a cut-out notification to the Tab container; when the target page is about to be cut in, the target page container calls the ViewWillAppear function to send a cut-in notification to the Tab container; the Tab container receives the cut-out notification and the cut-in notification, and when the current page container switches to the target page container, the Tab container updates the state of the current page from the second state to the first state, and updates the state of the target page to the second state.

[0114] In a more specific embodiment, the present application provides a page switching method, such as Figure 9 As shown:

[0115] First, prepare a custom sliding animation and customize the delegate (the correspondence between sliding gestures / operations and sliding events). Override the Interaction Controller For Animation Controller (interaction controller for animation controller) and Animation Controller For Transition From View Controller (animation controller for transition from view controller) delegate methods to handle switching animations and sliding events.

[0116] Add scroll notifications to the Tab container (pass sliding parameters through Type), and strongly reference the Pan event (store the Pan object in the system memory to ensure unique Pan events and unified processing). Pan events usually include Panstart state, Panmove state, and Panend state, where:

[0117] Panstart state (drag begins): This event is triggered when the user's finger touches the screen and begins to move. Panmove state (drag progress): This event is triggered continuously while the user's finger continues to move. This allows developers to track the user's drag trajectory and update the position or state of UI elements accordingly. Panend state (drag ends): This event is triggered when the user's finger leaves the screen, marking the completion of the drag operation.

[0118] The notification sent from the native container (the current page container) to the tab container carries a Type (slide parameter). The tab container receives the Type in the notification and distinguishes whether it is an addition gesture event (valid slide event) or a cancellation gesture event (invalid slide event). In the Pan event, it handles the slide point and processes the slide point and delegate event (determining the target page to switch to) based on the State enumeration of the gesture object created by the UI Pan Gesture Recognizer.

[0119] When switching containers (pages), a notification with Type=AddPan is sent in ViewWillAppear of the native container, indicating an add gesture event. A notification with Type=RemovePan is sent in ViewWillDisAppear of the native container, indicating a remove gesture event. This is used to handle sliding from the controller.

[0120] In related art, the system (the terminal's operating system) defaults to a swipe gesture in the Tabbar (navigation component) within a Tab container. This conflicts with the Pan gesture newly added to the Tab container in this application. This causes the Tabbar to swipe and misalign with the page container, resulting in a white screen. In this embodiment of the present application, to resolve the white screen issue during page switching, the Tabbar within the Tab container is customized. Specifically, the system-implemented swipe gesture is rewritten to distinguish between the system swipe and the newly added Pan event swipe. This enables the implementation of the Pan gesture's swipe logic, resolving the white screen issue during page switching.

[0121] The various professional terms used in the above embodiments are further explained:

[0122] Pan: Short name for sliding gesture object.

[0123] UI Pan Gesture Recognizer: Slide gesture class, used to create slide gesture objects.

[0124] Tab: represents the container of the bottom navigation, also referred to as Tab container.

[0125] Tabbar: represents the navigation component.

[0126] Interaction Controller For Animation Controller: Interaction controller function for animation controller.

[0127] Animation Controller For Transition From View Controller: Animation controller function for transitioning from view controller.

[0128] Type: The defined transmission parameter name.

[0129] AddPan / RemovePan: Transmits the value defined by the parameter (indicating the validity of the sliding event).

[0130] UI Gesture Recognizer State Began: The gesture starts sliding and gets the sliding point (sliding starting point).

[0131] UI GestureRecognizer State Changed: When the sliding gesture changes, monitor the sliding direction, setting the TranslationX of the left sliding to negative and the right sliding to positive to prevent the problem of sliding left and then right.

[0132] Using the page switching method provided in the embodiments of this application, users can switch pages (tabs) on the home page not only by clicking the corresponding page tab / button in the Tab navigation bar, but also by sliding within the current page. Furthermore, in the page switching method of the embodiments of this application, a native container (the current page container) is bound to a side-swipe event and associated with the switching of tabs within the tab container. The tab container and the native container (the current page container) mutually monitor switching events to implement page switching via sliding operations, thereby enhancing the user experience when using the app homepage and allowing users to switch pages at will.

[0133] Furthermore, in a terminal that applies the page switching method provided in the embodiment of the present application, or in a terminal that has installed a program product corresponding to the page switching method provided in the embodiment of the present application, the function corresponding to the page switching method can be set to always be turned on, or it can be set to be executed after the user triggers and the instruction is executed.

[0134] In another possible implementation method, the terminal may also obtain the frequency of the user switching pages in the system page (the terminal's operating system page, or the program product page corresponding to the page switching method provided in the embodiment of the present application) within a historical period, where the frequency is the number of pages switched in a unit period; and then, when the frequency is greater than a set threshold, the function corresponding to the page switching method provided in the embodiment of the present application is automatically enabled.

[0135] In another possible implementation, when the terminal runs the program product corresponding to the page switching method provided in the embodiment of the present application, it obtains the size parameters of the terminal screen, and when the size parameters of the terminal screen are greater than a preset specification, it automatically enables the function corresponding to the page switching method provided in the embodiment of the present application. The specific method for enabling the function corresponding to the page switching method provided in the embodiment of the present application is not specifically limited in the embodiment of the present application.

[0136] It should be understood that, although the steps in the flowcharts of the above embodiments are shown in sequence as indicated by the arrows, these steps are not necessarily performed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and these steps can be performed in other orders. Moreover, at least a portion of the steps in the flowcharts of the above embodiments may include multiple steps or multiple stages, and these steps or stages are not necessarily performed at the same time, but can be performed at different times. The execution order of these steps or stages is not necessarily to be performed in sequence, but can be performed in turn or alternately with other steps or at least a portion of steps or stages in other steps.

[0137] Based on the same inventive concept, the present application also provides a page switching device for implementing the aforementioned page switching method. The solution provided by this device is similar to the solution described in the aforementioned method. Therefore, the specific limitations of one or more of the following embodiments of the page switching device can be found in the above-mentioned limitations of the page switching method and will not be repeated here.

[0138] In an exemplary embodiment, Figure 10 As shown, a page switching device is provided, which includes a validity judgment module 1001, a target page determination module 1002 and a switching module 1003, wherein:

[0139] Validity determination module 1001 is configured to, upon receiving sliding parameters sent by a display container, determine whether a corresponding sliding event is valid based on the sliding parameters. The sliding parameters are sent by the display container based on a detected sliding event and include a sliding direction and sliding distance corresponding to the sliding event. The display container is the page container bound to the current page, and the current page is the page currently displayed on the terminal.

[0140] A target page determining module 1002 is configured to determine a target page based on at least one parameter among the sliding parameters when determining that the sliding event is valid;

[0141] The switching module 1003 is configured to switch the display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page.

[0142] In the above-mentioned page switching device, the user's sliding operation on the terminal screen can trigger a sliding event and be monitored by the current page container, and the current page container can send the sliding parameters corresponding to the sliding operation to the Tab container, so as to further enable the Tab container to judge the validity of the sliding event. The Tab container determines the sliding event triggered by the user, and the Tab container determines the target page to which the user wants to switch based on the sliding direction and / or sliding distance, and the Tab container switches the display container from the current page container to the container of the target page to display the target page; compared with the related art method of only being able to switch pages by clicking on the label in the Tab navigation bar, in the method of the present application, the user can switch to the target page by sliding on the current page; that is, through the method of this embodiment, when the user is using a larger-sized terminal, the user's palm does not need to move a large distance to the Tab navigation bar to switch pages, but can control the page switching by sliding on the current screen, thereby improving the user's efficiency in switching pages and enhancing the user's usage experience.

[0143] In an exemplary embodiment, the validity determination module 1001 is specifically configured to:

[0144] Determining whether the sliding event is valid based on the relationship between the sliding distance and the distance threshold; and / or,

[0145] Whether the sliding event is valid is determined based on the switching order corresponding to the sliding direction and the sequential relationship between the pages in the hierarchy where the current page is located.

[0146] In one embodiment, the target page determination module 1002 is specifically configured to:

[0147] Determine the switching order corresponding to the sliding direction;

[0148] Based on the switching order, the target page is determined from the sequential relationship between the pages in the hierarchy where the current page is located.

[0149] In one embodiment, the target page determination module 1002 is specifically configured to:

[0150] Receive a tab preview table sent by the display container; the tab preview table is rendered and generated by the display container when a slide event is detected, and is displayed within the trigger area of ​​the slide event; the tab preview table includes page labels for each page to be selected, where each page to be selected is determined based on the slide direction and the order of pages in the hierarchy of the current page;

[0151] Based on the correspondence between the preset distance and each page label, the target page corresponding to the sliding distance is determined from the label preview table.

[0152] In one embodiment, the device further includes a display module, which is further configured to:

[0153] determining at least one of a sliding direction, a current page, and a target page as a target switching condition;

[0154] Based on the corresponding relationship between the switching condition and the switching animation, determining the switching animation corresponding to the target switching condition;

[0155] Call the switching animation and display it during the switching process of the display container.

[0156] In one embodiment, the tab container stores the tabs corresponding to the pages, and the switching module 1003 is further configured to:

[0157] When receiving a cut-out notification sent by a container bound to the current page, based on the cut-out notification, changing the label corresponding to the current page to a first state, where the first state representation is not displayed;

[0158] When receiving a cut-in notification sent by a container bound to a target page, based on the cut-in notification, the tag corresponding to the target page is updated to a second state, where the second state represents waiting to be displayed or being displayed.

[0159] In one embodiment, each page is provided with a corresponding candidate area, and a switching mark is displayed in the candidate area. The switching mark is used to prompt the user to perform a sliding operation in the candidate area to switch pages. The sliding event includes the display container listening to the sliding operation generated in the candidate area of ​​the current page.

[0160] Each module in the above-mentioned page switching device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of the processor in the terminal in hardware form, or can be stored in the memory in the terminal in software form, so that the processor can call and execute the corresponding operations of each module.

[0161] In an exemplary embodiment, a terminal is provided, the internal structure of which can be as follows: Figure 11 As shown. The terminal includes a processor, memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, memory, and input / output interface are connected via a system bus, and the communication interface, display unit, and input device are connected to the system bus via the input / output interface. The processor of the terminal is used to provide computing and control capabilities. The memory of the terminal includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The input / output interface of the terminal is used to exchange information between the processor and external devices. The communication interface of the terminal is used to communicate with external terminals via wired or wireless means, and the wireless means can be implemented via Wi-Fi, mobile cellular networks, NFC (near field communication), or other technologies. When executed by the processor, the computer program implements a page switching method as described in the above-mentioned method embodiment. The display unit of the terminal is used to form a visually visible image and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the terminal can be a touch layer covering the display screen, or a key, trackball or touchpad provided on the terminal housing, or an external keyboard, touchpad or mouse.

[0162] Those skilled in the art will understand that Figure 11 The structure shown in the figure is only a block diagram of a part of the structure related to the scheme of the present application, and does not constitute a limitation on the terminal to which the scheme of the present application is applied. The specific terminal may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.

[0163] In an exemplary embodiment, a terminal is provided, including a memory and a processor. The memory stores a computer program, and the processor implements a page switching method in the above method embodiment when executing the computer program.

[0164] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, a page switching method as described in the above method embodiment is implemented.

[0165] In one embodiment, a computer program product is provided, including a computer program. When the computer program is executed by a processor, the computer program implements a page switching method in the above method embodiment.

[0166] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0167] Those skilled in the art will appreciate that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the above-mentioned embodiments. In particular, any reference to memory, database, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The databases involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, distributed databases based on blockchains. The processors involved in the various embodiments provided herein may be, but are not limited to, general-purpose processors, central processing units (CPUs), graphics processing units (GPUs), digital signal processors (DSPs), programmable logic devices (PLDs), data processing logic devices based on quantum computing, and the like.

[0168] The technical features of the above embodiments can be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0169] The above embodiments merely illustrate several implementation methods of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that a person skilled in the art may make various modifications and improvements without departing from the spirit of the present invention, all of which fall within the scope of protection of the present application. Therefore, the scope of protection of the present application shall be determined by the appended claims.

Claims

1. A page switching method, characterized in that: The terminal is configured with a Tab container and multiple page containers, and the page container is used to render and display bound pages. The method is applied to the Tab container in the terminal, and the method includes: Upon receiving a sliding parameter sent by a display container, determining whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on the detected sliding event, and the sliding parameter includes a sliding direction and a sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal; When it is determined that the sliding event is valid, determining a target page based on at least one parameter among the sliding parameters; Switching the display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page; Each of the pages is provided with a corresponding candidate area, wherein a switching mark is displayed in the candidate area, and the switching mark is used to prompt the user to perform a sliding operation in the candidate area to switch pages, and the sliding event includes the display container monitoring a sliding operation in the candidate area of ​​the current page; The special area is a sub-area or an embedded area in a page. A sliding operation on the special area can switch the thumbnail content displayed in the special area. The candidate area in each page does not overlap with the special area.

2. The method according to claim 1, characterized in that The determining whether the sliding event is valid based on the sliding parameter includes: determining whether the sliding event is valid based on a relationship between the sliding distance and a distance threshold; and / or, Whether the sliding event is valid is determined based on the switching order corresponding to the sliding direction and the sequential relationship between the pages in the level where the current page is located.

3. The method according to claim 1, characterized in that The determining of the target page based on at least one of the sliding parameters includes: Determining a switching order corresponding to the sliding direction; Based on the switching sequence, a target page is determined from the sequential relationship between pages in the level where the current page is located.

4. The method according to claim 1, wherein The determining of the target page based on at least one of the sliding parameters includes: Receiving a tab preview table sent by the display container; wherein the tab preview table is rendered and generated by the display container when a sliding event is detected, and the tab preview table is displayed in the triggering area of ​​the sliding event; the tab preview table includes page labels of each to-be-selected page, wherein each to-be-selected page is determined based on the sliding direction and the order relationship between pages at the level of the current page; Based on the correspondence between the preset distance and each page label, the target page corresponding to the sliding distance is determined from the label preview table.

5. The method according to any one of claims 1 to 4, characterized in that The method further comprises: determining at least one of the sliding direction, the current page, and the target page as a target switching condition; Determining the switching animation corresponding to the target switching condition based on the corresponding relationship between the switching condition and the switching animation; The switching animation is called and displayed during the switching process of the display container.

6. The method according to any one of claims 1 to 4, characterized in that The tab container stores the tabs corresponding to the pages, and the method further includes: When receiving a cut-out notification sent by a container bound to the current page, based on the cut-out notification, changing the label corresponding to the current page to a first state, wherein the first state representation is not displayed; When receiving a cut-in notification sent by the container bound to the target page, based on the cut-in notification, the tag corresponding to the target page is updated to a second state, where the second state represents waiting to be displayed or being displayed.

7. A page switching device, characterized in that: The device includes a validity judgment module, a target page determination module, and a switching module, wherein: a validity determination module, configured to, upon receiving a sliding parameter sent by a display container, determine whether a corresponding sliding event is valid based on the sliding parameter; the sliding parameter is sent by the display container based on a detected sliding event, and the sliding parameter includes a sliding direction and sliding distance corresponding to the sliding event; the display container is a page container bound to a current page, and the current page is a page currently displayed on the terminal; a target page determination module, configured to determine a target page based on the sliding direction and the sequential relationship between pages in the layer where the current page is located when determining that the sliding event is valid; A switching module, configured to switch a display container from the page container bound to the current page to the page container bound to the target page, so as to render and display the target page through the page container bound to the target page; Each of the pages is provided with a corresponding candidate area, wherein a switching mark is displayed in the candidate area, and the switching mark is used to prompt the user to perform a sliding operation in the candidate area to switch pages, and the sliding event includes the display container monitoring a sliding operation in the candidate area of ​​the current page; The special area is a sub-area or an embedded area in a page. A sliding operation on the special area can switch the thumbnail content displayed in the special area. The candidate area in each page does not overlap with the special area.

8. The device according to claim 7, characterized in that The validity judgment module is specifically used to: Determining whether the sliding event is valid based on the relationship between the sliding distance and the distance threshold; and / or, Whether the sliding event is valid is determined based on the switching order corresponding to the sliding direction and the sequential relationship between the pages in the hierarchy where the current page is located.

9. A terminal comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images