Page display method and device, electronic equipment and storage medium
The page display method addresses the issue of merged themes in channel pages by allowing users to switch to relevant content based on touch operations, improving navigation and user experience through dynamic layout adjustments.
Patent Information
- Application Number
- CN202411627269.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-14
- Publication Date
- 2024-12-13
- Estimated Expiration
- Not applicable · inactive patent
AI Technical Summary
Existing channel pages merge content with similar themes, leading to a poor user experience due to low overlap between user preferences, making it difficult for users to find content they are interested in.
A page display method that allows switching between channel pages corresponding to different topic tags based on touch operations, using gesture recognition to determine target theme tags and display relevant content, adjusting layout and content display dynamically.
Improves user experience by enabling quick and flexible navigation to relevant content, enhancing readability and usability of channel pages.
Smart Images

Figure CN119127382A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of page display, and in particular to a page display method, device, electronic equipment and storage medium. Background Art
[0002] Channel pages are an important type of page, usually in applications (APPs), independent pages or page collections set up according to the same theme or category; for example, shopping channels, news channels, etc.
[0003] Currently, due to the limited amount of content on the channel page, in order to make full use of the limited display space, content with similar themes is usually merged into the same channel page; for example, the same channel page can include the two themes of fruit and grocery shopping. However, since there is a low overlap between users who prefer different themes, if the content of these themes is forcibly merged on the channel page, it will cause a poor user experience.
[0004] Therefore, how to switch channel pages corresponding to different topics to improve the user experience is a technical problem that urgently needs to be solved. Summary of the invention
[0005] The present application provides a page display method that can switch channel pages corresponding to different topic tags to improve the user experience.
[0006] In a first aspect, a page display method is provided, the method comprising: Displaying a first channel page on the electronic screen; wherein the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a product channel page of the first theme tag among the at least two theme tags; If a target electrical signal generated by a touch operation on the electronic screen is detected, a target subject tag is determined according to the target electrical signal; A second channel page is displayed on the electronic screen; wherein the second channel page is a product channel page corresponding to the target topic tag.
[0007] In an embodiment of the present application, since the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; if a target electrical signal generated by a touch operation on the electronic screen is detected, a target theme tag among the at least two theme tags can be determined according to the target electrical signal; and then the second channel page is displayed on the electronic screen. Through the scheme of the present application, it is possible to display a product channel page corresponding to any one of the at least two theme tags on the first channel page, and then display product channel pages corresponding to different theme tags to users, so as to improve the user experience; in addition, since the embodiment of the present application can display product channel pages corresponding to different theme tags, users with different classification preferences can understand the product content of various theme tags; based on this, the embodiment of the present application can switch channel pages corresponding to different theme tags, thereby improving the user experience.
[0008] In combination with the first aspect, in certain implementations of the first aspect, determining the target topic label based on the target electrical signal includes: judging the touch type and the touch area of the target electrical signal based on gesture recognition technology; if the touch type of the target electrical signal is a first click operation and the touch area is a first navigation area, determining the target topic label based on the touch position point of the first click operation; if the touch type of the target electrical signal is a first sliding operation and the touch area is a first classification area, determining the target topic label based on the first sliding parameter of the first sliding operation.
[0009] In an embodiment of the present application, the user can quickly determine the content of each area by clicking on the first navigation area or sliding on the first classification area, thereby improving the flexibility of page switching and further improving the user experience.
[0010] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, the first classification area is used to display the objects corresponding to each topic tag; according to the first sliding parameter of the first sliding operation, the target topic tag is determined, including: judging whether the first sliding distance is greater than a preset length; wherein the first sliding distance is the distance between the sliding start point and the sliding end point in the first sliding parameter; if the first sliding distance is greater than the preset length, according to the first sliding direction, multiple target objects in the first classification area are determined; a first mapping relationship is obtained; wherein the first mapping relationship is used to represent the mapping relationship between each topic tag and the object corresponding to each topic tag; according to the first mapping relationship and multiple target objects, the topic tags corresponding to the multiple target objects are determined as the target topic tags.
[0011] In an embodiment of the present application, the user's sliding intention is judged by combining the first sliding distance and the first sliding direction, the target object is determined, and the target topic tag is determined according to the target object, thereby improving the user's usage experience.
[0012] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, if the target electrical signal is a first click operation; the method provided in the embodiment of the present application also includes: obtaining a first mapping relationship; wherein the first mapping relationship is used to represent the mapping relationship between each topic tag and the object corresponding to each topic tag; according to the first mapping relationship and the target topic tag, determine the target object corresponding to the target topic tag.
[0013] In an embodiment of the present application, a linkage relationship between the first navigation area and the first classification area can be achieved through a mapping relationship between each topic tag and the object corresponding to each topic tag. When the content of the first navigation area changes, the content of the first classification area can be quickly determined based on the first mapping relationship, thereby further improving the user experience.
[0014] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, the second channel page includes a first navigation area and a first classification area; displaying the second channel page includes: displaying multiple target objects corresponding to the target topic tag in the first classification area; displaying the target component at the target position in the first navigation area; wherein the target position is used to indicate that the target topic tag is in a selected state.
[0015] In an embodiment of the present application, the content of the target topic tag can be displayed through the first navigation area and the first classification area of the second channel page, thereby improving the user experience.
[0016] In combination with the first aspect and the above-mentioned implementation methods, in certain implementation methods of the first aspect, if the target electrical signal is a first sliding operation, the method provided by the embodiment of the present application also includes: in the process of sliding on the first classification area, obtaining the current position point; the current position point is any position point between the sliding starting point and the sliding end point; according to the current position point, displaying multiple first objects in the first classification area; the first object includes at least one target object and at least one object corresponding to the first theme tag; determining the first position in the first navigation area according to the distance between the current position point and the sliding starting point; and displaying the target component at the first position.
[0017] In an embodiment of the present application, the display contents of the first classification area and the first navigation area may be updated in real time according to the first sliding operation, thereby improving the user experience.
[0018] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, the first channel page also includes: a product display area; determining the target theme tag based on the target electrical signal, including: if the target electrical signal is a second sliding operation acting on the product display area, determining the target theme tag based on the second sliding parameter of the second sliding operation.
[0019] In an embodiment of the present application, a user can quickly determine the content of each area by sliding in the product display area, thereby increasing the flexibility of page switching and further improving the user experience.
[0020] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, displaying the second channel page includes: updating the height of the first category area in the second channel page to a first target height according to the number of target objects corresponding to the target topic tag; detecting that the height of the first category area has changed, and updating the height of the product display area in the second channel page to a second target height according to the first target height.
[0021] In an embodiment of the present application, when switching channel pages, the height of the first classification area and the height of the product display area are adjusted to adjust the layout of the channel page, improve the readability of the channel page, and thus improve the user experience.
[0022] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, based on the number of target objects corresponding to the target topic tag, the height of the first category area in the second channel page is updated to the first target height, including: obtaining the number of target objects; determining the first target height based on the number of target objects and a preset value of the number; and updating the height of the first category area in the second channel page to the first target height.
[0023] In the embodiment of the present application, the first target height can be quickly determined through the number of target objects and the preset value of the number, and the height unification of the first classification area on the unified channel page can be achieved, thereby improving the user experience.
[0024] In combination with the first aspect and the above-mentioned implementation methods, in certain implementation methods of the first aspect, the method provided in the embodiment of the present application also includes: determining the target moving direction based on the initial height of the product display area in the first channel page and the second target height; controlling the product display area in the first channel page to move in the target moving direction to display the second channel page.
[0025] In the embodiment of the present application, since the height of the product display area changes, the moving direction of the product display area on the first channel page can be controlled in combination with the animation effect to achieve smooth switching between channel pages, further improving the user experience.
[0026] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, the product display area is used to display the product content of each theme tag; each theme tag has a first identifier; displaying the second channel page includes: obtaining the product content of the target theme tag from the cloud according to the first identifier of the target theme tag; and displaying the product content of the target theme tag in the product display area on the second channel page.
[0027] In an embodiment of the present application, by assigning a unique first identifier to each topic tag, after the user selects the target topic tag, the corresponding product content can be quickly and accurately obtained from the cloud and displayed on the second channel page, further improving the user experience.
[0028] In the embodiment of the present application, since the commodity display area can also display the commodity content of any target object, in this way, the user can further obtain the commodity content of interest to improve the user's use experience.
[0029] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, each object in the first classification area has a second identifier; the product display area is used to display the product content of any object in the first classification area; after displaying the second channel page, the method also includes: if a second click operation on the first target object is detected, according to the second identifier of the first target object, obtaining the product content of the first target object from the cloud; and displaying the product content of the first target object in the product display area on the second channel page.
[0030] In the embodiment of the present application, the commodity content of the first target object can be quickly and accurately acquired through the second identifier of the first target object, thereby further improving the user experience.
[0031] In combination with the first aspect and the above-mentioned implementation methods, in some implementation methods of the first aspect, the first category area in the first channel page also includes: at least one second target object contained in the target topic tag; any second target object is partially or fully displayed in the first category area in the first channel page.
[0032] In an embodiment of the present application, by also displaying objects contained in other topic tags in the first classification area, users can quickly understand that other topic tags are available for selection besides the current topic tag, thereby enhancing the navigability of the channel page and further improving the user experience.
[0033] In a second aspect, a page display device is provided, comprising: The display module is used to display a first channel page on an electronic screen; wherein the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a product channel page of a first theme tag among the at least two theme tags; A determination module, configured to determine a target subject tag according to the target electrical signal if a target electrical signal generated by a touch operation on the electronic screen is detected; The display module is used to display the second channel page on the electronic screen; wherein the second channel page is the product channel page corresponding to the target topic tag.
[0034] In conjunction with the second aspect, in some implementations of the second aspect, the determining module is specifically configured to: According to gesture recognition technology, the touch type and touch area of the target electrical signal are determined; if the touch type of the target electrical signal is a first click operation and the touch area is a first navigation area, the target subject label is determined according to the touch position point of the first click operation; if the touch type of the target electrical signal is a first sliding operation and the touch area is a first classification area, the target subject label is determined according to the first sliding parameter of the first sliding operation.
[0035] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module is specifically configured to: Determine whether a first sliding distance is greater than a preset length; wherein the first sliding distance is the distance between a sliding start point and a sliding end point in a first sliding parameter; if the first sliding distance is greater than the preset length, determine a plurality of target objects in a first classification area according to a first sliding direction; obtain a first mapping relationship; wherein the first mapping relationship is used to represent a mapping relationship between each topic tag and an object corresponding to each topic tag; and according to the first mapping relationship and a plurality of target objects, determine the topic tags corresponding to the plurality of target objects as target topic tags.
[0036] In combination with the second aspect and the above-mentioned implementation methods, in some implementation methods of the second aspect, the device also includes: an acquisition module, used to obtain a first mapping relationship; wherein the first mapping relationship is used to represent the mapping relationship between each of the subject tags and the object corresponding to each of the subject tags.
[0037] In conjunction with the second aspect, in some implementations of the second aspect, the determining module is specifically configured to: According to the first mapping relationship and the target topic tag, a target object corresponding to the target topic tag is determined.
[0038] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: Display multiple target objects corresponding to the target topic label in the first classification area; display the target component at the target position in the first navigation area; wherein the target position is used to indicate that the target topic label is in a selected state.
[0039] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module is specifically configured to: During sliding on the first classification area, the current position point is obtained; the current position point is any position point between the sliding start point and the sliding end point; according to the current position point, multiple first objects are displayed in the first classification area; the first objects include at least one target object and at least one object corresponding to the first theme tag; according to the distance between the current position point and the sliding start point, the first position in the first navigation area is determined; and the target component is displayed at the first position.
[0040] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module is specifically configured to: If the touch type of the target electrical signal is the second sliding operation, and the touch area of the target electrical signal is the product display area, the target theme tag is determined according to the second sliding parameter of the second sliding operation.
[0041] In combination with the second aspect and the above implementations, in some implementations of the second aspect, the apparatus further includes: an updating module, configured to: According to the number of target objects corresponding to the target topic tag, the height of the first category area in the second channel page is updated to the first target height; when it is detected that the height of the first category area has changed, the height of the product display area in the second channel page is updated to the second target height according to the first target height.
[0042] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the update module is specifically configured to: The number of target objects is obtained; a first target height is determined according to the number of target objects and a preset value of the number; and a height of a first classification area in a second channel page is updated to the first target height.
[0043] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module is specifically configured to: The target moving direction is determined according to the initial height of the product display area in the first channel page and the second target height.
[0044] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: Control the product display area in the first channel page to move in the target moving direction to display the second channel page.
[0045] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: According to the first identifier of the target theme tag, the product content of the target theme tag is obtained from the cloud; and the product content of the target theme tag is displayed in the product display area on the second channel page.
[0046] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: If a second click operation on the first target object is detected, the product content of the first target object is obtained from the cloud according to the second identifier of the first target object; and the product content of the first target object is displayed in the product display area on the second channel page.
[0047] In a third aspect, an electronic device is provided, comprising a memory and a processor, wherein the memory is used to store executable program code, and the processor is used to call and run the executable program code from the memory, so that the electronic device executes the method in the above-mentioned first aspect or any possible implementation of the first aspect.
[0048] In a fourth aspect, a chip system is provided, which is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to call computer instructions so that the electronic device executes the method described in the first aspect or any one of the first aspects.
[0049] In a fifth aspect, a computer program product is provided, which includes: a computer program code, which, when executed on a computer, enables the computer to execute the control method in the first aspect or any possible implementation of the first aspect.
[0050] In a sixth aspect, a computer-readable storage medium is provided, which stores a computer program code. When the computer program code runs on a computer, the computer executes the method in the above-mentioned first aspect or any possible implementation manner of the first aspect. BRIEF DESCRIPTION OF THE DRAWINGS
[0051] Figure 1 It is a schematic diagram of an application scenario of the page display method provided in an embodiment of the present application; Figure 2 is a schematic flow chart of a page display method provided in an embodiment of the present application; Figure 3 This is a schematic diagram of a first channel page display scenario provided by an embodiment of the present application; Figure 4 is a schematic diagram of a second channel page display scenario provided in an embodiment of the present application; Figure 5 This is a schematic diagram of a third channel page display scenario provided by an embodiment of the present application; Figure 6 This is a schematic diagram of a fourth channel page display scenario provided by an embodiment of the present application; Figure 7 This is a schematic diagram of a fifth channel page display scenario provided by an embodiment of the present application; Figure 8 This is a schematic diagram of a sixth channel page display scenario provided by an embodiment of the present application; Fig. 9 is a schematic flow chart of another page display method provided in an embodiment of the present application; Fig.10 is a structural schematic diagram of a page display device provided in an embodiment of the present application; Fig.11 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0052] The technical solution in the present application will be described clearly and in detail below in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B: "and / or" in the text is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.
[0053] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as suggesting or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features.
[0054] For example, in the embodiment of the present invention, the content displayed on the channel page can be described by taking the delivery content of takeaway goods (such as meals, groceries, fruits, etc.) as an example. However, it is easy for those skilled in the art to understand that the method of the embodiment of the present invention is also applicable to other application scenarios of item delivery (such as intra-city (or inter-city) instant express delivery).
[0055] Of course, optionally, the channel page described in the embodiment of the present application is also applicable to application scenarios; for example, in a channel page related to news, different news topic tags (such as sports, technology, entertainment, etc.) may be included; or, in a channel page related to an online education platform, different subject topic tags (such as mathematics, English, etc.) may be included; the embodiment of the present application does not impose specific restrictions on this.
[0056] For ease of understanding, the following will take the first application (for example, application A) installed on the mobile phone as an example, and combine with the accompanying drawings to specifically explain the scenario in which the running interface of application A is displayed to the user in the first application (for example, application A) installed on the mobile phone.
[0057] It should be understood that the embodiment of the present application does not specifically limit the content of application A. For example, the embodiment of the present application describes application A using the content of takeaway product delivery as an example.
[0058] For example, Figure 1 A diagram of a graphical user interface (GUI) launched when a user runs application A.
[0059] For example, Figure 1 (a) in the figure shows an interface 101 displayed by the mobile phone in unlock mode, and the interface 101 displays a weather clock component and multiple applications (applications, Apps), etc. The applications may include phone, information, settings, and application A, etc.
[0060] It should be understood that the interface 101 may also include other more application programs, which is not limited in the embodiment of the present application.
[0061] like Figure 1 As shown in Figure (a), the user clicks the icon of application A. In response to the user's click operation, the mobile phone displays the following Figure 1 FIG. 1( b) shows the main interface 102 of application A, which can also be called “home page of application A”. The main interface 102 of application A can display multiple classification menus, operable controls or buttons, pictures and other interface contents for the user to meet the user's usage needs.
[0062] For example, Figure 1 As shown in (b) in the figure, on the main interface 102 of application A, the current delivery address (for example, "XX District XX Street"), a search box, and a channel classification area 1021 including different theme channels such as food delivery, supermarket convenience, flower gifts, fruit shopping, medicine shopping, desserts and drinks, hamburgers and fried chicken, and lobster barbecue, as well as a product display area 1022 (for example, a merchant list can be displayed in the product display area 1022), etc. are displayed.
[0063] For example, Figure 1 As shown in (b) of FIG. 1 , when the mobile phone detects a user clicking on a certain theme channel (eg, fruit and vegetable shopping) in the channel classification area 1021 of the main interface 102, in response to the user's clicking operation, the mobile phone may display the following Figure 1Interface 103 shown in (c) in the figure; channel pages corresponding to fruit and vegetable shopping can be displayed on interface 103; interface 103 can display content related to fruit and vegetable shopping, for example: interface 103 includes: first navigation area 1031, first classification area 1032 and product display area 1033. Among them, first navigation area 1031 displays the title control of fruit and vegetable shopping; first classification area 1032 displays multiple categories (i.e., King Kong categories), such as: fruit, fruit cuts and salads, meat, eggs, fresh vegetables, hot pot ingredients, etc.; product display area 1033 displays multiple store lists corresponding to fruit and vegetable shopping.
[0064] For example, Figure 1 As shown in (c) of FIG. 1 , when the mobile phone detects a sliding operation of the user on the product display area 1033 of the main interface 103, in response to the sliding operation of the user, the mobile phone may display the following Figure 1 The interface 104 shown in (d) in the figure can display content related to fruit and vegetable shopping, including: a first classification area 1041 and a product display area 1042. The content of the first classification area 1041 can refer to the first classification area 1032; the product display area 1042 displays multiple stores, such as: store 1, store 2, store 3 and store 4. Store 1 and store 3 are stores related to the fruit theme; store 2 and store 4 are stores related to the vegetable shopping theme.
[0065] It should be noted that the embodiments of the present application Figure 1 (a) to Figure 1 There is no limitation on the display content and the size of the display area in each interface in (d).
[0066] Currently, due to the limitation of the amount of content on a channel page, in order to make full use of the limited display space, content with similar themes is usually merged into the same channel page.
[0067] For example, Figure 1 As shown in (b), on the interface 102, there is a limit on the number of theme channels displayed in the theme channel 1021; therefore, fruits and shopping are usually combined into one theme channel (i.e., Fruit Shopping); flowers and gifts are combined into one category channel (i.e., Flowers and Gifts); and desserts and drinks are combined into one category channel (i.e., Desserts and Drinks).
[0068] However, since there is a low overlap between users who prefer different topics, if the content of these topics is forcibly integrated on the channel page, it will cause a poor user experience.
[0069] For example, Figure 1As shown in (d) in the figure: on the interface 104, the multiple categories in the first classification area 1041 do not belong to the same theme. For example, fruits and fruit cuts and fruit salad belong to the category of fruits; meat, eggs, fresh vegetables, and hot pot ingredients belong to the category of shopping for vegetables.
[0070] For another example, the multiple stores displayed in the product display area 1042 are not stores of the same theme. For example, store 1 and store 3 are stores related to the fruit theme; store 2 and store 4 are stores related to the grocery shopping theme.
[0071] It is not difficult to understand that since the overlap between users who prefer different topics is not high; if the content under these similar topics is forcibly integrated, the content displayed on the interface will be confusing, making it difficult for users to find the content they are really interested in, resulting in a lower user experience and even user loss.
[0072] Therefore, how to switch the channel pages corresponding to different topic tags to improve the user experience is a technical problem that urgently needs to be solved.
[0073] Optionally, due to differences in terminology across different fields, the topics described above may also be referred to as industries, etc.
[0074] Therefore, in response to the above problems, the present application will provide a page display method, device, electronic device and storage medium; through the solution provided in the embodiment of the present application, when displaying the first channel page, it is possible to switch to the second channel page based on the target electrical signal of the first channel page; through this method, it is possible to switch the channel pages corresponding to different topic tags to improve the user experience.
[0075] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.
[0076] To facilitate understanding of the embodiments of the present application, the professional terms involved in the embodiments of the present application are explained below: 1. Channels A channel is a type of page, usually an independent page or a collection of pages set up according to a theme or category in an application. It provides users with a browsing environment that focuses on content in a specific theme or category. For example, a shopping application may have a "clothing channel" or "electronics channel", and a news app may have a "sports channel" or "technology channel".
[0077] 2. Tab A label is a user interface element, usually referring to the title controls of each topic in the title navigation area (for example, the first navigation area in this article) on a channel page. These title controls are usually presented in the form of labels, and users can click these labels to switch between different topics. Each title can represent an independent topic, which makes it easy for users to quickly locate the content area they are interested in.
[0078] 3. King Kong District King Kong is a user interface element, usually located in the home screen area of the interface, and appears in the form of an "icon + text" grid navigation; for example, the first category area mentioned in this article can also be called the King Kong area.
[0079] 4. Category King Kong Category King Kong is a user interface element, usually referring to the categories (also called objects) contained in each topic displayed in the secondary classification area (for example, the first classification area in this article). These categories are secondary concepts under the topic, or they can be categories with high user attention in the topic. Due to their location and display method on the channel page (such as highlighting, easy to click, etc.), these categories are figuratively called "category king Kong". Users can further filter and browse the content they are interested in by selecting different category king Kong.
[0080] 5. Weex Weex refers to an open source cross-platform mobile development framework that allows developers to use Web technologies (such as HTML, CSS, and JavaScript) to build native mobile applications.
[0081] 6. Gesture recognition technology In Weex, gesture recognition is mainly achieved by listening to gesture events on nodes. In actual application scenarios, you can bind the corresponding gesture event listener to the Weex component. When a gesture occurs, the corresponding event processing function will be triggered to determine the type of gesture. For example, when you quickly touch and release the screen, the gesture is determined as a click operation; when the touch point moves on the screen, the gesture is determined as a slide operation.
[0082] 7. HTML tags HTML tags are used to define various elements on a web page, such as paragraphs, titles, links, images, etc., so that the content can be organized and displayed.
[0083] 8. Switchtab Switchtab generally refers to a page switching function, specifically the behavior or function of switching different tabs in mobile applications by sliding or clicking. It allows users to quickly navigate between different content or functional areas, enhancing the usability and user experience of the application. In implementation, Switchtab may involve monitoring of touch events, dynamic loading and display of page content, and adding animation effects. In the Weex architecture mentioned in the embodiments of the present application, Switchtab is encapsulated into a corresponding html tag to support the front end to dynamically switch page content.
[0084] Combine the following Figures 2 to 9 The page display method provided in the embodiment of the present application is described in detail.
[0085] It should be understood that in the embodiment of the present application, the specific structure of the execution body of the page display method is not particularly limited in the embodiment of the present application, as long as a display method of the embodiment of the present application can be implemented by running a program that records the code of a page display method of the embodiment of the present application.
[0086] Exemplarily, the execution subject of the page display method may be an electronic device; for example, a device with an electronic screen, such as a mobile phone or a tablet computer.
[0087] For example, Figure 2 is a schematic flow chart of a page display method provided in an embodiment of the present application. Figure 2 As shown, the method 200 includes S201 to S203, and S201 to S203 are described in detail below.
[0088] For example, the first channel page and the second channel page hereinafter may be channel pages in the target application. The target application may refer to Figure 1 as well as Figure 1 The relevant description will not be repeated here.
[0089] S201. Display a first channel page on the electronic screen.
[0090] Among them, the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a product channel page of the first theme tag among the at least two theme tags.
[0091] Exemplarily, the commodity channel page may be a channel page set for a certain specific theme channel, for example, a channel page of the commodity delivery type. Accordingly, each theme tag in the first navigation area may be used to represent a theme belonging to the commodity delivery type; for example, at least two theme tags may include: a fruit theme tag, a grocery shopping theme tag, etc. Alternatively, at least two theme tags may include: a fruit theme tag, a vegetable theme tag, and a fresh food theme tag.
[0092] It should be understood that the first navigation area integrates and classifies the information on the first channel page through at least two theme tags included therein. Since each theme tag can be an independent theme, the user can understand the content on the first channel page more clearly.
[0093] As an example, at least two topic tags may be topic tags under the same topic channel; for example, Figure 3 As shown, the at least two theme tags in the first navigation area may include a fruit theme tag and a grocery theme tag in the fruit and grocery shopping channel. In other words, at least two channel pages may be set under the same theme channel; each channel page may correspond to a theme tag. For example, a channel page corresponding to a fruit theme tag and a channel page corresponding to a grocery shopping theme tag.
[0094] It is understandable that in the embodiment of the present application, the content under the same theme channel can be divided into at least two themes; for example, Figure 3 As shown, the content in the fruit and grocery shopping channel can be divided into fruit theme tags and grocery shopping theme tags; compared with the related art, in which the content on a theme channel is mixed together, the embodiment of the present application can make it easier for users to browse and find content that they are interested in, thereby improving the user experience.
[0095] It should also be understood that the theme in each theme channel can be manually set; for example, the themes in the fruit and vegetable shopping theme channel can include fruit and vegetable shopping. Of course, optionally, the fruit theme and the flower theme can also be set in the same channel. This application does not limit the content and number of theme channels.
[0096] For the convenience of explanation, in the embodiment of the present application, the theme channels and the themes in the theme channels are described as follows: Figure 1 Take the setting of as an example.
[0097] S202. If a target electrical signal generated by a touch operation on the electronic screen is detected, a target subject tag is determined according to the target electrical signal.
[0098] Exemplarily, the touch type of the target electrical signal may be a click operation or a slide operation.
[0099] Exemplarily, the target topic tag may be one of the at least two topic tags.
[0100] As an example, when the target theme tag is one of at least two theme tags, the target electrical signal on the electronic screen may be a click operation on the target theme tag in the first navigation area.
[0101] It should be understood that the target electrical signal on the electronic screen is not limited to the operation on the first navigation area. In the embodiment of the present application, the first channel page may also include other areas, such as: a first classification area and a product display area.
[0102] Therefore, as another example, the touch area of the target electrical signal on the first channel page may also be an operation on the first classification area (eg, a sliding operation) or an operation on the product display area (eg, a sliding operation).
[0103] Optionally, the target electrical signal for the first channel page may also be a sliding operation on the first navigation area.
[0104] It should be explained that, for a sliding operation, the user's operation intention can be determined based on the sliding direction, sliding distance and sliding speed of the sliding operation. For example, if the sliding direction is horizontal, and the sliding distance and sliding speed meet certain conditions, the topic tag pointed to by the sliding direction can be determined as the target topic tag.
[0105] Exemplarily, the target theme tag may also be other tags besides the at least two theme tags; for example, the target theme tag may be a theme tag in other theme channels. For example, the theme channel corresponding to the at least two theme tags is a fruit shopping channel, and the theme channel corresponding to the target theme tag may be a dessert and beverage channel.
[0106] In S202, through the interaction between the user and the first channel page, the touch type of the user's target electrical signal (for example, a click operation, a sliding operation, etc.) on the first channel page is identified; then, based on the type of the target electrical signal, it is determined whether the user has the intention to select a target topic tag; and based on the target electrical signal, the target topic tag is determined, and the channel page can be switched in response to the user's target electrical signal.
[0107] For a detailed description of S202, please refer to the following embodiments, which will not be described again here.
[0108] S203. Display the second channel page on the electronic screen.
[0109] Among them, the second channel page is the product channel page corresponding to the target topic tag.
[0110] As an example, if a click operation on a target topic tag in the first navigation area is detected, the page can be switched to the second channel page corresponding to the target topic tag. Figure 3 As shown in (a), the interface 301 displays the channel page corresponding to the fruit theme tag (ie, the first channel page); in the first navigation area 3011, the user clicks on the grocery shopping theme tag; then, in response to the click operation, the following is displayed: Figure 3 Interface 302 shown in (b) of FIG. Interface 302 displays a channel page corresponding to the grocery shopping theme tag (ie, the second channel page).
[0111] As another example, if a sliding operation on the first category area is detected, the second channel page corresponding to the target topic tag may be switched. Figure 4 As shown in (a), the interface 401 displays the channel page corresponding to the fruit theme tag (ie, the first channel page); the user performs a sliding operation on the first classification area 4012 to the left; in response to the sliding operation, the following may be displayed: Figure 4 Interface 402 shown in (b) of FIG. Interface 402 displays a channel page corresponding to the grocery shopping theme tag (ie, the second channel page).
[0112] As another example, if a sliding operation on the product display area is detected, the second channel page corresponding to the target topic tag can be switched. Figure 5 As shown in (a), the interface 501 displays the channel page corresponding to the fruit theme tag (ie, the first channel page); the user performs a sliding operation to the left in the product display area 5013; in response to the sliding operation, the following may be displayed: Figure 5 Interface 502 shown in (b) of FIG. Interface 502 displays a channel page (ie, a second channel page) corresponding to the grocery shopping theme tag.
[0113] As another example, the first channel page and the second channel page may also be channel pages belonging to two different theme channels. In other words, the first theme tag and the target theme tag are not theme tags under the same theme channel. For example, the first theme tag is a fruit theme tag; the target theme tag is a beverage theme tag. Through the target electrical signal on the first channel page, you can switch to the second channel page corresponding to another theme channel. For example, Figure 6 As shown in (a), the interface 501 displays the channel page corresponding to the fruit theme tag (ie, the first channel page); the user performs a sliding operation on the product display area to the right; in response to the sliding operation, the following may be displayed: Figure 6 Interface 602 shown in (b) in the figure. Interface 602 displays the channel page corresponding to the gift theme tag (ie, the second channel page).
[0114] Of course, the first channel page and the second channel page can be two adjacent channel pages, or two non-adjacent channel pages. In the case where the first channel page and the second channel page are two non-adjacent channel pages, the user can perform multiple sliding operations to switch to the second channel page.
[0115] It is understood that in the related art, for example, Figure 1 As shown in (b), the way to enter the channel page corresponding to different theme channels (for example, the flower gift channel and the fruit shopping channel) is to enter the channel page corresponding to the theme channel by clicking the control of a certain theme channel in the channel classification area 1021. Therefore, when the interface displays the channel page corresponding to theme channel A (for example, the fruit shopping channel), if the user needs to display the channel page corresponding to another theme channel B (for example, the flower gift channel), it is necessary to exit the channel page corresponding to theme channel A and enter the channel page corresponding to theme channel B in the channel classification area 1021; and in the embodiment of the present application, on the channel page corresponding to any theme channel, by sliding on the product display area, it is possible to directly switch to the channel page corresponding to other theme channels; thereby reducing the user's operation process on the application and improving the user's experience.
[0116] In an embodiment of the present application, since the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; if a target electrical signal generated by a touch operation on the electronic screen is detected, a target theme tag among the at least two theme tags can be determined according to the target electrical signal; and then the second channel page is displayed on the electronic screen. Through the scheme of the present application, it is possible to display a product channel page corresponding to any one of the at least two theme tags on the first channel page, and then display product channel pages corresponding to different theme tags to users, so as to improve the user experience; in addition, since the embodiment of the present application can display product channel pages corresponding to different theme tags, users with different classification preferences can understand the product content of various theme tags; based on this, the embodiment of the present application can switch channel pages corresponding to different theme tags, thereby improving the user experience.
[0117] In a possible embodiment of the present application, the first channel page and the second channel page also include: a first classification area; the first classification area is used to display multiple objects contained in each topic tag; in the first channel page, the first classification area includes multiple first objects contained in the first topic tag; in the second channel page, the first classification area includes multiple target objects contained in the target topic tag.
[0118] Exemplarily, the first classification area can be used to display multiple objects contained in each theme tag in the theme channel. The first classification area can be located in a prominent position on the first channel page or the second channel page, for example, Figures 3 to 8 As shown: It is presented in the form of a grid navigation of "icon + text", which makes it convenient for users to quickly browse and select the content they are interested in.
[0119] Of course, the embodiment of the present application does not specifically limit the display method of the first category area on the channel page.
[0120] For example, the multiple objects contained in each topic tag may refer to the lower-level concepts of the topic tag, which are used to further refine the topic tag. Figures 3 to 5 As shown, in the case where the theme tag is a fruit theme tag, the multiple objects corresponding to the fruit theme may include: fruit slices and fruit salad, watermelon and honeydew melon, peaches, plums, apricots, lychees and grapes.
[0121] It should be understood that the content and quantity of the multiple objects corresponding to each theme tag can be manually set or formed according to the user's preference for the theme tag. For example, the multiple objects corresponding to the fruit theme can include: fruit slices, watermelons, honeydew melons, peaches and grapes, plums, apricots, and lychees. This application does not limit the content and quantity of the multiple objects.
[0122] For example: Figure 3 (a) Figure 4 (a) and Figure 5 As shown in (a), when the first theme tag is a fruit theme tag, in the first channel page, the multiple first objects in the first classification area include: fruit slices and fruit salad, watermelon and honeydew melon, peaches, plums, apricots, and lychees and grapes.
[0123] Another example: Figure 3 (b) Figure 4 (b) and Figure 5 As shown in (b), when the target topic tag is a shopping topic tag, in the second channel page, the multiple target objects in the first classification area include: fresh vegetables, meat, poultry, eggs, seafood, grains, oils, rice, noodles, soy products, hot pot ingredients, cooked food, seasonal fruits, sunny vegetable markets, etc.
[0124] In an embodiment of the present application, by displaying the objects contained under each topic tag in the first classification area, the content of each topic tag can be refined, so that the user can quickly understand the content and classification of each topic tag, thereby improving the user's usage experience.
[0125] In a possible embodiment of the present application, the first channel page and the second channel page also include: a product display area; the product display area is used to display the product content of each theme tag; in the first channel page, the product display area includes the product content corresponding to the first theme tag; in the second channel page, the product display area includes the product content corresponding to the target theme tag.
[0126] Exemplarily, the product display area may refer to a specific area in a channel page for displaying product content to promote user browsing behavior in the product display area.
[0127] As an example, the product display area can be used to display product content corresponding to the current topic tag.
[0128] As another example, the product display area may be used to display product content corresponding to an object under the current topic tag.
[0129] For example, when the product display area displays the product content corresponding to the current topic tag, you can click on an object A contained in the current topic tag in the first category area; in response to the click operation, the product display area can switch from the product content corresponding to the current topic tag to the product content corresponding to the object A.
[0130] Optional, Figures 3 to 8 The first category area in the example may also include an object "all merchants". By clicking the object "all merchants", the product content corresponding to the current topic tag may be displayed.
[0131] Let's continue the description using the above example: when the product display area displays the product content corresponding to object A, you can click on the object "All Merchants" in the first category area; in response to the click operation, the product display area can switch from the product content corresponding to object A to the product content corresponding to the current topic tag.
[0132] For example, the product display area can be used to display shops (e.g., shop names, delivery costs, delivery distances, sales, etc.) and / or products (product names, prices, sales, etc.) so that users can quickly understand the content of the products corresponding to the current topic tag. Of course, the product display area can also include other content related to the current topic tag, such as recommended products of the season, etc.; this embodiment of the application does not specifically limit this.
[0133] Exemplarily, the content of the goods displayed in the goods display area may be determined according to the geographical location of the user; or, it may be determined according to the usage preference of the user; the embodiments of the present application do not impose any specific limitation on this.
[0134] For example, Figure 3(a) Figure 4 (a) and Figure 5 As shown in (a), when the first theme tag is a fruit theme tag, in the first channel page, the product content in the product display area may include: shops related to the fruit theme; the products in the shop may include, for example, watermelons, peaches, grapes, plums, etc.
[0135] For example, Figure 3 (b) Figure 4 (b) and Figure 5 As shown in (b), when the target topic tag is a grocery shopping topic tag, in the second channel page, the product content in the product display area may include: stores related to the grocery shopping theme; the products in the store may include potatoes, eggs, pork, etc.
[0136] In the embodiments of the present application, the product content displayed in the product display area can enable users to quickly understand the product content for a specific topic tag or a specific object, further improving the user experience.
[0137] In a possible embodiment of the present application, the above S202 includes: determining the touch type and the touch area of the target electrical signal according to the gesture recognition technology.
[0138] For example, the position, direction and other information of the touch point when the user performs a touch operation on the screen can be determined based on gesture recognition technology, and the touch type and touch area of the target electrical signal can be identified. For example, the target electrical signal can be a click operation in the first navigation area, a sliding operation in the first classification area, etc. Specific references are as follows: The above S202 specifically includes the following three situations: Case 1: If the touch type of the target electrical signal is the first click operation, and the touch area is the first navigation area, the target topic tag is determined according to the touch position point of the first click operation.
[0139] Exemplarily, when it is detected that the user performs a first click operation on a certain topic tag in the first navigation area, the topic tag may be determined as a target topic tag.
[0140] As an example, Figure 3 As shown: Figure 3 As shown in (a) of FIG. 3 , when a user browses a channel page (i.e., a first channel page) corresponding to the interface 301, the interface 301 includes a first navigation area 3011; the first navigation area 301 includes a fruit theme tag and a grocery theme tag. In response to the user clicking on the grocery theme tag, the grocery theme tag may be determined as a target theme tag.
[0141] Case 2: If the touch type of the target electrical signal is a first sliding operation, and the touch area is a first classification area, the target topic label is determined according to a first sliding parameter of the first sliding operation.
[0142] Exemplarily, when a user's first sliding operation in a first classification area is detected, a target topic tag may be determined based on a first sliding parameter of the first sliding operation (eg, a first sliding direction, a first sliding distance, a first sliding speed, etc.), for details please refer to the following.
[0143] Exemplarily, the first sliding parameter may include a first sliding direction and a first sliding distance. Optionally, the first sliding parameter may also include a first sliding speed.
[0144] As an example, Figure 4 As shown: Figure 4 As shown in (a) of FIG. 4 , when a user browses a channel page (i.e., the first channel page) corresponding to the interface 401, the interface 401 includes a first classification area 4012; the first classification area 4012 includes: fruit slices and salad, watermelon and honeydew, peach, plum, apricot, and lychee and grape. The user performs a sliding operation on the first classification area 4012 to the left; in response to the sliding operation, the following may be displayed: Figure 4 In the interface 402 shown in (b) of FIG. 1 , according to the sliding operation, it can be determined that the multiple target objects in the first classification area include: fresh vegetables, meat, poultry and eggs, aquatic seafood, grains, oils, rice and noodles, bean products, hot pot ingredients, cooked food, seasonal fruits, sunny market, etc. Then, according to the multiple target objects, the target theme tag is determined to be the shopping theme tag.
[0145] Case 3: If the touch type of the target electrical signal is the second sliding operation, and the touch area of the target electrical signal is the product display area, the target theme tag is determined according to the second sliding parameter of the second sliding operation.
[0146] Exemplarily, the second sliding parameter may include a second sliding direction and a second sliding distance. Optionally, the second sliding parameter may also include a second sliding speed.
[0147] Exemplarily, when a second sliding operation of the user in the product display area is detected, the target topic tag can also be determined based on the second sliding parameter of the second sliding operation; for the specific implementation method of determining the target topic tag based on the second sliding operation, please refer to the example of determining the target topic tag based on the first sliding parameter below, which will not be repeated here.
[0148] As an example, Figure 5 As shown: Figure 5As shown in (a) of FIG. 4 , when a user browses a channel page (i.e., the first channel page) corresponding to the interface 401, the interface 401 includes a product display area 4013; the product display area 4013 includes product content corresponding to the fruit theme tag. The user performs a sliding operation on the product display area 4013 to the left; in response to the sliding operation, the following may be displayed: Figure 5 Interface 402 shown in (b) in the figure; and according to the sliding operation, determining that the target topic tag is a grocery shopping topic tag.
[0149] In an embodiment of the present application, the user can quickly determine the content of each area by clicking on the first navigation area, or sliding on the first classification area or product display area, thereby improving the flexibility of page switching and further improving the user experience.
[0150] In a possible embodiment of the present application, a target topic label is determined according to a first sliding parameter of a first sliding operation, including: determining whether the first sliding distance is greater than a preset length; if the first sliding distance is greater than the preset length, determining multiple target objects in a first classification area according to a first sliding direction; obtaining a first mapping relationship; and determining, according to the first mapping relationship and the multiple target objects, topic labels corresponding to the multiple target objects as target topic labels.
[0151] The first sliding distance is the distance between the sliding start point and the sliding end point in the first sliding parameter.
[0152] Exemplarily, the sliding direction may refer to the direction in which the finger of the user moves when performing a sliding operation on the screen. The sliding direction may be horizontal (from left to right or from right to left) or vertical (from top to bottom or from bottom to top).
[0153] For example, the sliding distance may refer to the total distance that the finger moves on the screen when the user performs a sliding operation on the screen (that is, the distance between the sliding start point and the sliding end point). The sliding distance may be used to determine the amplitude or strength of the user's sliding.
[0154] For example, the sliding speed may refer to the speed at which the user's finger moves on the screen when performing a sliding operation on the screen. The sliding speed may affect the animation effect of page switching, the loading speed of page content, or the response mode of page elements.
[0155] Exemplarily, the preset length may be a length preconfigured for the electronic device, or a length set manually, and the embodiments of the present application do not impose any specific limitation on this.
[0156] For example, the preset length can be used to reflect the screen size of the electronic device. Exemplarily, when the first sliding direction matches a preset direction, a plurality of target objects in the first classification area may be determined according to the first sliding direction.
[0157] Exemplarily, the preset direction can be determined according to the distribution of objects in the first classification area. The preset direction can be horizontal or vertical. For example, in the first classification area, multiple objects contained in different topic tags can be distributed adjacent to each other horizontally. If the sliding direction is horizontal, objects corresponding to different topic tags can be switched in the first classification area. The following is an exemplary description of multiple objects contained in different topic tags in the first classification area being distributed adjacent to each other horizontally.
[0158] Exemplarily, when the sliding direction is confirmed to be a preset direction (eg, horizontal), and the first sliding operation satisfies that the first sliding distance is greater than a preset length, the target object in the first classification area can be determined, and then the topic tag corresponding to the target object is determined as the target topic tag.
[0159] Exemplarily, the target topic tag may be determined according to the specific direction of the first sliding direction. For example, if the first sliding direction is to the left, and a topic tag to the right of the current topic tag exists, it may indicate that the user wishes to switch to the topic tag to the right of the current topic tag. For another example, if the first sliding direction is to the right, and a topic tag to the left of the current topic tag exists, it may indicate that the user wishes to switch to the topic tag to the left of the current topic tag.
[0160] For example, if the user slides leftward on the first category partition in the first channel page (the channel page corresponding to the fruit theme tag) for a sliding distance greater than a preset length; in response to the sliding operation, it can be determined that the user needs to switch to the channel page on the right side of the first channel page (the channel page corresponding to the grocery theme tag). Then, the grocery theme tag can be determined as the target theme tag, and the content of the channel page is switched to the product channel page corresponding to the grocery theme tag.
[0161] It is understandable that by judging the parameters in the first sliding operation and then determining the target topic tag, the switching of channel pages due to accidental touches by the user on the screen can be reduced.
[0162] It is understandable that the first mapping relationship can be used to associate each topic tag with the multiple objects it contains. In this way, it can be achieved that through any topic tag, the multiple objects it contains can be located without complicated traversal and search operations; when any topic tag is selected, it can quickly trigger the determination of the multiple objects contained in any topic tag; or when the content in the first classification area switches to the multiple objects contained in any topic tag, it can quickly trigger the determination that any topic tag switches to the target topic tag.
[0163] In an embodiment of the present application, the user's sliding intention is judged by combining the first sliding distance and the first sliding direction, the target object is determined, and the target topic tag is determined according to the target object, thereby improving the user's usage experience.
[0164] In a possible embodiment of the present application, the above S203 includes: displaying multiple target objects corresponding to the target topic tag in the first classification area; and displaying the target component at the target position in the first navigation area.
[0165] The target position is used to indicate that the target topic tag is selected.
[0166] Exemplarily, the target topic label in the first navigation area can be displayed as selected by the target position of the target component. For example, the target component can be highlighted, underlined, or framed. In this way, the user can be visually prompted with the currently selected target topic label.
[0167] It can be understood that visually indicating that the topic tag is in a selected state through the target component can help users understand the switching of channel pages, thereby further improving the user experience.
[0168] For example, Figures 3 to 5 As shown, the target component can be: by setting a horizontal line below the first navigation area; the target position can be: when displaying the channel page corresponding to the target theme tag (grocery shopping theme tag), the underline can be moved to the position below the target theme tag (grocery shopping theme tag) in the first navigation area.
[0169] Exemplarily, a second mapping relationship between the target component and the target topic label and / or the target topic label object can be obtained. The display position of the target component is determined by the second mapping relationship and the target topic label. As shown in Table 2, Table 2 is a corresponding relationship table of the second mapping relationship. It should be noted that Table 2 only provides an exemplary description of the content of the second mapping relationship, and does not limit the structure and content of the second mapping relationship.
[0170] Table 2
[0171] Take the target component as the horizontal line below the first navigation area as an example: Figures 3 to 5 As shown, when the objects in the first classification area include: cut fruits, watermelons and honeydew melons, peaches, plums, apricots, lychees and grapes, the fruit theme label is selected and the position of the target component is position 1; when the objects in the first classification area include: fresh vegetables, meat, poultry and eggs, aquatic products and seafood, grains, oils, rice and noodles, soy products, hot pot ingredients, cooked food, seasonal fruits, and sunny markets, the shopping theme label is selected and the position of the target component is position 2.
[0172] It should be explained that the dessert theme tag and the beverage theme tag are two theme tags under the dessert and beverage theme channel. In the first navigation area of the interface of the dessert and beverage theme channel, the position of the dessert theme tag can be the same as that of the fruit theme tag; the position of the beverage theme tag can be the same as that of the grocery theme tag.
[0173] For example, Figure 3 As shown in (b), Figure 4 As shown in (b), and Figure 5 As shown in (b) in the figure, after clicking on the shopping theme tag, the interface includes the first navigation area, the first classification area and the product display area. The shopping theme tag is displayed as selected in the first navigation area; the target objects corresponding to the shopping theme tag are displayed in the first classification area: fresh vegetables, meat, poultry and eggs, aquatic products and seafood, grains, oils, rice and noodles, bean products, hot pot ingredients, cooked food, seasonal fruits, and sunny vegetable markets; the product content of the shopping theme tag is displayed in the product display area.
[0174] In an embodiment of the present application, the content of the target topic tag can be displayed through the first navigation area and the first classification area of the second channel page, thereby improving the user experience.
[0175] In a possible embodiment of the present application, if the target electrical signal is a first sliding operation, the method provided by the embodiment of the present application also includes: obtaining a current position point during sliding on the first classification area; displaying multiple first objects in the first classification area based on the current position point; determining a first position in the first navigation area based on the distance between the current position point and the sliding starting point; and displaying the target component at the first position.
[0176] The current position point is any position point between the sliding start point and the sliding end point; the first object includes at least one target object and at least one object corresponding to the first topic tag.
[0177] Exemplarily, when the user performs a sliding operation on the first classification area, the position information of the sliding operation can be captured in real time, so that the real-time progress of the sliding operation can be reflected.
[0178] For example, the objects displayed in the first classification area may be determined according to the current location point; for example, a portion of objects corresponding to the first topic label and at least one target object corresponding to the target topic label. Figure 7 As shown: Figure 7 As shown in (a), multiple objects of the first topic label displayed in the first category area on the first channel page are displayed; at this time, the position of the finger in the first sliding operation is position A1 (i.e., the sliding starting point); the target component is displayed at position A2. Figure 7 As shown in (b) of FIG. 1 , during the sliding operation on the first classification area, when the current position of the finger is position B1, the first objects displayed in the first classification area are: peaches, plums, apricots, lychees, grapes, and fresh vegetables, meat, eggs, and poultry; at this time, the first position displayed by the target component is position B2. Figure 7 As shown in (c), during the sliding operation on the first classification area, when the current position point of the finger is position C1, the multiple first objects displayed in the first classification area are: lychees and grapes, as well as fresh vegetables, meat, eggs and poultry, and aquatic products and seafood; at this time, the first position displayed by the target component is position C2. Figure 7 (d) shows multiple target objects displayed in the first classification area on the second channel page; at this time, the position of the finger in the first sliding operation is position D1 (i.e., the sliding end point); the target component is displayed at position D2 (i.e., the target position).
[0179] In an embodiment of the present application, the display contents of the first classification area and the first navigation area may be updated in real time according to the first sliding operation, thereby improving the user experience.
[0180] In a possible embodiment of the present application, the above S202 includes: updating the height of the first category area in the second channel page to a first target height according to the number of target objects corresponding to the target topic tag; detecting that the height of the first category area has changed, and updating the height of the product display area in the second channel page to a second target height according to the first target height.
[0181] It should be understood that since the channel page includes multiple areas, such as the first navigation area, the first classification area and the product display area; when switching to the second channel page in response to the target electrical signal of the first channel page, the content of different areas on the page will change; in order to adapt to the changes in content, the height of each area can be adjusted.
[0182] As an example, since the number of multiple objects contained in different topic tags may be different, when switching channel pages, it is necessary to determine the first target height of the first classification area after switching based on the number of multiple target objects contained in the target topic tag after switching, so as to display all target objects contained in the target topic tag.
[0183] As another example, due to the screen limitation of the electronic device, the height of the entire interface is fixed; therefore, when the height of the first category area changes, the height of the product display area is adjusted to the second target height according to the new height of the first category area (ie, the first target height).
[0184] For example, Figures 3 to 5 As shown: In the first channel page corresponding to the fruit theme tag, the multiple first objects in the first classification area include: fruit cuts and fruit salad, watermelon and honeydew, peaches, plums, apricots, lychees and grapes; in the second channel page corresponding to the shopping theme tag, the multiple target objects in the first classification area include: fresh vegetables, meat, poultry and eggs, aquatic seafood, grains, oils, rice and noodles, soy products, hot pot ingredients, cooked food, seasonal fruits, and sunny markets. Since the number of target objects is greater than the number of first objects, when the first channel page is switched to the second channel page, the height of the first classification area can be increased so that all target objects can be displayed in the first classification area in the second channel page. Correspondingly, when the height of the first classification area in the second channel page increases, the height of the product display area in the second channel page decreases.
[0185] In an embodiment of the present application, when switching channel pages, the height of the first classification area and the height of the product display area are adjusted to adjust the layout of the channel page, improve the readability of the channel page, and thus improve the user experience.
[0186] In a possible embodiment of the present application, according to the number of target objects corresponding to the target topic tag, the height of the first category area in the second channel page is updated to the first target height, including: obtaining the number of target objects; determining the first target height according to the number of target objects and a preset value of the number; and updating the height of the first category area in the second channel page to the first target height.
[0187] Exemplarily, the specific numerical value of the preset quantity value may be preconfigured by the target application, may be preconfigured by the electronic device, or may be set manually, and the embodiments of the present application do not impose any specific limitation on this.
[0188] Exemplarily, the number of rows in the first classification area can be determined according to the number of target objects and the preset number value. For example, when the number of target objects is 9 and the preset number value is 5, the number of rows in the first classification area after switching can be determined to be 2; then, according to the number of rows in the first classification area after switching, the first target height of the first classification area is determined.
[0189] In the embodiment of the present application, the first target height can be quickly determined through the number of target objects and the preset value of the number, and the height unification of the first classification area on the unified channel page can be achieved, thereby improving the user experience.
[0190] In a possible embodiment of the present application, the method provided in the embodiment of the present application also includes: determining the target moving direction based on the initial height of the product display area in the first channel page and the second target height; controlling the product display area in the first channel page to move in the target moving direction to display the second channel page.
[0191] It should be understood that when switching channel pages, transition effects (such as sliding effects, fade-in and fade-out effects, etc.) can be used to control the movement of the product display area to make the page switching smoother and more natural.
[0192] Exemplarily, if the second target height is greater than the initial height, the target moving direction may be a downward direction in the vertical direction. If the second target height is less than the initial height, the target moving direction may be an upward direction in the vertical direction. If the second target height is equal to the initial height, the target moving direction does not move in the vertical direction.
[0193] Exemplarily, the horizontal moving direction of the commodity display area can be determined according to the sliding direction of the first sliding operation. For example, if the sliding direction of the first sliding operation is to the left, then the horizontal moving direction of the commodity display area is to the left.
[0194] Exemplarily, the moving angles of the target moving direction in the horizontal direction and the vertical direction can be determined through the initial height and the second target height; and then the target moving direction can be determined.
[0195] For example, Figure 7 As shown: Figure 7 The interface in (a) corresponds to the first channel page. In the process of switching the first channel page to the second channel page, the change process of the first classification area and the product display area can be a dynamic process. Figure 7 (b) and Figure 7 As shown in (c) in the figure: the product display area moves away from the target direction; until Figure 7 The interface shown in (d) corresponds to the second channel page.
[0196] In the embodiment of the present application, since the height of the product display area changes, the moving direction of the product display area on the first channel page can be controlled in combination with the animation effect to achieve smooth switching between channel pages, further improving the user experience.
[0197] In a possible embodiment of the present application, each topic tag has a first identifier; the above S202 includes: obtaining the product content of the target topic tag from the cloud according to the first identifier of the target topic tag; and displaying the content of the target topic tag on the second channel page.
[0198] Among them, the product display area includes product content of the target topic tag.
[0199] Exemplarily, each topic tag has a first identifier. The first identifier can be a string or a number, which is used to uniquely represent the corresponding topic tag. By assigning a unique first identifier to each topic tag, it is easy to identify which topic tag the user currently selects, and then perform corresponding operations.
[0200] Exemplarily, the product content of the target topic tag may include a store's picture, name, delivery distance, and / or the product's picture, name, price, description, and other information.
[0201] Exemplarily, the cloud may store product content with target theme tags; the product content of each target theme tag may be determined according to the user's address, the user's usage preference, etc. The electronic device may obtain product content with the same first identifier from the cloud according to the first identifier of the target theme tag.
[0202] In an embodiment of the present application, by assigning a unique first identifier to each topic tag, after the user selects the target topic tag, the corresponding product content can be quickly and accurately obtained from the cloud and displayed on the second channel page, further improving the user experience.
[0203] In a possible embodiment of the present application, the product display area is also used to display the product content of any object in the first classification area; after the above S202, the method provided by the embodiment of the present application also includes: if a second click operation on the first target object is detected, the product content of the first target object is displayed in the product display area of the second channel page.
[0204] Exemplarily, the first classification area on the second channel page includes multiple target objects (ie, category king Kong). Each target object is a subordinate concept for a target topic tag.
[0205] Exemplarily, the product display area can not only display the product content of the current target topic tag, but also display the product content of any target object in the first classification area.
[0206] Exemplarily, each object in the first classification area has a second identifier; displaying the product content of the first target object in the product display area of the second channel page includes: obtaining the product content of the first target object from the cloud according to the second identifier of the first target object; and displaying the product content of the first target object.
[0207] Exemplarily, the second identifier may be a string or a number, which is used to uniquely represent the corresponding object. By assigning a unique first identifier to each object, it is easy to identify which object the user currently selects, and then perform corresponding operations.
[0208] It can be understood that, through the second identifier of the first target object, the commodity content of the first target object can be quickly and accurately acquired, further improving the user experience.
[0209] For example, Figure 8 As shown in (a), interface 801 corresponds to the second channel page; the target theme tag selected in the first navigation area 8011 is the shopping theme tag. The multiple target objects in the first classification area 8012 include: fresh vegetables, meat, poultry and eggs, aquatic products and seafood, grains, oils, rice and noodles, soy products, hot pot ingredients, cooked food, seasonal fruits, and sunny markets. The user performs a second click operation on the meat, poultry and eggs (i.e., the first target object) in the first classification area 8012; in response to the second click operation, the product content of the meat, poultry and eggs is obtained from the cloud according to the second identifier of the meat, poultry and eggs; as shown in FIG. Figure 8 As shown in (b) in the figure, the product content of meat, poultry and eggs is displayed in the product display area 8023 of the interface 802.
[0210] In the embodiment of the present application, since the commodity display area can also display the commodity content of any target object, in this way, the user can further obtain the commodity content of interest to improve the user's use experience.
[0211] In a possible embodiment of the present application, the first classification area in the first channel page also includes: at least one second target object included in the target topic tag.
[0212] Among them, the second target object of any first category area is partially or completely displayed in the first category area in the first channel page of the first category area.
[0213] It is understandable that the first channel page corresponding to the first topic tag can also take into account the content of other topics, for example, the target objects contained in the target topic tag can be displayed in the first classification area; this can also improve the purchasing efficiency of users with different topic preferences; at the same time, it can also realize the diversion of cross-topic content, and without affecting the user's purchasing efficiency, it can also display product content of other topics to users.
[0214] For example, Figure 3 (a) in Figure 4 (a) or Figure 5 As shown in (a) in the figure: the first category area of the first channel page not only includes multiple objects corresponding to the first theme tag contained in the fruit theme tag (for example, fruit slices, watermelon and honeydew, peaches, plums, apricots, lychees and grapes); the first category area also displays a part of fresh vegetables.
[0215] In an embodiment of the present application, by also displaying objects contained in other topic tags in the first classification area, users can quickly understand that other topic tags are available for selection besides the current topic tag, thereby enhancing the navigability of the channel page and further improving the user experience.
[0216] In actual application scenarios, the Weex framework can be used to build a channel page, and the first navigation area, the first classification area, and the product display area can be encapsulated as independent tags. When the user switches the topic on the first channel page, the Switchtab event will be triggered. Since there are multiple switchtab switching scenarios (such as clicking on the target topic tag in the first navigation area; sliding on the first classification area; or sliding on the product display area), the first navigation area, the first classification area, and the product display area can be linked to achieve the switching of channel pages.
[0217] Fig. 9 FIG. 1 is a schematic flow chart of another page display method provided in an embodiment of the present application. Fig. 9 As shown, method 900 includes S901 to S915, and S901 to S915 are described in detail below.
[0218] For example, Fig. 9 As shown, the page display method 900 includes the following steps: S901. Configure a first mapping relationship.
[0219] As an example, a developer may establish a first mapping relationship based on a topic tag and an object contained in the topic tag; the electronic device obtains the first mapping relationship and may configure the first mapping relationship in a target application.
[0220] As another example, after the developer configures the first mapping relationship for the target application, the configured target application is published on the cloud, and the electronic device obtains and downloads the target application from the cloud.
[0221] S902. Start the home page interface of the target application on the electronic screen.
[0222] Optionally, in response to a user clicking on the target application on the interface of the electronic device, the home page interface of the target application may be started.
[0223] Exemplarily, the target application includes multiple theme channels. The home page interface includes controls for multiple theme channels. The target application can display a channel page of a theme channel in response to a user clicking on a control for a theme channel on the home page interface.
[0224] Exemplarily, the multiple theme channels may include: a food takeaway channel, a supermarket convenience channel, a flower gift channel, a fruit and vegetable shopping channel, a medicine shopping channel, a dessert and beverage channel, a hamburger and fried chicken channel, and a lobster barbecue channel, etc.
[0225] The following article introduces the theme channels using the fruit and grocery shopping channel as an example.
[0226] S903. In response to the user clicking the control of the fruit and vegetable shopping channel, the channel page A corresponding to the fruit and vegetable shopping channel is displayed.
[0227] Exemplarily, channel page A may default to the channel page corresponding to the fruit theme.
[0228] Exemplarily, the channel page corresponding to each theme channel (eg, channel page A) may include: a first navigation area, a first classification area, and a product display area.
[0229] Exemplarily, the first navigation area includes fruit and vegetable shopping related theme tags, such as fruit theme tags and vegetable shopping theme tags. The user can click on the theme tags in the first navigation area.
[0230] For example, the first classification area may include multiple objects of the fruit shopping theme; for example, multiple objects of the fruit theme include: fruit slices and fruit salad, watermelon and honeydew melon, peach, plum, apricot, lychee and grape. The user may slide the first classification area or click on an object in the first classification area.
[0231] For example, the product display area can be used to display product content corresponding to a fruit theme or a grocery theme. The product display area can also be used to display product content corresponding to a certain object. The user can slide the product display area; optionally, the user can also click on a product content in the product display area.
[0232] S904. Receive a target electronic signal from a user on channel page A.
[0233] Exemplarily, the target electrical signal on channel page A may be a click operation on a subject tag in the first navigation area; a sliding operation on the first category area; a click operation on an object in the first category area; or a sliding operation on the product display area.
[0234] In response to the target electrical signal, displaying channel page B may include the following processes: Exemplarily, the process of switching to channel page B may include: determining the selection state of the theme tag in the first navigation area; switching multiple objects in the first classification area; and switching at least one of the product contents in the product display area.
[0235] Exemplarily, the process of switching to channel page B may include: switching the subject channel to display channel page B of other subject channels.
[0236] S905. If the target electrical signal is a click operation 1 on the grocery shopping theme tag in the first navigation area, determine that the grocery shopping theme tag is the target theme tag.
[0237] S906. Determine multiple objects corresponding to the grocery shopping theme tag.
[0238] S907. Obtain the product content of the grocery shopping theme from the server.
[0239] Exemplarily, the product content of the grocery shopping theme can be obtained from the server according to the identification of the grocery shopping theme tag.
[0240] S908. Display the grocery shopping theme tag as selected in the first navigation area, display multiple objects corresponding to the grocery shopping theme in the first classification area, and display the product content of the grocery shopping theme in the product display area.
[0241] S909. If the target electrical signal is a sliding operation 1 on the first classification area, multiple objects are determined.
[0242] S910. Determine multiple objects and determine grocery shopping theme tags.
[0243] S911. Obtain the product content of the grocery shopping theme from the server.
[0244] Exemplarily, the product content of the grocery shopping theme can be obtained from the server according to the identification of the grocery shopping theme tag.
[0245] After S911 , S908 may be executed.
[0246] S912. If the target electrical signal is a sliding operation 2 on the first category area, switch to the channel page of the flower gift channel.
[0247] Exemplarily, the channel page of the switched flower gift channel may be a channel page corresponding to the gift theme.
[0248] S913. Display the product channel page corresponding to the gift theme tag.
[0249] S914. If the target electrical signal is a click operation 2 on the fruit cut and fruit pick in the first classification area, obtain the product content of the fruit cut and fruit pick from the server.
[0250] Exemplarily, the product content of the fruit slices and fruit salad can be obtained from the server according to the identification of the fruit slices and fruit salad.
[0251] S915. Switch the content of the product display area to the product content of fruit cutting and fruit picking.
[0252] In an embodiment of the present application, by establishing a first mapping relationship, the linkage between the first navigation area and the first classification area on the channel page can be achieved so as to quickly display the content of a certain topic tag; through the user's operation in any area of the fruit and vegetable shopping channel page, the channel page can be switched, and then the channel pages corresponding to different topic tags can be displayed to the user under a topic channel; based on this, the embodiment of the present application can switch the channel pages corresponding to different topic tags, thereby improving the user experience.
[0253] In an embodiment of the present application, through the linkage between the first navigation area and the first classification area, users can be supported to switch themes by clicking on the first navigation area, and users can be supported to switch themes by sliding the first classification area; at the same time, users with different theme preferences can focus on the product content provided by the theme in the same theme channel, and can also switch to other themes smoothly; therefore, the embodiment of the present application can improve the user experience.
[0254] It should be understood that the above examples are intended to help those skilled in the art understand the embodiments of the present application, rather than to limit the embodiments of the present application to the specific numerical values or specific scenarios illustrated. Those skilled in the art can obviously make various equivalent modifications or changes based on the above examples, and such modifications or changes also fall within the scope of the embodiments of the present application.
[0255] Combination of the above Figures 2 to 9 The page display method provided by the embodiment of the present application is described in detail; Fig.10 and Fig.11The device embodiments of the present application are described in detail. It should be understood that the device in the embodiments of the present application can execute the various methods of the aforementioned embodiments of the present application, that is, the specific working processes of the following various products can refer to the corresponding processes in the aforementioned method embodiments.
[0256] Fig.10 1 is a schematic diagram of a page display device provided in an embodiment of the present application, wherein the device 1000 includes a display module 1010 and a determination module 1020 .
[0257] The display module 1010 is used to display a first channel page on an electronic screen; wherein the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a product channel page of a first theme tag among the at least two theme tags; A determination module 1020 is configured to determine a target topic tag according to the target electrical signal if a target electrical signal generated by a touch operation on the electronic screen is detected; The display module 1010 is used to display the second channel page on the electronic screen; wherein the second channel page is the product channel page corresponding to the target topic tag.
[0258] In conjunction with the second aspect, in some implementations of the second aspect, the determining module 1020 is specifically configured to: According to gesture recognition technology, the touch type and touch area of the target electrical signal are determined; if the touch type of the target electrical signal is a first click operation and the touch area is a first navigation area, the target subject label is determined according to the touch position point of the first click operation; if the touch type of the target electrical signal is a first sliding operation and the touch area is a first classification area, the target subject label is determined according to the first sliding parameter of the first sliding operation.
[0259] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module 1020 is specifically configured to: Determine whether a first sliding distance is greater than a preset length; wherein the first sliding distance is the distance between a sliding start point and a sliding end point in a first sliding parameter; if the first sliding distance is greater than the preset length, determine a plurality of target objects in a first classification area according to a first sliding direction; obtain a first mapping relationship; wherein the first mapping relationship is used to represent a mapping relationship between each topic tag and an object corresponding to each topic tag; and according to the first mapping relationship and a plurality of target objects, determine the topic tags corresponding to the plurality of target objects as target topic tags.
[0260] In combination with the second aspect and the above-mentioned implementation methods, in some implementation methods of the second aspect, the device also includes: an acquisition module, used to obtain a first mapping relationship; wherein the first mapping relationship is used to represent the mapping relationship between each of the subject tags and the object corresponding to each of the subject tags.
[0261] In conjunction with the second aspect, in some implementations of the second aspect, the determining module 1020 is specifically configured to: According to the first mapping relationship and the target topic tag, a target object corresponding to the target topic tag is determined.
[0262] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module 1010 is specifically configured to: Display multiple target objects corresponding to the target topic label in the first classification area; display the target component at the target position in the first navigation area; wherein the target position is used to indicate that the target topic label is in a selected state.
[0263] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module 1020 is specifically configured to: During sliding on the first classification area, the current position point is obtained; the current position point is any position point between the sliding start point and the sliding end point; according to the current position point, multiple first objects are displayed in the first classification area; the first objects include at least one target object and at least one object corresponding to the first theme tag; according to the distance between the current position point and the sliding start point, the first position in the first navigation area is determined; and the target component is displayed at the first position.
[0264] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module 1020 is specifically configured to: If the touch type of the target electrical signal is the second sliding operation, and the touch area of the target electrical signal is the product display area, the target theme tag is determined according to the second sliding parameter of the second sliding operation.
[0265] In combination with the second aspect and the above implementations, in some implementations of the second aspect, the apparatus further includes: an updating module, configured to: According to the number of target objects corresponding to the target topic tag, the height of the first category area in the second channel page is updated to the first target height; when it is detected that the height of the first category area has changed, the height of the product display area in the second channel page is updated to the second target height according to the first target height.
[0266] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the update module is specifically configured to: The number of target objects is obtained; a first target height is determined according to the number of target objects and a preset value of the number; and a height of a first classification area in a second channel page is updated to the first target height.
[0267] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the determining module is specifically configured to: The target moving direction is determined according to the initial height of the product display area in the first channel page and the second target height.
[0268] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: Control the product display area in the first channel page to move in the target moving direction to display the second channel page.
[0269] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: According to the first identifier of the target theme tag, the product content of the target theme tag is obtained from the cloud; and the product content of the target theme tag is displayed in the product display area on the second channel page.
[0270] In combination with the second aspect and the foregoing implementations, in some implementations of the second aspect, the display module is specifically used to: If a second click operation on the first target object is detected, the product content of the first target object is obtained from the cloud according to the second identifier of the first target object; and the product content of the first target object is displayed in the product display area on the second channel page.
[0271] It should be noted that the page display device 1000 is implemented in the form of a functional unit. The term "module" here can be implemented in the form of software and / or hardware, and is not specifically limited to this.
[0272] For example, a "module" may be a software program, a hardware circuit, or a combination of the two that implements the above functions. The hardware circuit may include an application specific integrated circuit (ASIC), an electronic circuit, a processor (such as a shared processor, a dedicated processor, or a group processor, etc.) and a memory for executing one or more software or firmware programs, a combined logic circuit, and / or other suitable components that support the described functions.
[0273] Therefore, the units of each example described in the embodiments of the present application can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present application.
[0274] Fig.11 A structural schematic diagram of an electronic device provided by the present application is shown. Fig.11 The dotted line in indicates that the unit or the module is optional. The electronic device 1100 can be used to implement the page display method described in the above method embodiment.
[0275] Exemplarily, the electronic device 1100 includes one or more processors 1101, which can support the electronic device 1100 to implement the page display method in the method embodiment. The processor 601 can be a general-purpose processor or a special-purpose processor. For example, the processor 1101 can be a processor (central processing unit, CPU), a digital signal processor (digital signal processor, DSP), an application specific integrated circuit (application specific integrated circuit, ASIC), a field programmable gate array (field programmable gate array, FPGA) or other programmable logic devices, such as discrete gates, transistor logic devices or discrete hardware components.
[0276] Exemplarily, the processor 1101 may be used to control the electronic device 1100, execute software programs, and process data of the software programs. The electronic device 1100 may also include a communication unit 1105 to implement input (reception) and output (transmission) of signals.
[0277] For example, the electronic device 1100 may be a chip, the communication unit 1105 may be an input and / or output circuit of the chip, or the communication unit 1105 may be a communication interface of the chip, and the chip may be a component of a terminal device or other electronic devices.
[0278] For another example, the electronic device 1100 may be a terminal device, and the communication unit 1105 may be a transceiver of the terminal device, or the communication unit 1105 may be a transceiver circuit of the terminal device.
[0279] Exemplarily, the electronic device 1100 may include one or more memories 1102 on which a program 1104 is stored. The program 1104 can be executed by the processor 1101 to generate instructions 1103, so that the processor 1101 executes the method described in the above method embodiment according to the instructions 1103.
[0280] Optionally, data may be stored in the memory 1102. Optionally, the processor 1101 may read data stored in the memory 1102. The data may be stored at the same storage address as the program 1104, or may be stored at a different storage address than the program 1104.
[0281] Exemplarily, the processor 1101 and the memory 1102 may be provided separately or integrated together, for example, integrated on a system on chip (SOC) of the electronic device.
[0282] Exemplarily, the memory 1102 can be used to store the relevant program 1104 of the page display method provided in the embodiment of the present application, and the processor 1101 can be used to call the relevant program 1104 of the page display method stored in the memory 1102 when generating a poster to execute the page display method of the embodiment of the present application.
[0283] The present application also provides a computer program product, which, when executed by the processor 1101, implements the method described in any method embodiment of the present application.
[0284] The computer program product may be stored in the memory 1102 , for example, a program 1104 , which is converted into an executable target file that can be executed by the processor 1101 after preprocessing, compiling, assembling, and linking.
[0285] The present application also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a computer, the method described in any method embodiment of the present application is implemented. The computer program can be a high-level language program or an executable target program.
[0286] The computer-readable storage medium is, for example, a memory 1102. The memory 1102 may be a volatile memory or a nonvolatile memory, or the memory 1102 may include both a volatile memory and a nonvolatile memory. The nonvolatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), and direct rambus RAM (DR RAM).
[0287] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described devices and equipment and the technical effects produced can refer to the corresponding processes and technical effects in the aforementioned method embodiments, and will not be repeated here.
[0288] In several embodiments provided in the present application, the disclosed systems, devices and methods can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not performed. The device embodiments described above are merely schematic, and the division of units is only a logical function division. There may be other division methods in actual implementation, and multiple units or components may be combined or integrated into another system. In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the above coupling includes electrical, mechanical or other forms of connection.
[0289] It should be understood that in the various embodiments of the present application, the size of the serial number of each process does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.
[0290] In addition, the terms "system" and "network" are often used interchangeably in this article. The term "and / or" in this article is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.
[0291] In short, the above is only a preferred embodiment of the technical solution of this application, and is not intended to limit the protection scope of this application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of this application should be included in the protection scope of this application.
Claims
1. A page display method, It is characterized in that The method comprises: Displaying a first channel page on the electronic screen; wherein the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a product channel page of the first theme tag among the at least two theme tags; If a target electrical signal generated by a touch operation on the electronic screen is detected, a target subject tag is determined according to the target electrical signal; A second channel page is displayed on the electronic screen; wherein the second channel page is a product channel page corresponding to the target topic tag.
2. The method according to claim 1, It is characterized in that The step of determining a target topic tag according to the target electrical signal comprises: Determining the touch type of the target electrical signal and the touch area of the target electrical signal according to gesture recognition technology; If the touch type of the target electrical signal is a first click operation, and the touch area is the first navigation area, the target topic tag is determined according to the touch position point of the first click operation; If the touch type of the target electrical signal is a first sliding operation, the touch area is a first classification area of the first channel page, and the target topic tag is determined according to a first sliding parameter of the first sliding operation.
3. The method according to claim 2, It is characterized in that The first classification area is used to display the object corresponding to each of the subject tags; The determining the target topic tag according to the first sliding parameter of the first sliding operation includes: Determine whether a first sliding distance is greater than a preset length; wherein the first sliding distance is the distance between a sliding start point and a sliding end point in the first sliding parameter; If the first sliding distance is greater than the preset length, determining a plurality of target objects in the first classification area according to the first sliding direction; Acquire a first mapping relationship; wherein the first mapping relationship is used to represent a mapping relationship between each of the subject tags and an object corresponding to each of the subject tags; According to the first mapping relationship and the multiple target objects, the topic tags corresponding to the multiple target objects are determined as the target topic tags.
4. The method according to claim 2, It is characterized in that Determining the target topic tag according to a first sliding parameter of the first sliding operation; the method further includes: Acquire a first mapping relationship; wherein the first mapping relationship is used to represent a mapping relationship between each of the subject tags and an object corresponding to each of the subject tags; According to the first mapping relationship and the target topic tag, a target object corresponding to the target topic tag is determined.
5. The method according to claim 3 or 4, It is characterized in that The second channel page includes the first navigation area and the first classification area; The step of displaying the second channel page on the electronic screen comprises: Displaying a plurality of target objects corresponding to the target topic tag in the first classification area; The target component is displayed at a target position in the first navigation area; wherein the target position is used to indicate that the target topic tag is in a selected state.
6. The method according to claim 5, It is characterized in that If the target electrical signal is the first sliding operation, the method further includes: During the sliding process on the first classification area, a current position point is obtained; the current position point is any position point between the sliding start point and the sliding end point; According to the current location point, a plurality of first objects are displayed in the first classification area; the first objects include at least one of the target objects and at least one object corresponding to the first topic tag; Determining a first position in the first navigation area according to a distance between the current position point and the sliding start point; The target component is displayed at the first position.
7. The method according to claim 5, It is characterized in that The first channel page also includes: a product display area; The step of determining a target topic tag according to the target electrical signal comprises: If the touch type of the target electrical signal is a second sliding operation, and the touch area of the target electrical signal is the product display area, the target theme tag is determined according to a second sliding parameter of the second sliding operation.
8. The method according to claim 7, It is characterized in that The step of displaying the second channel page on the electronic screen comprises: According to the number of target objects corresponding to the target topic tag, updating the height of the first classification area in the second channel page to a first target height; It is detected that the height of the first classification area has changed, and based on the first target height, the height of the product display area in the second channel page is updated to a second target height.
9. The method according to claim 8, It is characterized in that The updating, according to the number of target objects corresponding to the target topic tag, of the height of the first classification area in the second channel page to a first target height includes: Obtaining the number of target objects; Determining the first target height according to the number of the target objects and a preset number value; The height of the first category area in the second channel page is updated to the first target height.
10. The method according to claim 9, It is characterized in that The method further comprises: determining a target moving direction according to an initial height of the product display area in the first channel page and the second target height; Control the commodity display area in the first channel page to move in a target moving direction to display the second channel page.
11. The method according to claim 7, It is characterized in that The commodity display area is used to display the commodity content of each of the theme tags; each of the theme tags has a first identifier; The step of displaying the second channel page on the electronic screen comprises: According to the first identifier of the target theme tag, obtaining the product content of the target theme tag from the cloud; The product display area in the second channel page displays product content of the target topic tag.
12. The method according to claim 7, It is characterized in that Each of the objects in the first classification area has a second identifier; the commodity display area is used to display the commodity content of any of the objects in the first classification area; After displaying the second channel page on the electronic screen, the method further includes: If a second click operation on the first target object is detected, obtaining product content of the first target object from the cloud according to the second identifier of the first target object; The product display area in the second channel page displays the product content of the first target object.
13. The method according to claim 5, It is characterized in that The first classification area in the first channel page also includes: at least one second target object contained in the target topic tag; any second target object is partially or fully displayed in the first classification area in the first channel page.
14. A page display device, It is characterized in that The device comprises: The display module is used to display a first channel page on an electronic screen; wherein the first channel page includes a first navigation area; the first navigation area includes at least two theme tags; the first channel page is a commodity channel page of a first theme tag among the at least two theme tags; a determination module, configured to determine a target subject tag according to the target electrical signal if a target electrical signal generated by a touch operation on the electronic screen is detected; The display module is used to display a second channel page on the electronic screen; wherein the second channel page is a product channel page corresponding to the target theme tag.
15. An electronic device, It is characterized in that include: A memory for storing executable program codes; A processor, configured to call and run the executable program code from the memory, so that the electronic device executes the method as claimed in any one of claims 1 to 13.
16. A computer-readable storage medium, It is characterized in that The computer-readable storage medium stores computer instructions, and when the computer instructions are executed on an electronic device, the electronic device executes the method according to any one of claims 1 to 13.
17. A computer program product, It is characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 13.
Citation Information
Patent Citations
Page navigation method and device, memory allocation method and device
CN108153588A
Live broadcast room display control method, electronic equipment and storage medium
CN111782101A
Label switching method and device, electronic equipment and storage medium
CN114510189A
Encyclopedia information display method and device, equipment and medium
CN114564645A
Page display method and device, equipment, medium and program product
CN114880606A
Cited By
Method and device for loading platform online resources
CN121614197A
