Interaction method and device for left-right switching of sub-pages and medium

Abstract

The invention relates to the technical field of interactive interfaces, and discloses an interactive method and device for switching left and right sub-pages and a medium, and the method comprises the following steps: configuring a public top view component and a sub-list component of a user interface in a main page, and nesting the sub-list pages in the main page according to the sub-list component; constructing a page structure of the user interface; when a vertical scrolling operation request of a target sub-page is received, binding a common top view component in the page structure with the target sub-page, so that the common top view component and the target sub-page perform common vertical scrolling operation; when a left-right switching operation request is received, the public top view component in the page structure is separated from the target sub-page, so that the target sub-page independently responds to the left-right switching operation request; and when a left-right switching operation completion request of the target sub-page is received, adding the public top view component to the page head of the separated target sub-page. According to the method and the device, the fluency during page switching interaction can be improved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular to an interactive method, device and medium for switching sub-pages left and right. Background Art

[0002] With the popularity of smart phones and tablets, users' demand for mobile experience is increasing. Page design needs to take into account various gestures, animation effects and navigation controls to provide a more natural and smooth user experience. However, in order to improve the smoothness of page switching, the page scrolling control logic needs to be simplified to achieve smooth page switching.

[0003] In the existing page switching technology, the information flow label is associated with the sub-view control by nesting the layout control in the main view control, and the page sliding is controlled by flexibly switching the main view control and the sub-view control in different sliding states. In actual applications, when dealing with the scrolling conflict between the main view and the sub-view, additional logic is required to coordinate the relationship between the two, and when the user switches pages, the scrolling may not be smooth, which reduces the smoothness of the page switching interaction. Summary of the invention

[0004] The present invention provides an interactive method, device and medium for switching sub-pages left and right, the main purpose of which is to solve the problem of low accuracy when recommending products.

[0005] To achieve the above object, the present invention provides an interactive method for switching sub-pages left and right, comprising:

[0006] Configuring a common top view component and a sub-list component of a user interface in a pre-acquired main page, and nesting a sub-list page in the main page according to the sub-list component;

[0007] Arrange the common top view component on the upper layer of the position of the sub-list component, and construct a page structure of the user interface according to the arranged common top view component, the sub-list component and the position of the sub-list page;

[0008] When a vertical scrolling operation request of a target subpage in the sublist page is received, binding the common top view component in the page structure with the target subpage, so that the common top view component and the target subpage perform a common vertical scrolling operation to obtain a vertical page interactive view;

[0009] When a left-right switching operation request of the target sub-page is received, the common top view component in the page structure is separated from the target sub-page in the sub-list page, so that the target sub-page responds to the left-right switching operation request alone;

[0010] When a request for completing the left-right switching operation of the target sub-page is received, the public top view component is added to the page header of the target sub-page separated from the public top view component to obtain the left-right page interactive view corresponding to the target sub-list.

[0011] Optionally, configuring a common top view component and a sub-list component of the user interface in the pre-acquired main page includes:

[0012] A top core business view area and a floating category controller area of ​​the user interface are configured at the top of the main page;

[0013] Configure a header content placeholder component according to the top core business view area, and configure a sublist label component according to the floating category controller area;

[0014] A common top view component of configuring a user interface according to the header content placeholder component and the sub-list label component;

[0015] Using the number of labels of the sublist label component as the number of components of the sublist component, and performing interactive processing between the sublist label component and the sublist component;

[0016] The sub-list component after the interaction processing is configured in the main page.

[0017] Optionally, the step of nesting the pre-acquired sub-list page in the main page according to the sub-list component includes:

[0018] Page mapping the sublist component with the sublist page;

[0019] Constructing jump links between the sub-list tag components mapped to the pages and the sub-list pages one by one, and extracting link identifiers of the sub-list pages corresponding to the jump links;

[0020] The sub-list page is nested into the main page according to the link identifier.

[0021] Optionally, configuring the public top view component at an upper layer of the position of the sub-list component includes:

[0022] Identify the page component position corresponding to the sublist component;

[0023] extracting the position of the common top view component;

[0024] The position of the public top view component is added above the position of the page component.

[0025] Optionally, constructing a page structure of a user interface according to the configured common top view component, the sub-list component and the position of the sub-list page includes:

[0026] Configuring the position of the sub-list page at the bottom of the main page;

[0027] Configuring the list component position of the sub-list component in the floating category controller area;

[0028] The sub-list page at the bottom of the page, the configured common top view component and the sub-list component group in the floating category controller area are constructed into a page structure of the user interface.

[0029] Optionally, the binding of the common top view component in the page structure with the target sub-page so that the common top view component and the target sub-page perform a common vertical scrolling operation to obtain a vertical page interactive view includes:

[0030] When the target subpage is scrolled vertically, the common top view component is bound to the page header of the target subpage, and the bound common top view component and the target subpage are suspended for display;

[0031] Vertically scrolling the target sub-page after floating display and the common top view component together according to a preset page scrolling starting point;

[0032] A vertical page interactive view is generated according to the page scrolling stop point of the target sub-page after the common vertical scrolling operation.

[0033] Optionally, the step of separating the common top view component in the page structure from a target sub-page in the sub-list page includes:

[0034] When the target sub-page is switched left or right, it is determined whether the common top view component in the page structure has exceeded the floating category controller area in the page structure;

[0035] When the public top view component does not exceed the floating category controller area in the page structure, the public top view component is added to the upper layer of the position of the sub-list component in the page structure, and the public top view component added to the upper layer of the sub-list component is separated from the target sub-page;

[0036] When the common top view component has exceeded the floating category controller area in the page structure, it is determined that the common top view component has left the target sub-page.

[0037] Optionally, the adding the common top view component to the page header of the target subpage separated from the common top view component to obtain the left and right page interactive views corresponding to the target subpage includes:

[0038] When the left-right switching operation of the target subpage is completed and the public top view component has exceeded the floating category controller area in the page structure, displaying the public top view component in the page header of the target subpage;

[0039] When the left-right switching operation of the target subpage is completed and the common top view component does not exceed the floating category controller area in the page structure, the common top view component is added to the upper layer of the list page position corresponding to the target subpage in the page structure;

[0040] The target subpage after adding a common top view component to the page header of the target subpage is determined as the left-right page interactive view.

[0041] In order to solve the above problem, the present invention further provides an electronic device, the electronic device comprising:

[0042] at least one processor; and,

[0043] a memory communicatively connected to the at least one processor; wherein,

[0044] The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the above-mentioned interactive method for switching sub-pages left and right.

[0045] In order to solve the above problem, the present invention also provides a computer-readable storage medium, which stores at least one computer program. The at least one computer program is executed by a processor in an electronic device to implement the above-mentioned interactive method for switching sub-pages left and right.

[0046] By configuring the page structure, the embodiment of the present invention can design and implement the page layout more flexibly without worrying about the complexity of scrolling control; the vertical scrolling operation always acts on the sub-view, avoiding the scrolling conflict between the main view and the sub-view, and ensuring the consistency of the vertical scrolling operation; when switching left and right, the top view is displayed in suspension, which simplifies the handling of scrolling conflicts during the page switching process; after the left and right switching is completed, the common top view is integrated with the current sub-view, which simplifies the scrolling control logic and improves the smoothness of page switching. Therefore, the interactive method, device and medium for switching sub-pages left and right proposed by the present invention can solve the problem of low smoothness when performing page switching interaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Figure 1 A schematic diagram of a flow chart of an interactive method for switching subpages left and right provided by an embodiment of the present invention;

[0048] Figure 2 A schematic diagram of a page structure of a user interface provided by an embodiment of the present invention;

[0049] Figure 3 A schematic diagram of a process of vertically scrolling a page provided by an embodiment of the present invention;

[0050] Figure 4 A schematic diagram of a flow chart of switching sublists left and right provided by an embodiment of the present invention;

[0051] Figure 5 A schematic diagram of the structure of an electronic device for implementing the interactive method for switching sub-pages left and right provided by an embodiment of the present invention.

[0052] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0053] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0054] The embodiment of the present application provides an interactive method for switching subpages left and right. The execution subject of the interactive method for switching subpages left and right includes but is not limited to at least one of the electronic devices that can be configured to execute the method provided by the embodiment of the present application, such as a server, a terminal, etc. In other words, the interactive method for switching subpages left and right can be executed by software or hardware installed on a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, etc. The server can be an independent server, or it can be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (Content Delivery Network, CDN), and big data and artificial intelligence platforms.

[0055] Reference Figure 1 FIG. 1 is a flow chart of an interactive method for switching between subpages provided by an embodiment of the present invention. In this embodiment, the interactive method for switching between subpages includes:

[0056] S1. Configure a common top view component and a sub-list component of a user interface in a pre-acquired main page, and nest a sub-list page in the main page according to the sub-list component.

[0057] In an embodiment of the present invention, the pre-acquired main page refers to the main page for displaying the list content, and the style and layout of the main page can be controlled by a Slide container. The Slide container refers to a container containing multiple movable or switchable contents, which can be implemented in a left-right switching or sliding browsing scenario, and the common top view component includes a header component and a ceiling component, and the common top view component refers to the common top view of all sub-lists, which is used to display a unified title or navigation information; the sub-list component refers to multiple sub-pages nested below the main page, each sub-page containing different content.

[0058] In the embodiment of the present invention, configuring the common top view component and the sub-list component of the user interface in the pre-acquired main page includes:

[0059] A top core business view area and a floating category controller area of ​​the user interface are configured at the top of the main page;

[0060] Configure a header content placeholder component according to the top core business view area, and configure a sublist label component according to the floating category controller area;

[0061] A common top view component of configuring a user interface according to the header content placeholder component and the sub-list label component;

[0062] Using the number of labels of the sublist label component as the number of components of the sublist component, and performing interactive processing between the sublist label component and the sublist component;

[0063] The sub-list component after the interaction processing is configured in the main page.

[0064] In detail, on the pre-acquired main page, that is, the top of the slider container, the public top view component is divided into a container view of the top core business view area and the floating category controller area. Then, a header content placeholder component is configured in the top core business view area, and a sub-list label component is configured in the floating category controller area. The floating category controller area can absorb the top header component for placing the list label component of the corresponding sub-list. Click the list label component to scroll the slider container to switch to the corresponding sub-list, and merge the header content placeholder component and the sub-list label component into a public top view component, so that the public top view component is configured at the top position of the slider container, and a sub-list corresponding to the number of list label components are placed on the slider container, and the slider container switching is linked to the button click of the list label component, that is, the sub-list label component and the sub-list component are interactively processed, and the first button of the list label component is clicked to switch to sub-list 1, and the slider container contains multiple vertical lists that can be switched left and right, so that the interactively processed sub-list components are configured in the pre-acquired main page.

[0065] Specifically, the public top view component needs to determine the layout and content of the navigation bar, including the logo, navigation links, search box, user information, etc. The sub-list component needs to determine the structure of the list items, including the title, description, action buttons, etc., and create the HTML structure of the top view component, including the navigation bar, search box, user information, etc., and create the HTML structure of the sub-list component, including list items, action buttons, etc., and use CSS to add styles to the top view component and the sub-list component.

[0066] Furthermore, according to the sub-list component, multiple sub-pages can be nested under the pre-acquired main page, and each sub-page contains different content, thereby realizing the switching of lists.

[0067] In an embodiment of the present invention, the pre-acquired sub-list page refers to a page that displays list items and allows users to view detailed information or perform operations. The sub-list page is usually used to display a part of a data set and handle a large amount of content by scrolling. For example, an e-commerce application may have a product list page where users can browse different products and click to view detailed information and purchase options for each product.

[0068] In the embodiment of the present invention, the step of nesting a sub-list page in the main page according to the sub-list component includes:

[0069] Page mapping the sublist component with the sublist page;

[0070] Constructing jump links between the sub-list tag components mapped to the pages and the sub-list pages one by one, and extracting link identifiers of the sub-list pages corresponding to the jump links;

[0071] The sub-list page is nested into the main page according to the link identifier.

[0072] In detail, each sub-list component corresponds to a sub-list page, that is, clicking the button of the sub-list component will jump to the corresponding sub-list page, and for each sub-list page that triggers the jump, it is necessary to configure the jump link corresponding to each sub-list page. The jump link is a specific address locator. Once the button of the sub-list component is triggered, the corresponding sub-list page will be loaded according to the link identifier and embedded in the main list page, so that the sub-list page content can be dynamically loaded and displayed.

[0073] For example, suppose there is an e-commerce application, and the main page displays a list of product categories. When the user clicks on a category, the user will jump to the product list page of that category. In this case, a product list component should be created, which can receive and display the product list of a specific category. On each product category item on the main page, a link or button is set. After clicking, a jump link can be built according to the category ID or name. When the user clicks on a category, the product list page of the corresponding category is loaded and nested in the appropriate position of the main page, so that the user can browse and select products, thereby realizing the combination of the main list page and the sub-list page, so that the user can easily browse and manage multi-level content.

[0074] Furthermore, a page structure can be constructed through the view component position of the common top view component, the list component position of the sub-list component and the page component position of the sub-list page, thereby allowing developers to design and implement page layouts more flexibly without worrying about the complexity of scrolling control.

[0075] S2. Arrange the public top view component on the upper layer of the position of the sub-list component, and construct the page structure of the user interface according to the arranged public top view component, the sub-list component and the position of the sub-list page.

[0076] In the embodiment of the present invention, the page structure refers to the visual and interactive elements of different components, that is, the layout of different components in the page, so that the user can effectively use and understand the content and functions on the page.

[0077] In the embodiment of the present invention, the step of configuring the common top view component at an upper layer of the position of the sublist component includes:

[0078] Identify the page component position corresponding to the sublist component;

[0079] extracting the position of the common top view component;

[0080] The position of the public top view component is added above the position of the page component.

[0081] In detail, a common top view component is added to the current target subpage, and the common top view component is the container view of the top core business view area and the floating category controller area, so that sliding the list up and down is just operating a single list, and there will be no sudden interruption of scrolling. When the user scrolls down, the floating category controller area always remains at the top of the screen as a floating view, which is convenient for users to select different product categories or filtering options at any time without having to scroll to the top of the page. The add view function is a commonly used function in iOS development, which is used to add a view (View) to another view, usually used in a container view, such as adding a button, label or custom view to the screen; the current target subpage is a commonly used control in iOS development, which is used to display a container view of scrolling content. It is part of the UIKit framework and is used to implement the scrolling view function of the user interface; the core business view area displays core business views, such as carousels and featured product displays, and the floating category controller area allows users to browse different product categories. Therefore, the common top view component position is configured at the upper layer of the page position of the current target subpage.

[0082] Furthermore, the page structure of page switching can be configured according to the positions of the common top view component, the sub-list component and the sub-list page, so that left-right switching or up-down switching can be achieved.

[0083] In the embodiment of the present invention, the page structure of the user interface is constructed according to the configured common top view component, the sub-list component and the position of the sub-list page, including:

[0084] Configuring the position of the sub-list page at the bottom of the main page;

[0085] Configuring the list component position of the sub-list component in the floating category controller area;

[0086] The sub-list page at the bottom of the page, the configured common top view component and the sub-list component group in the floating category controller area are constructed into a page structure of the user interface.

[0087] In detail, the page components of the sub-list page are configured at the bottom layer of the main page, that is, the page components of the sub-list page are configured at the bottom of the slider container, and the public top view component is configured at the upper level of the page components of the sub-list page, and the public top view component is divided into a core business view area and a floating category controller area, then the component position of the sub-list component is configured in the floating category controller area, thereby laying out the view component position of the configured public top view component, the list component position of the sub-list component and the page component position of the sub-list page in the slider container to obtain the page structure of the user interface.

[0088] Specifically, Figure 2 As shown, it is a schematic diagram of the page structure of the user interface. The main page is the slider container, and the corresponding number of sub-lists of the list label component are placed on the slider container. The slider switching is linked to the list label component button click. Click to switch list label component 1, switch to sub-list 1, slide the slider left or right to the corresponding sub-list, automatically select the corresponding list label component, and configure the sub-list on the upper layer of the slider container. The sub-list is a slider containing multiple vertical lists that can be switched left and right, and a public top view is configured on the upper level of the sub-list. The public top view includes the header and the ceiling, and the public top view is divided into a container view of the top core business view area and the floating category controller area, where the name of the list label component is tab.

[0089] Furthermore, based on the configured page structure, the current page can be scrolled vertically or switched left and right. During the operation of the current page, the components in the page structure will change position, thereby simplifying the handling of scrolling conflicts during page switching.

[0090] S3. When a vertical scrolling operation request of a target sub-page is received, the common top view component in the page structure is bound to the target sub-page, so that the common top view component and the target sub-page perform a common vertical scrolling operation to obtain a vertical page interactive view.

[0091] In the embodiment of the present invention, when a vertical scrolling operation request of a target sub-page is received, the current sub-page is vertically scrolled. To avoid scrolling conflicts between the main view page and the sub-view page during the vertical scrolling process, the vertical scrolling operation is always applied to the sub-view.

[0092] Furthermore, through the configured page structure, when performing a vertical scrolling operation on the page, only a single list can be operated, and there will be no situation where the scrolling is suddenly interrupted.

[0093] In an embodiment of the present invention, the vertical page interactive view refers to the dynamic changes and responses of the page content, layout or visual elements when performing a vertical scrolling operation, which is intended to dynamically adjust the page content and visual performance according to the user's scrolling behavior and the current page position.

[0094] In the embodiment of the present invention, the binding of the common top view component in the page structure with the target sub-page so that the common top view component and the target sub-page perform a common vertical scrolling operation to obtain a vertical page interactive view includes:

[0095] When the target subpage is scrolled vertically, the common top view component is bound to the page header of the target subpage, and the bound common top view component and the target subpage are suspended for display;

[0096] Vertically scrolling the target sub-page after floating display and the common top view component together according to a preset page scrolling starting point;

[0097] A vertical page interactive view is generated according to the page scrolling stop point of the target sub-page after the common vertical scrolling operation.

[0098] In detail, when the current target sub-page is scrolled vertically, the common top view is bound to the sub-list page so that the common top view will scroll along with the current sub-list page, and javascript is used to listen to page scrolling events to capture the user's scrolling behavior in real time. When the user stops scrolling (for example, stops scrolling for a period of time), a suitable stopping point is determined by calculating the current scrolling position and the page structure. Once the stopping point is determined, the vertical page interaction view is generated or updated according to the stopping point position and the state of the page content, including operations such as displaying specific information, loading more content, or updating the navigation status, thereby obtaining the vertical page interaction view corresponding to the vertical scrolling operation.

[0099] Specifically, Figure 3 As shown, it is a flow chart of vertical scrolling of the page. When performing vertical scrolling operation, when scrolling the current sub-list, the public top view will scroll normally along with the scrolling of the sub-list, thereby generating a corresponding vertical page interaction view according to the user's operation, improving the user's interactive experience and the functionality of the page, ensuring the consistency of the vertical scrolling operation, and improving the fluency and experience of the user's operation.

[0100] Furthermore, the current sub-list page can not only be scrolled vertically, but also switched left and right. In order to simplify the handling of scrolling conflicts during the left and right switching process, the top view needs to be displayed by floating. Therefore, it is necessary to analyze the position of the common top view component in the page structure.

[0101] S4. When a left-right switching operation request of the target sub-page is received, the common top view component in the page structure is separated from the target sub-page in the sub-list page, so that the target sub-page responds to the left-right switching operation request alone.

[0102] In the embodiment of the present invention, when a left-right switching operation request of the current target subpage is received, the top view will be separated from the current target subpage and displayed in a suspended state.

[0103] In the embodiment of the present invention, the step of separating the common top view component in the page structure from the target sub-page in the sub-list page includes:

[0104] When the target sub-page is switched left or right, it is determined whether the common top view component in the page structure has exceeded the floating category controller area in the page structure;

[0105] When the public top view component does not exceed the floating category controller area in the page structure, the public top view component is added to the upper layer of the position of the sub-list component in the page structure, and the public top view component added to the upper layer of the sub-list component is separated from the target sub-page;

[0106] When the common top view component has exceeded the floating category controller area in the page structure, it is determined that the common top view component has left the target sub-page.

[0107] In detail, when the current target sub-page switches left or right, it will first determine whether the public top view component configured in the page structure has exceeded the area range of the suspended category controller area in the page structure, that is, the list label component in the page structure is used as the dividing line. When the public top view component does not exceed the area range of the suspended category controller area in the page structure, when the list switches left or right and when the list scrolls up to the suspended category controller area, the public top view component is added to the sub-list component, that is, it is separated from the list, achieving the effect of being fixed at the top, so that the target sub-page can respond to the left or right switching operation request independently, that is, when the list scrolls up to the suspended position, the trigger logic adds the public top view component to the sub-list component; and when the public top view component exceeds the area range of the suspended category controller area in the page structure, it means that the header of the current target sub-page has been separated from the current list, and there is no need to adjust the layout of the public top view component in the page structure.

[0108] Furthermore, when the current target subpage is switched left or right, the common top view will be separated from the target subpage of the current operation. When the left or right switching operation is completed, the common top view will be added to the head of the currently displayed sublist page to form a new unified view.

[0109] S5. When a request for completing the left-right switching operation of the target subpage is received, the public top view component is added to the page header of the target subpage after being separated from the public top view component to obtain the left-right page interactive view corresponding to the target subpage.

[0110] In an embodiment of the present invention, when the left-right switching operation of the target sub-page of the current operation is completed, the common top view will be added to the header of the sub-list page currently displayed, thereby obtaining the page interaction view of the target sub-page of the current operation. The left-right page interaction view refers to the dynamic changes and responses of the page content, layout or visual elements when performing the left-right switching operation, which aims to dynamically adjust the page content and visual performance according to the user's switching behavior and the current page position.

[0111] In the embodiment of the present invention, the adding of the common top view component to the page header of the target subpage separated from the common top view component to obtain the left and right page interactive views corresponding to the target subpage includes:

[0112] When the left-right switching operation of the target subpage is completed and the public top view component has exceeded the floating category controller area in the page structure, displaying the public top view component in the page header of the target subpage;

[0113] When the left-right switching operation of the target subpage is completed and the common top view component does not exceed the floating category controller area in the page structure, the common top view component is added to the upper layer of the list page position corresponding to the target subpage in the page structure;

[0114] The target subpage after adding a common top view component to the page header of the target subpage is determined as the left-right page interactive view.

[0115] In detail, when the left-right switching operation of the target sub-page of the current operation is completed and the public top view component has exceeded the area range of the floating category controller area in the page structure, the public top view component is not adjusted in the page structure at this time, and the public top view component is directly displayed in the page header of the target sub-page of the current operation; and when the left-right switching operation of the target sub-page of the current operation is completed and the public top view component has not exceeded the area range of the floating category controller area in the page structure, the public top view is added to the header of the currently displayed sub-list page, that is, the public top view is added to the upper level of the currently displayed sub-list page, thereby adding the public top view to the header of the currently displayed sub-list page, forming a new unified view, namely the left and right page interactive view.

[0116] Specifically, Figure 4 The figure shows a flowchart of switching sublists left and right. First, when switching sublists left and right, it is necessary to determine whether the common top has been scrolled out of the screen, that is, whether it has been scrolled out of the area range of the floating category controller area. If it has not been scrolled, then during the sublist switching process, the common top view is added to the bottom-level container and placed at the top of the view hierarchy to achieve the effect of being fixed at the top; if it has been scrolled out of the screen, then after the sublist switching is completed, the common top view is added to the current sublist, thereby obtaining the left and right page interactive view after the left and right switching is completed.

[0117] By configuring the page structure, the embodiment of the present invention can design and implement the page layout more flexibly without worrying about the complexity of scrolling control; the vertical scrolling operation always acts on the sub-view, avoiding the scrolling conflict between the main view and the sub-view, and ensuring the consistency of the vertical scrolling operation; when switching left and right, the top view is displayed in suspension, which simplifies the handling of scrolling conflicts during the page switching process; after the left and right switching is completed, the common top view is integrated with the current sub-view, which simplifies the scrolling control logic and improves the smoothness of page switching. Therefore, the interactive method, device and medium for switching sub-pages left and right proposed by the present invention can solve the problem of low smoothness when performing page switching interaction.

[0118] like Figure 5 FIG. 1 is a schematic diagram of the structure of an electronic device for implementing an interactive method for switching between sub-pages left and right provided by an embodiment of the present invention.

[0119] The electronic device may include a processor 10, a memory 11, a communication bus 12 and a communication interface 13, and may also include a computer program stored in the memory 11 and executable on the processor 10, such as an interactive program for switching sub-pages left and right.

[0120] The processor 10 may be composed of an integrated circuit in some embodiments, for example, a single packaged integrated circuit, or a plurality of packaged integrated circuits with the same or different functions, including one or more central processing units (CPUs), microprocessors, digital processing chips, graphics processors, and combinations of various control chips. The processor 10 is the control core (ControlUnit) of the electronic device, and uses various interfaces and lines to connect various components of the entire electronic device, and executes or executes programs or modules stored in the memory 11 (for example, interactive programs for switching subpages left and right, etc.), and calls data stored in the memory 11 to execute various functions of the electronic device and process data.

[0121] The memory 11 includes at least one type of readable storage medium, and the readable storage medium includes a flash memory, a mobile hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a magnetic memory, a disk, an optical disk, etc. In some embodiments, the memory 11 may be an internal storage unit of an electronic device, such as a mobile hard disk of the electronic device. In other embodiments, the memory 11 may also be an external storage device of an electronic device, such as a plug-in mobile hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the electronic device. Further, the memory 11 may also include both an internal storage unit of the electronic device and an external storage device. The memory 11 may not only be used to store application software and various types of data installed in the electronic device, such as the code of an interactive program for switching between sub-pages left and right, but may also be used to temporarily store data that has been output or is to be output.

[0122] The communication bus 12 may be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. The bus is configured to realize connection and communication between the memory 11 and at least one processor 10, etc.

[0123] The communication interface 13 is used for communication between the above-mentioned electronic device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and / or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.), which is generally used to establish a communication connection between the electronic device and other electronic devices. The user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), and optionally, the user interface may also be a standard wired interface, a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, and an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, etc. Among them, the display may also be appropriately referred to as a display screen or a display unit, which is used to display information processed in the electronic device and to display a visual user interface.

[0124] The figure only shows an electronic device with components. Those skilled in the art will understand that the structure shown in the figure does not constitute a limitation on the electronic device, and may include fewer or more components than shown in the figure, or combine certain components, or arrange the components differently.

[0125] For example, although not shown, the electronic device may also include a power source (such as a battery) for supplying power to each component. Preferably, the power source may be logically connected to the at least one processor 10 through a power management device, so that the power management device can realize functions such as charging management, discharging management, and power consumption management. The power source may also include one or more DC or AC power sources, recharging devices, power failure detection circuits, power converters or inverters, power status indicators, and other arbitrary components. The electronic device may also include a variety of sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be repeated here.

[0126] It should be understood that the embodiment is for illustration only and the scope of the patent application is not limited to this structure.

[0127] The interactive program for switching sub-pages left and right stored in the memory 11 of the electronic device is a combination of multiple instructions. When running in the processor 10, it can achieve:

[0128] Configuring a common top view component and a sub-list component of a user interface in a pre-acquired main page, and nesting a sub-list page in the main page according to the sub-list component;

[0129] Arrange the public top view component on the upper layer of the position of the sub-list component, and construct a page structure of the user interface according to the arranged public top view component, the sub-list component and the page component position of the sub-list page;

[0130] When a vertical scrolling operation request of a target subpage in the sublist page is received, binding the common top view component in the page structure with the target subpage, so that the common top view component and the target subpage perform a common vertical scrolling operation to obtain a vertical page interactive view;

[0131] When a left-right switching operation request of the target sub-page is received, the common top view component in the page structure is separated from the target sub-page in the sub-list page, so that the target sub-page responds to the left-right switching operation request alone;

[0132] When a request to complete the left-right switching operation of the target subpage is received, the public top view component is added to the page header of the target subpage after being separated from the public top view component to obtain the left-right page interactive view corresponding to the target subpage.

[0133] Specifically, the specific implementation method of the processor 10 for the above instructions can refer to the description of the relevant steps in the corresponding embodiment of the accompanying drawings, which will not be repeated here.

[0134] Furthermore, if the module / unit integrated in the electronic device is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. The computer-readable storage medium can be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a mobile hard disk, a magnetic disk, an optical disk, a computer memory, and a read-only memory (ROM).

[0135] The present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor of an electronic device, the computer program can implement:

[0136] Configuring a common top view component and a sub-list component of a user interface in a pre-acquired main page, and nesting a sub-list page in the main page according to the sub-list component;

[0137] Arrange the public top view component on the upper layer of the position of the sub-list component, and construct a page structure of the user interface according to the arranged public top view component, the sub-list component and the page component position of the sub-list page;

[0138] When a vertical scrolling operation request of a target subpage in the sublist page is received, binding the common top view component in the page structure with the target subpage, so that the common top view component and the target subpage perform a common vertical scrolling operation to obtain a vertical page interactive view;

[0139] When a left-right switching operation request of the target sub-page is received, the common top view component in the page structure is separated from the target sub-page in the sub-list page, so that the target sub-page responds to the left-right switching operation request alone;

[0140] When a request to complete the left-right switching operation of the target subpage is received, the public top view component is added to the page header of the target subpage after being separated from the public top view component to obtain the left-right page interactive view corresponding to the target subpage.

[0141] In the several embodiments provided by the present invention, it should be understood that the disclosed devices, media and methods can be implemented in other ways. For example, the device embodiments described above are only illustrative, for example, the division of the modules is only a logical function division, and there may be other division methods in actual implementation.

[0142] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0143] In addition, each functional module in each embodiment of the present invention may be integrated into one processing unit, each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of hardware plus software functional modules.

[0144] It is obvious to those skilled in the art that the present invention is not limited to the details of the above exemplary embodiments, and that the present invention can be implemented in other specific forms without departing from the spirit or essential characteristics of the present invention.

[0145] Therefore, no matter from which point of view, the embodiments should be regarded as illustrative and non-restrictive, and the scope of the present invention is not limited only according to the above description, and it is intended that all changes within the meaning and scope of equivalent elements within the scope of protection are included in the present invention.

[0146] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Among them, artificial intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0147] In addition, it is clear that the word "comprising" does not exclude other units or steps, and the singular does not exclude the plural. Multiple units or devices stated in the system can also be implemented by one unit or device through software or hardware. The words first, second, etc. are used to indicate names, and do not indicate any particular order.

[0148] Finally, it should be noted that the above embodiments are only used to illustrate the technical solution of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solution of the present invention can be modified or replaced by equivalents without departing from the spirit and scope of the technical solution of the present invention.

Claims

1. An interactive method for switching sub-pages left and right, characterized in that: The method comprises: Configuring a common top view component and a sub-list component of a user interface in a pre-acquired main page, and nesting a sub-list page in the main page according to the sub-list component; Arrange the common top view component on the upper layer of the position of the sub-list component, and construct a page structure of the user interface according to the arranged common top view component, the sub-list component and the position of the sub-list page; When a vertical scrolling operation request of a target subpage in the sublist page is received, binding the common top view component in the page structure with the target subpage, so that the common top view component and the target subpage perform a common vertical scrolling operation to obtain a vertical page interactive view; When a left-right switching operation request of the target sub-page is received, the common top view component in the page structure is separated from the target sub-page in the sub-list page, so that the target sub-page responds to the left-right switching operation request alone; When a request to complete the left-right switching operation of the target subpage is received, the public top view component is added to the page header of the target subpage after being separated from the public top view component to obtain the left-right page interactive view corresponding to the target subpage.

2. The interactive method for switching subpages left and right as claimed in claim 1, characterized in that: The configuration of the common top view component and the sub-list component of the user interface in the pre-acquired main page includes: A top core business view area and a floating category controller area of ​​the user interface are configured at the top of the main page; Configure a header content placeholder component according to the top core business view area, and configure a sublist label component according to the floating category controller area; A common top view component of configuring a user interface according to the header content placeholder component and the sub-list label component; Using the number of labels of the sublist label component as the number of components of the sublist component, and performing interactive processing between the sublist label component and the sublist component; The sub-list component after the interaction processing is configured in the main page.

3. The interactive method for switching subpages left and right as claimed in claim 1, characterized in that: The step of nesting the sub-list page in the main page according to the sub-list component includes: Page mapping the sublist component with the sublist page; Constructing jump links between the sub-list tag components mapped to the pages and the sub-list pages one by one, and extracting link identifiers of the sub-list pages corresponding to the jump links; The sub-list page is nested into the main page according to the link identifier.

4. The interactive method for switching subpages left and right as claimed in claim 1, characterized in that: The step of configuring the common top view component at an upper layer of the position of the sub-list component includes: Identify the page component position corresponding to the sublist component; extracting the position of the common top view component; The position of the public top view component is added above the position of the page component.

5. The interactive method for switching subpages left and right as claimed in claim 2, characterized in that: The page structure of the user interface is constructed according to the configured common top view component, the sub-list component and the position of the sub-list page, including: Configuring the position of the sub-list page at the bottom of the main page; Configuring the list component position of the sub-list component in the floating category controller area; The sub-list page at the bottom of the page, the configured common top view component and the sub-list component group in the floating category controller area are constructed into a page structure of the user interface.

6. The interactive method for switching subpages left and right as claimed in claim 1, characterized in that: The step of binding the common top view component in the page structure with the target sub-page so that the common top view component and the target sub-page perform a common vertical scrolling operation to obtain a vertical page interactive view includes: When the target subpage is scrolled vertically, the common top view component is bound to the page header of the target subpage, and the bound common top view component and the target subpage are suspended for display; Vertically scrolling the target sub-page after floating display together with the common top view component according to a preset page scrolling starting point; A vertical page interactive view is generated according to the page scrolling stop point of the target sub-page after the common vertical scrolling operation.

7. The interactive method for switching subpages left and right as claimed in claim 2, characterized in that: The step of separating the common top view component in the page structure from the target sub-page in the sub-list page includes: When the target sub-page is switched left or right, it is determined whether the common top view component in the page structure has exceeded the floating category controller area in the page structure; When the public top view component does not exceed the floating category controller area in the page structure, the public top view component is added to the upper layer of the position of the sub-list component in the page structure, and the public top view component added to the upper layer of the sub-list component is separated from the target sub-page; When the common top view component has exceeded the floating category controller area in the page structure, it is determined that the common top view component has left the target sub-page.

8. The interactive method for switching subpages left and right as claimed in claim 2, characterized in that: The step of adding the common top view component to the page header of the target subpage separated from the common top view component to obtain the left and right page interactive views corresponding to the target subpage includes: When the left-right switching operation of the target subpage is completed and the public top view component has exceeded the floating category controller area in the page structure, displaying the public top view component in the page header of the target subpage; When the left-right switching operation of the target subpage is completed and the common top view component does not exceed the floating category controller area in the page structure, the common top view component is added to the upper layer of the list page position corresponding to the target subpage in the page structure; The target subpage after adding a common top view component to the page header of the target subpage is determined as the left-right page interactive view.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the interactive method for switching sub-pages left and right as described in any one of claims 1 to 8.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the interactive method for switching sub-pages left and right as claimed in any one of claims 1 to 8 is implemented.

Images