Navigation bar display method and device, electronic equipment and storage medium

Abstract

The invention discloses a navigation bar display method and device, electronic equipment and a storage medium, and the method comprises the steps: if a selection operation for a target tag is detected, determining a target tag content position corresponding to the target tag based on a corresponding relation between the tag and the tag content position, the label content of each label is arranged in the same target page according to a preset sequence; and skipping the target page to the position of the target label content to display the label content of the target label. According to the scheme, the label contents of all the labels are placed in one target page, only one page needs to be created and maintained, and development and maintenance resources of the page are greatly saved.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and in particular relates to a method, device, electronic device and storage medium for displaying a navigation bar. Background Art

[0002] LVGL (Light and Versatile Graphics Library) system framework provides a series of controls and graphic effects, including but not limited to buttons, labels, lists, and graphic effects including but not limited to animation, gradients, and shadows. LVGL can be used to build various complex graphical interfaces.

[0003] The tabview component in LVGL can realize the interaction between the navigation bar and the content. Clicking the corresponding tab label will jump to the corresponding content page. In the related art, each label of the navigation bar corresponds to its own content page, and the development and maintenance of the content page requires more resources. Summary of the invention

[0004] In view of the above technical problems in the related art, an embodiment of the present invention provides a method, device, electronic device and storage medium for displaying a navigation bar to save page development and maintenance resources.

[0005] In a first aspect, an embodiment of the present invention provides a method for displaying a navigation bar, comprising:

[0006] If a selection operation for a target tag is detected, a target tag content position corresponding to the target tag is determined based on a correspondence between the tag and the tag content position, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order;

[0007] Jump the target page to the target tag content position to display the tag content of the target tag.

[0008] In some implementations, the target page is constructed in the following manner:

[0009] Create a page container;

[0010] Creating a target module for each tag based on the switching mode of the tag content;

[0011] Based on the switching mode, the preset order is determined, and the target modules of each tag are arranged in the page container according to the preset order to form the target page.

[0012] In some implementations, the correspondence between the tag and the tag content position is obtained by the following steps:

[0013] For each tag, determine the module position of the target module of the tag in the target page, and use the module position as the tag content position of the tag;

[0014] Each tag is associated with a corresponding tag content position to establish a corresponding relationship between the tag and the tag content position.

[0015] In some implementations, based on the switching mode, determining the preset order, and arranging the target modules of each tag in the page container according to the preset order includes:

[0016] If the switching mode is horizontal switching, determining that the preset order is a left-right order, and arranging the target modules of each tag in the page container in a left-right order;

[0017] If the switching mode is vertical switching, the preset order is determined to be a vertical order, and the target modules of each tag are arranged in the page container in a vertical order.

[0018] In some implementations, if the switching mode is horizontal switching, the switching mode based on the tag content, creating a target module for each tag, includes:

[0019] Determine the size of the target module, wherein the size of the target module is the same as the size of a preset label content display area;

[0020] For each tag, the tag information of the tag and the tag content of the tag are added to the corresponding target module.

[0021] In some implementations, if the switching mode is vertical switching, the switching mode based on the tag content, creating a target module for each tag, includes:

[0022] Determining the size of the target module based on the size of the screen displaying the navigation bar;

[0023] For each tag, the tag information of the tag is added to the corresponding target module.

[0024] In some embodiments, the method further comprises:

[0025] Creating a content module for each tag, and adding the tag content of each tag to the corresponding content module;

[0026] For each tag, the content module of the tag is inserted below the target module of the tag.

[0027] In some implementations, jumping the target page to the target tag content location includes:

[0028] The target page is jumped to the target tag content position by scrolling the page.

[0029] In a second aspect, an embodiment of the present invention provides a method for displaying a navigation bar, comprising:

[0030] If a sliding operation on the label content display area is detected, determining a first position of a first display content relative to a target page and a sliding distance of the sliding operation, wherein the first display content is the label content displayed on the display screen before the sliding operation;

[0031] Based on the first position and the sliding distance, determining a second position of second display content relative to the target page, the second display content being label content displayed on the display screen after the sliding operation;

[0032] Based on the correspondence between the label and the label content position, determine the target label corresponding to the second position, and switch the label of the navigation bar to the target label;

[0033] The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

[0034] In a third aspect, an embodiment of the present invention provides a display device for a navigation bar, including:

[0035] a content position determination module, configured to determine a target tag content position corresponding to the target tag based on a correspondence between the tag and the tag content position if a selection operation for the target tag is detected, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order;

[0036] The jump module is used to jump the target page to the target tag content position to display the tag content of the target tag.

[0037] In a fourth aspect, an embodiment of the invention provides a display device for a navigation bar, comprising:

[0038] A first determination module is used to determine a first position of a first display content relative to a target page and a sliding distance of the sliding operation if a sliding operation on a label content display area is detected, wherein the first display content is the label content displayed on the display screen before the sliding operation;

[0039] A second determination module, configured to determine a second position of second display content relative to the target page based on the first position and the sliding distance, wherein the second display content is a label content displayed on the display screen after the sliding operation;

[0040] A switching module, configured to determine a target tag corresponding to the second position based on a correspondence between the tag and the tag content position, and switch the tag of the navigation bar to the target tag;

[0041] The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

[0042] In a fifth aspect, an embodiment of the present invention provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any step of the above-mentioned method for displaying a navigation bar when executing the program.

[0043] In a sixth aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements any step of the above-mentioned method for displaying a navigation bar.

[0044] One or more technical solutions provided by the embodiments of the present invention achieve at least the following technical effects or advantages:

[0045] The display method of the navigation bar provided in the embodiment of this specification, if a selection operation for a target tag in the navigation bar is detected, determines the target tag content position corresponding to the target tag based on the correspondence between the tag and the tag content position, wherein the tag content of each tag is arranged in the same target page according to a preset order; jumps the target page to the target tag content position to display the tag content of the target tag. The above scheme places the tag content of all tags in one target page, and only one page needs to be created and maintained, which greatly saves page development and maintenance resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0047] Figure 1 A schematic diagram of a display method of a label and label content in the related art;

[0048] Figure 2A flowchart of a method for displaying a navigation bar provided in an embodiment of this specification;

[0049] Figure 3 A schematic diagram of displaying label content in a horizontal switching mode provided in an embodiment of this specification;

[0050] Figure 4 A schematic diagram of displaying label content in a vertical switching mode provided in an embodiment of this specification;

[0051] Figure 5 A flowchart of implementing navigation bar label switching based on LVGL components provided in an embodiment of this specification;

[0052] Figure 6 A flowchart of another method for displaying a navigation bar provided in an embodiment of this specification;

[0053] Figure 7 A schematic diagram of a display device for a navigation bar provided in an embodiment of this specification;

[0054] Figure 8 A schematic diagram of another navigation bar display device provided in an embodiment of this specification;

[0055] Fig. 9 A schematic diagram of an electronic device provided in an embodiment of this specification. DETAILED DESCRIPTION

[0056] The embodiments of the present specification provide a method, device, electronic device and storage medium for displaying a navigation bar, the method comprising: if a selection operation for a target tag is detected, based on the correspondence between the tag and the tag content position, determining a target tag content position corresponding to the target tag, wherein the navigation bar comprises a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order; jumping the target page to the target tag content position to display the tag content of the target tag.

[0057] The solution in the embodiment of this specification places the tag contents of all tags in one target page, and only one page needs to be created and maintained, which greatly saves page development and maintenance resources.

[0058] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution in the embodiment of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiment of the present invention. Obviously, the described embodiment is only a part of the embodiment of the present invention, not all the embodiments. Based on the embodiment of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0059] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0060] In order to better understand this solution, the following describes the tab page switching method in the related art. Figure 1 As shown in the figure, it is a display method of labels and label contents in a navigation bar created by using a tabview component in the related art. Figure 1 In the navigation bar created by the tabview component, there are three tabs, namely tab1, tab2 and tab3, and a corresponding content page is created for each tab. When a tab is selected, it jumps to the content page corresponding to the tab for display. For example, when the user selects tab1, it jumps to the first content page corresponding to tab1, and when the user selects tab2, it switches to the second page corresponding to tab2. It should be noted that since the content page must be switched accordingly when the user switches tabs, it is easy for the corresponding content page to not load in time after switching tabs, resulting in a long loading time or loading failure of the content page, thus affecting the user experience.

[0061] In addition, the existing LVGL architecture does not support vertical switching of label content.

[0062] In order to solve the above problems, the present specification provides a flowchart of a method for displaying a navigation bar, as shown in FIG. Figure 2 As shown, the method comprises the following steps:

[0063] Step S201: if a selection operation for a target tag is detected, a target tag content position corresponding to the target tag is determined based on a correspondence between the tag and the tag content position, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order;

[0064] Step S202: Jump the target page to the target tag content position to display the tag content of the target tag.

[0065] The method provided in the embodiments of this specification can be applied to electronic devices with display screens, for example, mobile phones, tablet computers, touch screens of electrical equipment, wire controllers with display functions, etc., without limitation here.

[0066] In step S201, the navigation bar includes multiple labels, and each label corresponds to its own label content. For example, in the control scenario of smart home appliances, a navigation bar can be displayed on the screen of a wire controller or a central control device used to control various electrical appliances in the environment. For example, the navigation bar includes three labels, namely, environmental adjustment, other functions, and associated devices. Among them, the label content corresponding to the environmental adjustment label includes parameters such as water temperature, indoor target temperature, wind direction, and wind feeling. The label content corresponding to other function labels includes functional options such as sleep and sterilization. The label content corresponding to the associated devices includes the device status of fresh air fans, central air conditioners and other equipment. It should be noted that the specific label content of each label can be set according to actual needs and is not limited here.

[0067] In the embodiment of the present specification, the label contents of each label on the navigation bar are all located in the same target page, and the label contents of each label can be arranged on the target page according to a preset order. When the label contents are switched horizontally, the preset order can be a left-right order, that is, the label contents of each label are arranged on the target page in a left-right order; when the label contents are switched vertically, the preset order can be a top-bottom order, that is, the label contents of each label are arranged on the target page in a top-bottom order.

[0068] In order to locate the tag content, in the embodiments of this specification, the position of the tag content on the target page can be saved or calculated, so as to establish a corresponding relationship between the tag and the tag content. When the user's selection operation on the target tag is detected, the corresponding relationship can be directly queried to obtain the target tag content position where the tag content of the target tag is located.

[0069] It should be noted that the position of the tag content on the target page can be obtained in a variety of ways. In some embodiments, the coordinates of the tag content of each tag on the target page can be directly used as the tag content position. In other embodiments, when switching vertically, the tag content position can be determined according to the number of rows of the tag content of each tag.

[0070] In step S202, after obtaining the target tag content position associated with the target tag, the target page can be jumped to the target tag content position. In some embodiments, the target page can be jumped to the target tag content position by scrolling the page, for example, in LVGL, the target tag content position can be jumped to by the scroll to method, so as to display the tag content of the target tag.

[0071] In order to better understand the solution provided in the embodiments of this specification, the construction process of the target page is described below. The target page can be constructed in the following manner: creating a page container; creating a target module for each tag based on the switching method of the tag content; determining the preset order based on the switching method, and arranging the target modules of each tag in the page container according to the preset order to form the target page.

[0072] Specifically, a page container can be created based on the LVGL architecture, and the size of the page container can be consistent with the screen size of the device displaying the navigation bar. Further, a target module is created for each tag, wherein the specific creation method of the target method can also be different depending on the switching method of the tag content. The following describes the creation process of the target module by taking the horizontal switching method and the vertical switching method as examples.

[0073] 1. The switching mode is horizontal switching

[0074] The process of creating a target module may be: determining the size of the target module, wherein the size of the target module is the same as the size of a preset label content display area; for each label, adding the label information of the label and the label content of the label to the corresponding target module.

[0075] Specifically, when the switching mode is horizontal switching, the label contents of different labels can be switched by horizontal sliding. Figure 3 The figure shows a schematic diagram of displaying the label content switched horizontally in the embodiment of this specification. Figure 3 In the case of an electronic device displaying a navigation bar and its label content, the navigation bar is displayed at the top of the screen. Figure 3 The navigation bar shown includes three tabs, namely environment adjustment, other functions and related devices. Below the navigation bar is the preset tab content display area.

[0076] Since horizontal switching is achieved by sliding left and right to display different label contents, when a label is selected, in order to ensure that the label contents of the selected label are displayed in the preset label content display area, and to avoid interference from other label contents, the label contents of other labels can be set not to be displayed in the preset label content display area. Therefore, when creating the target module for each label, the size of each target module can be set to be the same as the size of the preset label content display area. In this way, it can be ensured that after a label is selected, only the label contents of the label are displayed in the preset label content display area.

[0077] In the embodiment of this specification, the preset label content display area is the area where the label content is displayed on the current device, and the preset label content display area can be set according to actual conditions. Figure 3 The preset tab content display area shown can be the screen area minus the navigation bar portion, so the preset tab content display area size can be the screen size minus the navigation bar size. Of course, depending on the preset tab content display area, the size of the target module will also change accordingly.

[0078] After determining the size of the target module, a target module is created for each label. For the horizontal switching mode, the size of the blank module of each label is the same. The target module can be blank initially so that information can be added later as needed. In some embodiments, the label information and label content of the label can be added to the target module.

[0079] The display parameters of the target module can also be set according to actual needs. For example, the background color of the target module can be set to the same color as the page background color, and the label information can be hidden as needed.

[0080] Furthermore, when the switching mode is horizontal switching, the preset order is determined to be a left-right order, and the target modules of each label are arranged in the page container in a left-right order. Each target module can be arranged in the page container from left to right according to the label arrangement order of the navigation bar. That is, Figure 3 As shown, the labels of the navigation bar are environment adjustment, other functions, and associated devices from left to right. The target modules corresponding to environment adjustment, other functions, and associated devices can be arranged in the page container in order from left to right. Of course, the target modules can also be arranged left and right in other orders, which is not limited here.

[0081] 2. The switching mode is vertical switching

[0082] The process of creating the target module may be: determining the size of the target module based on the size of the screen displaying the navigation bar; and for each tag, adding the tag information of the tag to the corresponding target module.

[0083] Specifically, when the switching mode is vertical switching, the label contents of different labels can be switched by vertical sliding. Figure 4 , which is a schematic diagram showing the display of the label content switched vertically in the embodiment of this specification. Figure 4 In the case of an electronic device displaying a navigation bar and its label content, the navigation bar is displayed at the top of the screen. Figure 4 The navigation bar shown includes three tabs, namely, environment adjustment, other functions, and associated devices.

[0084] Since vertical switching is achieved by sliding up and down to display the contents of different labels, the label contents of different labels can be set to be arranged up and down. In an embodiment of the present specification, when creating a target module for a label that switches vertically, the size of the target module can be determined based on the screen size. For example, the width of the target module is the same as the width of the screen, and the height of the target module is 1 / 8 of the height of the screen. Of course, the size of the target module can also be set to other values, which are not limited here. After determining the size of the target module, a target module can be created for each label. The target module can be blank initially so that information can be added later as needed.

[0085] In some embodiments, both the tag information and the tag content of the tag may be added to the corresponding target module.

[0086] In other embodiments, the tag information of the tag can be added to the corresponding target module, and the specific tag content can be realized by adding a content module. The specific implementation process can be: creating a content module for each tag, and adding the tag content of each tag to the corresponding content module; for each tag, inserting the content module of the tag below the target module of the tag.

[0087] Specifically, the size of the content module of each tag can be determined according to the amount of content added. For example, when more content is added, the corresponding content module size can be set larger, and when less content is added, the corresponding content module size can be set smaller. The size of the content module can be adaptively adjusted according to the amount of content, or the size of the content module can be set to a fixed size, which is not limited here.

[0088] by Figure 4 For example, for label other functions, add label information in the target module, that is, fill in "other information" in the target module, and add various functions and function icons in the content module, including unattended energy saving, sleep, strong, etc. It should be noted that the display parameters of the target module and the content module can be set according to actual needs. For example, the background color of the target module can be set to the same color as the page background color, and the target module can also be hidden as needed.

[0089] Furthermore, when the switching mode is vertical switching, the preset order is determined to be a vertical order, and the target modules of each label are arranged in the page container in a vertical order. Each target module can be arranged in the page container from top to bottom according to the label arrangement order of the navigation bar. That is, Figure 4As shown, the labels of the navigation bar are environment adjustment, other functions, and associated devices from left to right. The target modules corresponding to environment adjustment, other functions, and associated devices can be arranged in the page container in order from top to bottom. Of course, the target modules can also be arranged left and right in other orders, which is not limited here.

[0090] In the embodiments of the present specification, a correspondence between a tag and a tag content can be formed in the process of constructing the target page. The specific implementation method can be: for each tag, determine the module position of the target module of the tag in the target page, and use the module position as the tag content position of the tag; associate each tag with the corresponding tag content position to construct a correspondence between the tag and the tag content position.

[0091] In some embodiments, since the target modules are arranged in a left-right order when switching horizontally, the horizontal coordinate of each target module can be recorded, and the horizontal coordinate of each target module can be used as the label content position of the corresponding label. When switching vertically, the target modules are arranged in a top-bottom order, so the vertical coordinate of each target module can be recorded, and the vertical coordinate of each target module can be used as the label content position of the corresponding label. Then, each label is associated with the corresponding label content position to establish a corresponding relationship between the label and the label content position.

[0092] In the embodiments of the present specification, when it is detected that a user clicks on a label of the navigation bar, the target page can be quickly slid to jump to the position of the target module corresponding to the label to display the label content of the label. In addition, when the user slides the target page where the label content is located, the label of the navigation bar will also switch according to the sliding operation. For example, when the user slides the target page horizontally, the sliding distance is recorded, and the label content currently displayed on the screen is determined based on the sliding distance and the label content position of each label, and the navigation bar is switched to the label corresponding to the currently displayed label content.

[0093] In order to better illustrate the solution provided by the embodiments of this specification, the following takes the label including environment adjustment, other functions, and associated devices as an example to illustrate the process of implementing navigation bar label switching based on LVGL components. Figure 5 As shown, the process includes the following steps:

[0094] Step S501: create a page container of the same screen size;

[0095] Step S502: adding a navigation bar;

[0096] For example, add an "Environment Adjustment" tab and set it in the upper left corner of the screen; add an "Other Functions" tab and set it on the right side of the "Environment Adjustment" tab; add an "Associated Devices" tab and set it on the right side of the "Other Functions" tab.

[0097] Step S503: If it is a horizontal switch, add blank modules to the page container according to the number of tabs, and the module size is the screen size minus the navigation bar part; set the modules to be arranged left and right; establish the corresponding relationship between tabs and modules;

[0098] Step S504: If it is a vertical switch, add blank modules to the page container according to the number of tabs, set the module size; set the modules to be arranged vertically; establish the corresponding relationship between tabs and modules; other sub-modules can be added between modules;

[0099] The module size can be determined according to the UI design, such as setting the module height to 1 / 8 of the screen height.

[0100] Step S505: Calculate the position of the module;

[0101] If it is a horizontal switch, the horizontal coordinate of the module is calculated as the position of the module; if it is a vertical switch, the vertical coordinate of the module is calculated as the position of the module.

[0102] Step S506: when it is detected that the navigation bar tab is clicked, the position of the corresponding module is obtained, and the scroll to method is used to jump to the corresponding tab content;

[0103] Step S507: Detect a sliding operation of the label content, compare the relative position of the sliding with the module position, determine the corresponding tab and switch.

[0104] To sum up, the embodiments of this specification can meet the needs of horizontal page switching and vertical page switching. At the same time, since the tag contents of all tags are placed in one target page, only one page needs to be created and maintained, which greatly saves page development and maintenance resources.

[0105] like Figure 6 As shown, the embodiment of this specification also provides a method for displaying a navigation bar, which specifically includes the following steps:

[0106] Step S601: if a sliding operation on a label content display area is detected, determining a first position of a first display content relative to a target page and a sliding distance of the sliding operation, wherein the first display content is the label content displayed on the display screen before the sliding operation;

[0107] Step S602: determining a second position of second display content relative to the target page based on the first position and the sliding distance, wherein the second display content is label content displayed on the display screen after the sliding operation;

[0108] Step S603: determining a target tag corresponding to the second position based on the correspondence between the tag and the tag content position, and switching the tag of the navigation bar to the target tag;

[0109] The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

[0110] Specifically, when the user clicks on a label of the navigation bar, the target page can be jumped to the label content of the selected label. Then, when the user slides the label content, the label of the navigation bar can be switched accordingly as the label content changes.

[0111] In the embodiments of this specification, the label content display area is an area on the device display screen for displaying label content, and the size of the label content display area can be determined according to the specific device. When the user performs a sliding operation on the label content display area, since the label content display area displays the target page, when the user performs a sliding operation, the target page will slide along with the user's sliding operation. The label content of each label is arranged on the target page, so as the user slides, the task label content in the label content display area will also change accordingly.

[0112] As mentioned above, when adding modules with label content on the target page, the positions of each module are recorded, and each position is associated with the corresponding label. Then, if the sliding operation determines the position of the label content currently displayed in the label display area on the target page, the label corresponding to the label content can be determined accordingly, so as to switch the label on the navigation bar.

[0113] In the specific implementation process, before the sliding operation, the label content display area displays the first display content. In some embodiments, the first display content may only be the label content under the same label. In other embodiments, for example, when switching vertically, if the label content display area can display a long page, the first display content may include the label content under multiple labels.

[0114] The first position of the first displayed content can be the position of the tag content corresponding to the tag selected in the current navigation bar in the target page, or the position of the top display content of the tag content display area in the target page, or the position of the bottom display content of the entire tag content display area in the target page. There is no limitation here.

[0115] Further, based on the sliding distance and the second position of the sliding operation, the second position of the second display content is determined, wherein the second display content may be the label content displayed in the label content display area after the sliding operation. When determining the second position, the first position may be processed differently based on the direction of the sliding operation, such as sliding up, sliding down, sliding left, and sliding right to obtain the second position.

[0116] In the embodiments of this specification, the correspondence between the label and the label content position can refer to the above introduction, which will not be repeated here. After obtaining the second position, the second position can be matched with the label content position corresponding to each label. For example, if the sliding operation is a downward slide, if the second position is consistent with the label content position of label A, or the second position exceeds the label content position of label A, and does not exceed the label content position of label B adjacent to label A, it indicates that the label content of label A has been displayed in the label content display area. Therefore, label A can be used as the target label corresponding to the second position, and the label of the navigation bar can be switched to label A.

[0117] Based on the same inventive concept, an embodiment of the present invention provides a display device of a navigation bar, referring to Figure 7 As shown, the device comprises:

[0118] The content position determination module 701 is used to determine the target tag content position corresponding to the target tag based on the correspondence between the tag and the tag content position if a selection operation for the target tag is detected, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order;

[0119] The jump module 702 is used to jump the target page to the target tag content position to display the tag content of the target tag.

[0120] In some implementations, the target page is constructed in the following manner:

[0121] Create a page container;

[0122] Creating a target module for each tag based on the switching mode of the tag content;

[0123] Based on the switching mode, the preset order is determined, and the target modules of each tag are arranged in the page container according to the preset order to form the target page.

[0124] In some implementations, the correspondence between the tag and the tag content position is obtained by the following steps:

[0125] For each tag, determine the module position of the target module of the tag in the target page, and use the module position as the tag content position of the tag;

[0126] Each tag is associated with a corresponding tag content position to establish a corresponding relationship between the tag and the tag content position.

[0127] In some implementations, based on the switching mode, determining the preset order, and arranging the target modules of each tag in the page container according to the preset order includes:

[0128] If the switching mode is horizontal switching, determining that the preset order is a left-right order, and arranging the target modules of each tag in the page container in a left-right order;

[0129] If the switching mode is vertical switching, the preset order is determined to be a vertical order, and the target modules of each tag are arranged in the page container in a vertical order.

[0130] In some implementations, if the switching mode is horizontal switching, the switching mode based on the tag content, creating a target module for each tag, includes:

[0131] Determine the size of the target module, wherein the size of the target module is the same as the size of a preset label content display area;

[0132] For each tag, the tag information of the tag and the tag content of the tag are added to the corresponding target module.

[0133] In some implementations, if the switching mode is vertical switching, the switching mode based on the tag content, creating a target module for each tag, includes:

[0134] Determining the size of the target module based on the size of the screen displaying the navigation bar;

[0135] For each tag, the tag information of the tag is added to the corresponding target module.

[0136] In some embodiments, the device further comprises:

[0137] A creation module, used to create a content module for each tag, and add the tag content of each tag to the corresponding content module;

[0138] The processing module is used for inserting the content module of each tag below the target module of the tag.

[0139] In some implementations, the jump module 702 is configured to:

[0140] The target page is jumped to the target tag content position by scrolling the page.

[0141] Regarding the above-mentioned device, the specific functions of each module therein have been described in detail in the embodiment of the method for displaying a navigation bar provided in the embodiment of this specification, and will not be elaborated here.

[0142] Based on the same inventive concept, an embodiment of the present invention provides a display device of a navigation bar, referring to Figure 8 As shown, the device comprises:

[0143] A first determination module 801 is used to determine a first position of a first display content relative to a target page and a sliding distance of the sliding operation if a sliding operation on a label content display area is detected, wherein the first display content is the label content displayed on the display screen before the sliding operation;

[0144] A second determination module 802 is used to determine a second position of a second display content relative to the target page based on the first position and the sliding distance, where the second display content is a label content displayed on the display screen after the sliding operation;

[0145] A switching module 803, configured to determine a target tag corresponding to the second position based on a correspondence between the tag and the tag content position, and switch the tag of the navigation bar to the target tag;

[0146] The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

[0147] Regarding the above-mentioned device, the specific functions of each module therein have been described in detail in the embodiment of the method for displaying a navigation bar provided in the embodiment of this specification, and will not be elaborated here.

[0148] Based on the same inventive concept, an embodiment of the present invention provides an electronic device, referring to Fig. 9 As shown, it includes: a memory 904, a processor 902, and a computer program stored in the memory 904 and executable on the processor 902. When the processor 902 executes the program, any implementation of the method for displaying a navigation bar is implemented.

[0149] Among them, Fig. 9In the embodiment of the present invention, a bus architecture (represented by bus 900) is shown, and bus 900 may include any number of interconnected buses and bridges, and bus 900 links various circuits including one or more processors represented by processor 902 and memory represented by memory 904. Bus 900 may also link various other circuits such as peripherals, voltage regulators, and power management circuits, which are well known in the art and are therefore not further described herein. Bus interface 905 provides an interface between bus 900 and receiver 901 and transmitter 903. Receiver 901 and transmitter 903 may be the same element, namely a transceiver, providing a unit for communicating with various other devices over a transmission medium. Processor 902 is responsible for managing bus 900 and general processing, while memory 904 may be used to store data used by processor 902 when performing operations.

[0150] The functions described herein may be implemented in hardware, software executed by a processor, firmware, or any combination thereof. If implemented in software executed by a processor, the functions may be stored as one or more instructions or codes on a computer-readable medium or transmitted via a computer-readable medium. Other examples and implementations are within the scope and spirit of the present invention and the appended claims. For example, due to the nature of software, the functions described above may be implemented using software executed by a processor, hardware, firmware, hard wiring, or a combination of any of these. In addition, each functional unit may be integrated into a processing unit, each unit may exist physically separately, or two or more units may be integrated into one unit.

[0151] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units can be a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0152] The units described as separate components may or may not be physically separated, and the components of the control device may or may not be physical units, that is, they may be located in one place or distributed in multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0153] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk and other media that can store program codes.

[0154] The above description is only an embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent substitution, improvement, etc. made within the spirit and principle of the present invention shall be included in the scope of the claims of the present invention.

Claims

1. A method for displaying a navigation bar, characterized in that: include: If a selection operation for a target tag is detected, a target tag content position corresponding to the target tag is determined based on a correspondence between the tag and the tag content position, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order; Jump the target page to the target tag content position to display the tag content of the target tag.

2. The method according to claim 1, characterized in that The target page is constructed in the following way: Create a page container; Creating a target module for each tag based on the switching mode of the tag content; Based on the switching mode, the preset order is determined, and the target modules of each tag are arranged in the page container according to the preset order to form the target page.

3. The method according to claim 2, characterized in that The correspondence between the label and the label content position is obtained by the following steps: For each tag, determine the module position of the target module of the tag in the target page, and use the module position as the tag content position of the tag; Each tag is associated with a corresponding tag content position to establish a corresponding relationship between the tag and the tag content position.

4. The method according to claim 2, characterized in that Based on the switching mode, determining the preset order, and arranging the target modules of each tag in the page container according to the preset order, includes: If the switching mode is horizontal switching, determining that the preset order is a left-right order, and arranging the target modules of each tag in the page container in a left-right order; If the switching mode is vertical switching, the preset order is determined to be a vertical order, and the target modules of each tag are arranged in the page container in a vertical order.

5. The method according to any one of claims 2 to 4, characterized in that: If the switching mode is horizontal switching, the switching mode based on the tag content, creating a target module for each tag, includes: Determine the size of the target module, wherein the size of the target module is the same as the size of a preset label content display area; For each tag, the tag information of the tag and the tag content of the tag are added to the corresponding target module.

6. The method according to any one of claims 2 to 4, characterized in that: If the switching mode is vertical switching, the switching mode based on the tag content, creating a target module for each tag, includes: Determining the size of the target module based on the size of the screen displaying the navigation bar; For each tag, the tag information of the tag is added to the corresponding target module.

7. The method according to claim 6, characterized in that The method further comprises: Creating a content module for each tag, and adding the tag content of each tag to the corresponding content module; For each tag, the content module of the tag is inserted below the target module of the tag.

8. The method according to claim 1, characterized in that The step of jumping the target page to the target tag content position includes: The target page is jumped to the target tag content position by scrolling the page.

9. A method for displaying a navigation bar, characterized in that: include: If a sliding operation on the label content display area is detected, determining a first position of a first display content relative to a target page and a sliding distance of the sliding operation, wherein the first display content is the label content displayed on the display screen before the sliding operation; Based on the first position and the sliding distance, determining a second position of second display content relative to the target page, the second display content being label content displayed on the display screen after the sliding operation; Based on the correspondence between the label and the label content position, determine the target label corresponding to the second position, and switch the label of the navigation bar to the target label; The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

10. A display device for a navigation bar, characterized in that: include: a content position determination module, configured to determine a target tag content position corresponding to the target tag based on a correspondence between the tag and the tag content position if a selection operation for the target tag is detected, wherein the navigation bar includes a plurality of tags, and the tag content of each tag is arranged in a same target page according to a preset order; The jump module is used to jump the target page to the target tag content position to display the tag content of the target tag.

11. A navigation bar display device, characterized in that: include: A first determination module is used to determine a first position of a first display content relative to a target page and a sliding distance of the sliding operation if a sliding operation on a label content display area is detected, wherein the first display content is the label content displayed on the display screen before the sliding operation; A second determination module, configured to determine a second position of second display content relative to the target page based on the first position and the sliding distance, wherein the second display content is a label content displayed on the display screen after the sliding operation; A switching module, configured to determine a target tag corresponding to the second position based on a correspondence between the tag and the tag content position, and switch the tag of the navigation bar to the target tag; The navigation bar includes a plurality of tags, and the tag content of each tag is arranged in the target page according to a preset order.

12. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method according to any one of claims 1 to 9 when executing the program.

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

Images