Multi-view tab processing method and device, medium and product

Abstract

The invention discloses a tab processing method and device under multiple views, a medium and a product, and relates to the technical field of multi-view content switching. The method comprises the following steps: determining view item list data and a tab data list; each view item object in the view item list data is configured with a corresponding first identifier; each tab in the tab data list is configured with a second identifier; constructing a key value storage structure according to the view item list data and the tab data list; the key in the key value storage structure is the first identifier, and the value is the second identifier of the tab currently selected by the corresponding view item; and in the view rendering process, determining a tab corresponding to the currently selected view item based on the key value storage structure. According to the scheme, the problem of state management redundancy in multi-view content switching prevention in the prior art is solved.

Description

Technical Field

[0001] This application relates to the field of multi-view content switching technology, specifically to a method, apparatus, medium, and product for processing tabs under multiple views. Background Technology

[0002] In current front-end page development, existing solutions widely employ a tab component reuse mechanism to render parallel view items. When multiple parallel view items need to be generated by looping through data, each view item uses a reused tab component to switch its displayed content. Existing switching solutions have the following problems: when the number of tabs is large, the number of parameter values ​​that need to be set becomes numerous, and the logic for judging different parameters in the calling method becomes very complex, resulting in a large amount of redundant code and hindering future expansion; in existing technologies, adding a new tab requires the simultaneous implementation of independent logic for content display and hiding, leading to a significant increase in state management redundancy and affecting the maintainability of the project in multi-view scenarios. Summary of the Invention

[0003] At least one embodiment of this application provides a method, apparatus, medium, and product for processing tabs under multiple views, which solves the problem of redundant state management in the prevention of multiple view content switching in the prior art.

[0004] To solve the above-mentioned technical problems, this application is implemented as follows:

[0005] In a first aspect, embodiments of this application provide a method for processing tabs under multiple views, including:

[0006] Determine the view item list data and the tab data list; each view item object in the view item list data is configured with a corresponding first identifier; each tab in the tab data list is configured with a second identifier;

[0007] Based on the view item list data and the tab data list, a key-value storage structure is constructed; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab for the corresponding view item;

[0008] During view rendering, the tab corresponding to the currently selected view item is determined based on the key-value storage structure.

[0009] Optionally, during view rendering, the tab corresponding to the currently selected view item is determined based on the key-value storage structure, including:

[0010] Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item;

[0011] If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item;

[0012] Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed;

[0013] If the comparison results match, the options corresponding to the target tab will be displayed.

[0014] Optionally, during the view rendering process, after determining the tab corresponding to the currently selected view item based on the key-value storage structure, the method further includes:

[0015] After the view list is rendered, the second identifier corresponding to each tab in the tab data list is assigned to the option display attribute of each view item;

[0016] Based on the option display attributes and the first identifier of the current view item, query the target identifier corresponding to the first identifier from the key-value storage structure;

[0017] Assign the target identifier to the selected state attribute of the current view item so that the target option corresponding to the target identifier is selected.

[0018] Optionally, during the view rendering process, after determining the tab corresponding to the currently selected view item based on the key-value storage structure, the method further includes:

[0019] Listen for the option toggle event of a view item; the option toggle event includes the toggle target;

[0020] When the option switching event is triggered, the first target identifier of the view item of the switching target and the second target identifier of the tab of the switching target are obtained through the event callback;

[0021] Based on the first target identifier and the second target identifier, the second identifier associated with the current view item in the key-value storage structure is replaced with the second target identifier.

[0022] Optionally, the number of option content items configured in the view item object is the same as the number of options in the tab data list.

[0023] Optionally, the data of the option content is indexed and stored using the second identifier of the tab, and after the second identifier matches, the corresponding content data is directly retrieved and displayed using the second identifier.

[0024] Secondly, embodiments of this application provide a processing apparatus for tabs under multiple views, including:

[0025] The first determining module is used to determine the view item list data and the tab data list; each view item object in the view item list data is configured with a corresponding first identifier; each tab in the tab data list is configured with a second identifier;

[0026] The first processing module is configured to construct a key-value storage structure based on the view item list data and the tab data list; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab of the corresponding view item;

[0027] The second processing module is used to determine the tab corresponding to the currently selected view item based on the key-value storage structure during the view rendering process.

[0028] Optionally, the second processing module is specifically used for:

[0029] Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item;

[0030] If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item;

[0031] Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed;

[0032] If the comparison results match, the options corresponding to the target tab will be displayed.

[0033] Thirdly, embodiments of this application provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the method as described in any one of the first aspects.

[0034] Fourthly, embodiments of this application provide a computer program product, including computer instructions, which, when executed by a processor, implement the steps of the method as described in any one of the first aspects.

[0035] Compared with existing technologies, the tab processing method, apparatus, medium, and product under multiple views provided in this application first determine the list data of view items with a first identifier and the list of tab data with a second identifier to establish a standardized data foundation; then, a key-value storage structure is constructed with the first identifier of the view item as the key and the second identifier of the corresponding selected tab as the value, to centrally and uniformly manage the tab selection status of all view items, replacing the traditional decentralized status configuration; finally, during view rendering, the corresponding value is quickly retrieved based on the first identifier of the current view item directly on this structure to accurately determine its selected tab, without the need to maintain the selection status separately for each view item, greatly simplifying the status management logic and completely eliminating redundancy problems. Attached Figure Description

[0036] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the scope of this application. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings:

[0037] Figure 1 A flowchart illustrating the multi-view tab processing method provided in this application embodiment;

[0038] Figure 2 Demonstrate the renderings of existing technology solutions;

[0039] Figure 3 This is a schematic diagram illustrating the tab content display logic provided in the embodiments of this application;

[0040] Figure 4 A schematic diagram of the view item-tab-key value storage structure provided in the embodiments of this application;

[0041] Figure 5 A schematic diagram illustrating the content attributes of the view item data population option provided in the embodiments of this application;

[0042] Figure 6 Example diagram of configuration data for view item-tab-key value provided in embodiments of this application;

[0043] Figure 7 This is a schematic diagram illustrating the flow of the view item-tab-key value storage structure provided in the embodiments of this application;

[0044] Figure 8 This is a schematic diagram of the structure of the multi-view tab processing device provided in the embodiments of this application. Detailed Implementation

[0045] The technical solutions of the embodiments of this application will be clearly described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this application. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0046] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and are not used to describe a specified order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first" and "second" are generally of the same class, not limited in number; for example, a first object can be one or more. Furthermore, in the specification and claims, "and" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0047] The term "instruction" in this application can be either a direct instruction (or explicit instruction) or an indirect instruction (or implicit instruction). A direct instruction can be understood as one in which the sender explicitly informs the receiver of specific information, the operation to be performed, or the requested result, etc.; an indirect instruction can be understood as one in which the receiver determines the corresponding information based on the instruction sent by the sender, or makes a judgment and determines the operation to be performed or the requested result, etc., based on the judgment result.

[0048] As described in the background section, existing multi-tab page switching solutions do not handle independent state management of tabs under multiple views. This leads to a chain reaction of tab switching between looping multi-view items, and lacks an extensible configuration solution. To achieve independent tab switching in multiple views, developers need to write a large amount of parameter judgment logic in the methods, which cannot adapt to the dynamic growth of the number of tabs. When adding a new tab, event binding, CSS styles, and judgment branches need to be modified simultaneously, resulting in a linear increase in maintenance costs and the number of options. This causes a chain reaction of tab switching between looping multi-view items, and lacks an extensible configuration solution. To solve at least one of the above problems, this application provides a multi-view tab processing method, apparatus, medium, and product, which can reduce or avoid the occurrence of the above situations.

[0049] This application provides a method, apparatus, medium, and product for processing tabs under multiple views. The method and apparatus are based on the same concept, and since the principles by which they solve problems are similar, their implementations can be referred to interchangeably; repeated details will not be repeated.

[0050] Please refer to Figure 1 This application provides a method for processing tabs under multiple views, including:

[0051] Step 110: Determine the view item list data and the tab data list; each view item object in the view item list data is configured with a corresponding first identifier; each tab in the tab data list is configured with a second identifier.

[0052] In this application, two types of basic data sets for implementing multi-view rendering and tab display are first identified: view item list data and tab data list. The view item list data is a dataset used for cyclic rendering to generate multiple views. Its basic unit is the view item object, and each view item object is an independent basis for view generation, corresponding to an independent view in the multiple views. The tab data list is a dataset used to generate tabs in each view item. Its basic unit is the tab, and each tab is an independent option display unit, corresponding to a selectable option in the view item.

[0053] To achieve accurate identification and association between view items and tabs, each component in the two datasets is configured with a unique identifier: each view item in the view item list data is configured with a corresponding first identifier, which is the unique identification information of the view item object and serves as the unique basis for distinguishing between view item objects; each tab in the tab list data is configured with a corresponding second identifier, which is the unique identification information of the tab and serves as the unique basis for distinguishing between tabs.

[0054] Step 120: Construct a key-value storage structure based on the view item list data and the tab data list; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab of the corresponding view item.

[0055] Step 120 uses the already determined view item list data, tab data list, and configured first and second identifiers as a basis to construct a key-value storage structure. This structure is the core data carrier for associating view items with the currently selected tab, and its construction rules and connotations are as follows:

[0056] The key-value storage structure adopts a one-to-one correspondence storage form of "key-value". In this structure, the key value is the first identifier of the view item object, that is, each key uniquely corresponds to one view item object; the value value is the second identifier of the tab selected by the view item object corresponding to the above key in the current state, that is, each value uniquely corresponds to the currently selected tab of the view item object.

[0057] The purpose of step 120 is to establish a unique mapping relationship between "view item object - currently selected tab" through a key-value storage structure, so that each view item object has its own independent selected tab identifier, thereby achieving the independence of the tab selection state under each view item from the data level and avoiding state interference between multiple views.

[0058] Step 130: During the view rendering process, determine the tab corresponding to the currently selected view item based on the key-value storage structure.

[0059] In the embodiments of this application, reference is made to Figure 2 The existing problems are Figure 2 View item 1 and view item 2 are multi-view items generated cyclically. If the operation view Figure 1 The tabs in view item 1 will affect the tabs in view item 2. Step 130 of this application is the practical application of the key-value storage structure. The implementation scenario is during the view rendering process, that is, during the process of parsing and rendering the view item list data to generate a multi-view interface. Using the constructed key-value storage structure as the sole basis for judgment, the first identifier of the currently selected view item object is matched with the corresponding key in the key-value storage structure, and then the value corresponding to the key is obtained, that is, the second identifier of the tab corresponding to the currently selected view item object. Finally, the selected tab that should be displayed during the rendering process of the currently selected view item object is determined. By using the key-value storage structure as the basis for view rendering, multiple views can determine their respective selected tabs based on exclusive key-value pairs during rendering, realizing accurate rendering of the tab selection state under multiple views and ensuring that the tab state of each view item is displayed independently.

[0060] Optionally, step 130 above includes:

[0061] Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item;

[0062] If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item;

[0063] Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed;

[0064] If the comparison results match, the options corresponding to the target tab will be displayed.

[0065] In this embodiment, determining whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item is the first pre-judgment in the view rendering process. The purpose is to filter out view items that match the content to be displayed, preventing the content from being displayed in unrelated view items. The specific implementation logic is as follows: two core identifiers are extracted: the third identifier of the view item associated with the content to be displayed, and the first identifier of the currently selected view item. The third identifier is the unique identification information of the view item associated with the content to be displayed, and it is the same dimension of view item identification as the first identifier, making them comparable. A consistency judgment is performed between the third identifier and the first identifier of the current view item. If the judgment result is inconsistent, it indicates that the view item associated with the content to be displayed and the currently selected view item are not the same object, and all subsequent operations are terminated, and the content to be displayed is not displayed. If the judgment result is consistent, it indicates that the view item associated with the content to be displayed and the currently selected view item are the same object, and subsequent steps continue.

[0066] If they match, the first identifier of the current view item is used to query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item. This is the core retrieval step after the first-level judgment is passed, and its purpose is to obtain the identifier of the current tab corresponding to the currently selected view item. This application uses the first identifier of the currently selected view item as a unique retrieval key to perform a precise query operation in the constructed key-value storage structure. The value corresponding to the first identifier is extracted from the key-value storage structure, which is the second identifier of the current tab corresponding to the currently selected view item, providing data basis for subsequent tab identifier consistency judgment.

[0067] The second identifier of the current tab obtained from the query is compared with the fourth identifier of the target tab associated with the content to be displayed. This is the second layer of pre-judgment in the view rendering process, aiming to filter out tabs that match the content to be displayed and prevent the content from being displayed in unrelated tabs. Two core identifiers are extracted: one is the second identifier of the current tab obtained through a key-value storage structure, and the other is the fourth identifier of the target tab associated with the content to be displayed. The fourth identifier is the unique identification information of the target tab associated with the content to be displayed, and it is the same-dimensional tab identification basis as the second identifier, and the two are comparable. A consistency comparison is performed on the second identifier and the fourth identifier. If the comparison result is inconsistent, it means that the current tab of the currently selected view item and the associated target tab of the content to be displayed are not the same object, and subsequent operations are terminated, and the content to be displayed is not displayed. If the comparison result is consistent, it means that the current tab of the currently selected view item and the associated target tab of the content to be displayed are the same object, and subsequent steps are continued.

[0068] If the comparison results match, the option content corresponding to the target tab is displayed. This is the final execution step after both levels of judgment have passed. In this application, if the current tab of the currently selected view item successfully matches the associated target tab of the content to be displayed, the content display operation is performed, and the option content corresponding one-to-one with the target tab is displayed in the currently selected view item.

[0069] This application employs a two-layer pre-judgment technique to achieve precise matching between the content to be displayed and view items and tabs. The content is only displayed when both match successfully, effectively avoiding the problem of content display confusion under multiple views.

[0070] It should be noted that in the subsequent Figures 3 to 7 In the illustrated embodiment, Tab can also be referred to as "Tab tab".

[0071] Specifically, refer to Figure 3 The diagram illustrates the tab content display logic. Because each view item in the cyclically generated view item list has unique features that distinguish it from other views, and the content displayed for each option within a tab also differs, a judgment needs to be made within the tab content container to achieve differentiated display. This embodiment uses a key-value configuration mechanism to achieve accurate tab content display across multiple views. The specific process is as follows (without relying on page element nesting logic, only using the key-value storage structure to drive identifier matching): View item matching judgment compares the identifier of the view item associated with the content to be displayed (third identifier) ​​with the identifier of the currently selected view item (first identifier). If they are inconsistent, content rendering is terminated to prevent content from being incorrectly displayed to unrelated view items. Tab identifier matching judgment: Using the identifier of the currently selected view item (first identifier) ​​as the search key, the key-value configuration storage structure is queried to obtain the current tab identifier (second identifier) ​​corresponding to the current view item; then, the current tab identifier (second identifier) ​​is compared with the target tab identifier (fourth identifier) ​​associated with the content to be displayed. If they are inconsistent, rendering is terminated to ensure that only the current tab of the current view item is matched. Content data rendering: When both of the above two layers of matching are successful, the content data associated with the target tab is directly obtained from the key-value configuration storage structure and rendered into the tab content container of the view item.

[0072] Furthermore, the data of the option content is indexed and stored through the second identifier of the tab, and after the second identifier matches, the corresponding content data is directly retrieved and displayed using the second identifier.

[0073] In this embodiment, the second identifier of the tab is used as the unique index key to store the data of the option content corresponding to the tab, that is, a one-to-one correspondence storage format of "second identifier - option content data" is adopted. This storage rule requires that each second identifier corresponds to unique option content data, and each option content data has a unique second identifier as the retrieval basis, so as to achieve a precise association between option content data and tabs, and to keep the storage of option content data consistent with the tab identifier system.

[0074] Specifically, in the step of "comparing the second identifier of the current tab with the fourth identifier of the target tab associated with the content to be displayed," the comparison result is consistent. Under the above implementation premise, the second identifier is directly used as the retrieval basis, and the retrieval operation is performed in the option content storage structure indexed by the second identifier, without the need to introduce other retrieval keywords or perform additional conversion steps. The option content data obtained through the above direct retrieval is directly displayed as the content to be displayed, realizing the rapid retrieval and display of option content.

[0075] The purpose of this implementation is to optimize the display efficiency and accuracy of option content: on the one hand, by using the storage method indexed by the second identifier, the retrieval of option content data is kept consistent with the identifier system described above, avoiding retrieval errors caused by inconsistent search keywords; on the other hand, by using the direct retrieval display rules, additional identifier conversion, data filtering and other steps are omitted, shortening the retrieval path of option content and improving the display efficiency of tab content under multiple views.

[0076] Optionally, after step 130 above, the method further includes:

[0077] After the view list is rendered, the second identifier corresponding to each tab in the tab data list is assigned to the option display attribute of each view item;

[0078] Based on the option display attributes and the first identifier of the current view item, query the target identifier corresponding to the first identifier from the key-value storage structure;

[0079] Assign the target identifier to the selected state attribute of the current view item so that the target option corresponding to the target identifier is selected.

[0080] In this embodiment, a follow-up step of assigning and refreshing the selected tab state after the view list rendering is completed is added. This step is a supplementary technical solution to ensure accurate display of the selected tab state after the multi-view rendering is completed, and it needs to be executed under the specific implementation condition that the view list rendering is completed. In this application, all tabs in the tab data list are traversed, and the unique second identifier corresponding to each tab is extracted. The extracted second identifiers are assigned to the option display attribute of each view item in the multi-view; the option display attribute is an inherent attribute of the view item, which is a dedicated attribute of the view item used to carry the tab identifier and realize the tab interface rendering and display. Through this assignment operation, each view item obtains all its corresponding tab identifiers, providing data support for the normal display of the tabs. The retrieval is based on two core elements: one is the option display attribute of the view item that has been assigned values, and the other is the first identifier of the view item that is currently in the selected state. Using the first identifier of the currently selected view item as the unique search key, a precise query operation is performed in the constructed key-value storage structure to extract the value corresponding to the first identifier, which is defined as the target identifier. The target identifier is essentially the second identifier of the selected tab that should be displayed for the currently selected view item, and is the core data for refreshing the selected state.

[0081] The target identifier, retrieved through a key-value storage structure, is assigned to the selected state attribute of the currently selected view item. The selected state attribute is an inherent property of the view item, specifically used to indicate whether a tab is selected. Its value directly determines the tab's display state on the interface. Once the selected state attribute is assigned the target identifier, the view item will, based on this attribute value, display the target tab corresponding to that identifier as selected on the interface, thus refreshing the tab's selection state.

[0082] This application achieves precise refresh of the tab selection status after multi-view rendering is completed through a series of steps: attribute assignment, identifier query, and status assignment.

[0083] In one specific embodiment, reference is made to Figures 4 to 7 As shown, Figure 4 A schematic diagram of the view item-tab-key-value storage structure provided in the embodiments of this application is used to illustrate the underlying data structure; Figure 5 This is a schematic diagram illustrating how to map options to view item attributes, as provided in the embodiments of this application. Figure 6 Example diagram of configuration data for view item-tab-key value provided in embodiments of this application; Figure 7 This is a schematic diagram of the flow of the view item-tab-key value storage structure provided in the embodiments of this application, used to present the complete flow path.

[0084] Reference Figure 4 As shown, Figure 4 This provides an overview of the top-level data structure for the entire solution, showcasing the relationships and data definition rules among the three modules. It also forms the foundation for accurate display of selected states: The view item list serves as the data source for page rendering. Each view item contains a unique primary identifier (view item ID), type, and other basic attributes, as well as content fields corresponding to each tab (field names are identical to the tab's secondary identifier). It also includes two inherent attributes: option display attributes and selected state attributes (the former carries the tab's secondary identifier, and the latter identifies the selected state). Tab data is a fixed configuration shared by all view items. Each tab contains a unique secondary identifier (e.g., a key value) and a displayed option name, serving as the core data source for populating the view item option display attributes. The key-value storage structure uses the view item's primary identifier as the key and the selected tab's secondary identifier as the value, providing the basis for querying the target identifier and ensuring accurate maintenance of the selected state across multiple view items. Figure 4 In the view item, the content field names correspond strictly one-to-one with the second identifier of the tab; the key-value storage structure is linked to the second identifier of the tab that should be selected through the first identifier of the view item; the option display attribute and the selected state attribute of the view item respectively inherit the second identifier of the tab and the target identifier, which are the key to the interface rendering.

[0085] Reference Figure 5 As shown, Figure 5 This demonstrates the process of binding view item data with the second identifier of the tab, which is a prerequisite for assigning values ​​to the display attributes of subsequent options: Figure 5 The left side shows the list of view items to be improved, and the right side shows the tab data containing multiple second identifiers. By traversing the list of view items, the tab data is iterated for each view item, and the second identifier of each tab is added as a new attribute name to the view item (the number of attributes added corresponds to the number of tabs). This application ensures that each view item has a content field that matches the second identifier of the tab, and at the same time prepares the data for assigning the second identifier to the option display attributes later (users can later customize the values ​​of these attributes as the content displayed under the corresponding tab).

[0086] Reference Figure 6 As shown, Figure 6This is a concrete numerical example diagram that intuitively illustrates the terminology correspondences and data retrieval rules of each module, and is also key to understanding the target identifier query logic. In the view item list, the two view items correspond to the first identifier 1 and the first identifier 2, respectively. Both contain content fields that match the second identifiers of the tabs (tab1, tab2) (e.g., tab1 corresponds to "tab1 content"), while reserving option display attributes and selected state attributes to be assigned values. The tab data defines the second identifiers tab1 (option one), tab2 (option two), and tab3 (option three), which are the direct data source for subsequently filling in the option display attributes. The key-value storage structure uses the first identifier of the view item as the retrieval key. In the example, the value corresponding to the first identifier 1 is the second identifier tab1, and the value corresponding to the first identifier 2 is the second identifier tab2. These values ​​are the target identifiers to be assigned to the selected state attributes, directly determining the selected state of the view item.

[0087] Reference Figure 7 As shown, Figure 7 This fully demonstrates the process of precisely assigning and refreshing the selected tab status after the view list is rendered, and also serves as a visual representation of the supplementary technical solution. Figure 7 In the process, Step 1: Assign the second identifier to the option display attribute. After the view list is rendered, iterate through the tab data to extract all second identifiers and assign these second identifiers to the option display attribute of each view item (this attribute is an inherent attribute of the view item, specifically carrying the tab identifiers), ensuring that each view item can obtain all tab second identifiers, providing data support for tab interface rendering. Step 2: Query the target identifier. Use two core elements as the retrieval basis: one is the option display attribute that has been assigned to the view item (ensuring the retrieval scope matches), and the other is the first identifier of the current view item; use the first identifier as the unique retrieval key to accurately query in the key-value storage structure, extract the corresponding value (i.e., the second identifier of the selected tab), and define it as the target identifier. Step 3: Assign the target identifier to refresh the selected state. Assign the retrieved target identifier to the selected state attribute of the current view item (this attribute is an inherent attribute of the view item, directly determining the tab interface display state). The view item will, based on this attribute value, make the tab corresponding to the target identifier appear highlighted in the interface, completing the accurate refresh of the tab selection state in a multi-view scenario.

[0088] Figure 4 First, the data relationship between view items, tabs (T), and the key-value store structure is defined at the top-level architecture: view items are uniquely identified by a first identifier (ID), and their content fields correspond one-to-one with the second identifier (key) of the tab; the key-value store structure uses the first identifier of the view item as the key and the second identifier of the selected tab as the value, providing the data foundation for subsequent state updates. Based on this, Figure 5The process of dynamically generating view item data is demonstrated: by traversing the view item and tab data, the second identifier of each tab is added as a new attribute to the view item, preparing for subsequent attribute assignment and interface rendering. Figure 6 This data structure is presented intuitively using concrete numerical examples, clearly demonstrating the correspondence between the first identifier, the second identifier, and the key-value storage structure. The values ​​within the key-value storage structure are the "target identifiers" that will be used later. Finally, Figure 7 The complete presentation of the state refresh process after view rendering is shown: After the view list is rendered, the second identifier of all tabs is first assigned to the option display attribute of each view item. Then, using the first identifier of the current view item as the search key, the corresponding target identifier is retrieved from the key-value storage structure. Finally, the target identifier is assigned to the selected state attribute of the view item, thus making the target tab highlight and selected. This continuous process of "attribute assignment - identifier lookup - state assignment" is the core supplementary solution to ensure accurate display of tab selection status in multi-view scenarios.

[0089] Optionally, after step 130 above, the method further includes:

[0090] Listen for the option toggle event of a view item; the option toggle event includes the toggle target;

[0091] When the option switching event is triggered, the first target identifier of the view item of the switching target and the second target identifier of the tab of the switching target are obtained through the event callback;

[0092] Based on the first target identifier and the second target identifier, the second identifier associated with the current view item in the key-value storage structure is replaced with the second target identifier.

[0093] It should be noted that after step 130, a subsequent step of dynamically updating the key-value storage structure when switching tabs is added. This step is a solution to dynamically switch the tab selection state under multiple views. Through the logic of event listening, callback acquisition, and structure update, the relationship between view items and selected tabs after tab switching is synchronized in real time.

[0094] In this embodiment, a listening mechanism for option switching events is configured for all view items in a multi-view application. This listening mechanism runs continuously, monitoring in real time whether a tab switching operation occurs in the view item. The core component of the option switching event is clearly defined as the switching target, which is the specific object pointed to when the option switching event is triggered. This target includes two core types of information: the target view item after the switch and the target tab, providing a basis for subsequent identification.

[0095] When an option switching event is triggered, i.e., when a tab switching operation occurs in a view item, a preset event callback mechanism is activated. This event callback mechanism extracts two core identifiers from the switching target: a primary identifier for the target view item and a secondary identifier for the target tab. The primary identifier is unique to the target view item and serves as the basis for view item identification on the same level as the primary identifier; the secondary identifier is unique to the target tab and serves as the basis for tab identification on the same level as the secondary identifier.

[0096] Using the extracted first and second target identifiers as the core update basis, the original key-value pair associated with the currently selected view item is located in the constructed key-value storage structure. The original value of this key-value pair corresponding to the currently selected view item is a certain second identifier. The original second identifier is replaced with the second target identifier, completing the update operation of the key-value storage structure. Through this replacement operation, the mapping relationship of "first identifier - second identifier" in the key-value storage structure is kept consistent with the actual switching state of the tab, ensuring that the accurate selected tab identifier can be obtained during subsequent view rendering or state query.

[0097] This application uses event-driven technology to achieve dynamic updates of the key-value storage structure, enabling tab switching operations under multiple views to be synchronized to the data carrier in real time, thus ensuring the real-time nature and accuracy of the tab selection state.

[0098] Specifically, in this application, the option switching event of a view item is monitored. This event carries information related to the switching target, providing data support for subsequent identification. When the option switching event of a view item is triggered, the first target identifier (view item ID) of the view item corresponding to the switching target and the second target identifier (tab key value) of the tab corresponding to the switching target are obtained through the event callback. The obtained first target identifier is used as the retrieval basis to locate the original second identifier associated with the current view item in the pre-built key-value storage structure. Based on the first target identifier and the second target identifier, the original second identifier associated with the view item in the key-value storage structure is replaced with the current second target identifier, completing the update of the selected state data. Since the selected item attribute of the view is predefined as "based on the first identifier of the current view item, the corresponding tab second identifier is obtained from the key-value storage structure", after the key-value storage structure is updated, the view will automatically read the latest attribute value, so that the tab corresponding to the second target identifier is displayed as selected in real time, realizing the real-time refresh of the selected tab item.

[0099] Optionally, the number of option content items configured in the view item object is the same as the number of options in the tab data list.

[0100] This application explicitly defines the quantity matching relationship between view item objects and tab data lists. This definition serves as the fundamental data constraint for achieving a one-to-one correspondence between view items and tabs. Option content items are inherent configuration units of view item objects, specifically designed to carry the content displayed for each tab. Each option content item can independently carry the content displayed for one tab, and its configuration quantity directly determines the number of tab contents that a view item object can hold. The number of options, i.e., the total number of tabs contained in the tab data list, is the core data characteristic of the tab data list.

[0101] The number of option content items configured within each view item object in the view item list data must be exactly the same as the number of options in the tab data list; this constraint is a mandatory data constraint that applies to all view item objects in a multi-view system without exception.

[0102] The purpose of this implementation is to achieve a one-to-one mapping between tabs and option content items, ensuring that each tab in the tab data list can find a unique corresponding option content item in the view item object, and that each option content item corresponds to only one tab. By limiting the number of matching relationships, it is ensured that the content displayed in each tab can be effectively carried by the view item object, and that the content of each tab is independent and non-overlapping. This avoids the problem of some tabs not being able to display due to insufficient number of option content items, or the content carrying chaos due to excessive number, and provides basic data guarantee for the normal display of tab content in multiple views.

[0103] In summary, the key-value configuration-based tab handling method for multiple views provided in this application aims to solve the technical problems of poor tab reusability, easy interference with selected states, and low content display efficiency in existing multi-view scenarios. The specific implementation logic is as follows: First, define the view item list data for loop rendering and configure a unique ID for each view item object; simultaneously, based on the preset tab data, define content attributes for the view item objects that correspond one-to-one with the tab data (the attribute name is completely consistent with the unique key value of the option, and the attribute value is the content data to be displayed under that tab). Second, configure a fixed array of option objects as a common display data source for all view items. Each option object contains an option name and a unique key value, ensuring the consistency of the basic display data for tabs under multiple views. Finally, construct a key-value configuration data storage structure (key:value), with the view item ID as the key and the key value of the currently selected tab of the corresponding view item as the value. Each key-value pair independently records the tab selection state of a single view item, providing a data foundation for subsequent state management.

[0104] After generating a batch list of view items by circulating the view item list data, the aforementioned fixed array of tab objects is uniformly assigned to the dedicated attribute used to display the tab in each view item, thereby achieving standardized rendering of tabs under multiple views and achieving high reusability of tab components; at the same time, based on the ID value of the currently displayed view item, the corresponding value (i.e., the key value of the tab that should be selected for this view item) is retrieved from the key-value configuration data and assigned to the selected state attribute of the view item, so that the target tab is displayed as selected by default.

[0105] In the view item, listen for tab switching events. When the user triggers a switching operation, retrieve the currently clicked tab object through the event callback and extract its unique key value. Simultaneously, leveraging the looping rendering of the view item list, obtain the ID value of the view item to which the current operation belongs. Using this view item ID as the search key, locate the corresponding key-value pair in the key-value configuration data and update its value to the key value of the currently clicked tab. Since the selected state attribute of the view item is associated with the value retrieval logic of the key-value configuration data, the update of the key-value data will automatically drive the tab selection state of the view item to refresh in real time, and will only affect the selection state of the current view item, ensuring that the tab states of multiple views are independent and do not interfere with each other.

[0106] When rendering the content displayed in a tab, the system first checks if the content to be displayed matches the current view item ID. If they match, it retrieves the key value of the currently selected tab from the key-value configuration data based on the view item ID and checks if it matches the key value of the target tab. Only when they match is the content data stored in the content attributes of the corresponding tab retrieved and displayed. Through this dual matching logic of "view item ID and target tab key value," the system achieves both personalized customization of tab content across different views and ensures fast retrieval and accurate display of content data.

[0107] Compared to existing technologies, the solution proposed in this application effectively solves the technical problems of redundant batch deployment of tabs, mutual interference of selected states, homogenized content display, and inefficient acquisition in multi-view scenarios by constructing a standardized data association system, designing independent key-value state storage logic, and formulating dual-matching content display rules. The specific technical advantages are summarized as follows:

[0108] This application defines a list of view items with unique IDs and a fixed array of tabs with unique keys, establishing a one-to-one correspondence between their attributes. Tab data is then uniformly assigned to each view item in a loop, enabling high tab reuse during batch generation of multiple views. This significantly reduces redundant configuration work and improves the development and deployment efficiency of tab components in multi-view scenarios. Simultaneously, relying on a key-value storage structure with view item IDs as keys and selected tab keys as values, a unique data association between views and their selected states is established. When switching options, only the associated value of the corresponding view item in the key-value configuration data is updated, ensuring that the selected states of tabs across multiple views are independent and that switching operations do not affect each other. This completely solves the problem of easily confused and mutually interfering tab states in traditional solutions. Furthermore, content display is achieved through a dual matching logic of view item IDs and target tab values. First, the view item ID is matched, then the selected tab value is verified. This not only enables personalized customization of tab content displayed across different views but also allows for quick retrieval of target content directly from the view list's data object. This balances the differentiation of displayed content with the efficiency of data acquisition, making tab content management more flexible and display response more efficient in multi-view scenarios.

[0109] The various methods of the embodiments of this application have been described above. Apparatus for implementing the above methods will now be provided.

[0110] Please refer to Figure 8 This application also provides a processing device for tabs under multiple views, including:

[0111] The first determining module 81 is used to determine the view item list data and the tab data list; each view item object in the view item list data is configured with a corresponding first identifier; each tab in the tab data list is configured with a second identifier;

[0112] The first processing module 82 is used to construct a key-value storage structure based on the view item list data and the tab data list; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab of the corresponding view item;

[0113] The second processing module 83 is used to determine the tab corresponding to the currently selected view item based on the key-value storage structure during the view rendering process.

[0114] Optionally, the second processing module 83 is specifically used for:

[0115] Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item;

[0116] If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item;

[0117] Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed;

[0118] If the comparison results match, the options corresponding to the target tab will be displayed.

[0119] Optionally, the multi-view tab processing device of this application further includes:

[0120] The third processing module is used to assign the second identifier corresponding to each tab in the tab data list to the option display attribute of each view item after the view list is rendered.

[0121] The fourth processing module is used to query the target identifier corresponding to the first identifier from the key-value storage structure based on the option display attributes and the first identifier of the current view item;

[0122] The fifth processing module is used to assign the target identifier to the selected state attribute of the current view item so that the target option corresponding to the target identifier is displayed in the selected state.

[0123] Optionally, the multi-view tab processing device of this application further includes:

[0124] The listening module is used to listen for option switching events of view items; the option switching event includes the switching target;

[0125] The fifth processing module is used to obtain the first target identifier of the view item of the switching target and the second target identifier of the tab of the switching target through an event callback when the option switching event is triggered.

[0126] The sixth processing module is used to replace the second identifier associated with the current view item in the key-value storage structure with the second target identifier based on the first target identifier and the second target identifier.

[0127] Optionally, the number of option content items configured in the view item object is the same as the number of options in the tab data list.

[0128] Optionally, the data of the option content is indexed and stored using the second identifier of the tab, and after the second identifier matches, the corresponding content data is directly retrieved and displayed using the second identifier.

[0129] It should be noted that the device in this embodiment corresponds to the above-described method for processing tabs under multiple views. The implementation methods in the above embodiments are all applicable to the embodiments of this device and can achieve the same technical effect. The device provided in this application embodiment can implement all the method steps implemented in the above method embodiments and can achieve the same technical effect. Therefore, the parts that are the same as those in the method embodiments and the beneficial effects will not be described in detail here.

[0130] This application also provides a computer-readable storage medium storing a computer program. When executed by a processor, the computer program implements the various processes of the above-described multi-view tab processing method embodiment and achieves the same technical effect. To avoid repetition, it will not be described again here. The computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0131] This application also provides a computer program product, including computer instructions. When the computer instructions are executed by a processor, they implement the various processes of the above-described multi-view tab processing method embodiment and achieve the same technical effect. To avoid repetition, they will not be described again here.

[0132] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0133] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0134] The embodiments of this application have been described above with reference to the accompanying drawings. However, this application is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of this application without departing from the spirit and scope of the claims, and all of these forms are within the protection scope of this application.

Claims

1. A method for processing tabs under multiple views, characterized in that, include: Determine the view item list data and the tab data list; Each view item object in the view item list data is configured with a corresponding first identifier; Each tab in the tab data list is configured with a second identifier; Based on the view item list data and the tab data list, a key-value storage structure is constructed; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab for the corresponding view item; During view rendering, the tab corresponding to the currently selected view item is determined based on the key-value storage structure.

2. The method according to claim 1, characterized in that, During view rendering, the tab corresponding to the currently selected view item is determined based on the key-value storage structure, including: Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item; If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item; Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed; If the comparison results match, the options corresponding to the target tab will be displayed.

3. The method according to claim 1, characterized in that, During view rendering, after determining the tab corresponding to the currently selected view item based on the key-value storage structure, the method further includes: After the view list is rendered, the second identifier corresponding to each tab in the tab data list is assigned to the option display attribute of each view item; Based on the option display attributes and the first identifier of the current view item, query the target identifier corresponding to the first identifier from the key-value storage structure; Assign the target identifier to the selected state attribute of the current view item so that the target option corresponding to the target identifier is selected.

4. The method according to claim 1, characterized in that, During view rendering, after determining the tab corresponding to the currently selected view item based on the key-value storage structure, the method further includes: Listen for the option toggle event of a view item; the option toggle event includes the toggle target; When the option switching event is triggered, the first target identifier of the view item of the switching target and the second target identifier of the tab of the switching target are obtained through the event callback; Based on the first target identifier and the second target identifier, the second identifier associated with the current view item in the key-value storage structure is replaced with the second target identifier.

5. The method according to claim 1, characterized in that, The number of option content items configured in the view item object is the same as the number of options in the tab data list.

6. The method according to claim 2, characterized in that, The data of the option content is indexed and stored through the second identifier of the tab, and after the second identifier matches, the corresponding content data is directly retrieved and displayed using the second identifier.

7. A processing device for tabs under multiple views, characterized in that, include: The first determination module is used to determine the view item list data and the tab data list; Each view item object in the view item list data is configured with a corresponding first identifier; Each tab in the tab data list is configured with a second identifier; The first processing module is configured to construct a key-value storage structure based on the view item list data and the tab data list; the key in the key-value storage structure is the first identifier, and the value is the second identifier of the currently selected tab of the corresponding view item; The second processing module is used to determine the tab corresponding to the currently selected view item based on the key-value storage structure during the view rendering process.

8. The apparatus according to claim 7, characterized in that, The second processing module is specifically used for: Determine whether the third identifier of the view item associated with the content to be displayed is consistent with the first identifier of the current view item; If they match, then based on the first identifier of the current view item, query the key-value storage structure to obtain the second identifier of the current tab corresponding to the current view item; Compare the second identifier of the current tab found in the query with the fourth identifier of the target tab associated with the content to be displayed; If the comparison results match, the options corresponding to the target tab will be displayed.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the method as described in any one of claims 1 to 6.

10. A computer program product, characterized in that, Includes computer instructions that, when executed by a processor, implement the steps of the method as described in any one of claims 1 to 6.

Images