CN113741743A

CN113741743A - Display method and device, equipment and storage medium

Info

Publication number: CN113741743A
Application number: CN202110003864.9A
Authority: CN
Inventors: 廉立文
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2021-01-04
Filing date: 2021-01-04
Publication date: 2021-12-03

Abstract

The embodiment of the application discloses a display method, which comprises the following steps: acquiring a selection operation of a target object in a first direction of a first display area of a selector; the interface area of the selector comprises a first display area and a second display area; determining a target element positioned in the second display area based on the selection operation and the display element of the first display area; and displaying the target element in the first display area, and displaying a candidate element in a target item in the second display area based on a second direction, wherein the target item is a selection item to which the target element belongs, and the candidate element is an element except for the target element in the elements included in the target item. In addition, the embodiment of the application also discloses a display device, equipment and a storage medium.

Description

Display method and device, equipment and storage medium

Technical Field

The embodiment of the application relates to the technical field of computers, and relates to but is not limited to a display method, a display device, display equipment and a storage medium.

Background

In the related art, in the Android system, a third-party developer provides an open-source selector, and the size of the selector is fixed and only can support data of text types. It can be seen that as the data types are used, the area for accommodating the data types is linearly increased by the third-party open-source selector, and the size of the selector is affected, so that the selector is not fully displayed on the display interface. Thus, the range of use of the selector is restricted.

Disclosure of Invention

In view of this, embodiments of the present application provide a display method and apparatus, a device, and a storage medium to solve at least one problem in the related art, and the selector provided in the embodiments of the present application does not have a problem of incomplete display with an increase in the types of data used, thereby expanding the range of use of the selector.

The technical scheme of the embodiment of the application is realized as follows:

in a first aspect, an embodiment of the present application provides a display method, where the method includes:

acquiring a selection operation of a target object in a first direction of a first display area of a selector; the interface area of the selector comprises a first display area and a second display area;

determining a target element positioned in the second display area based on the selection operation and the display element of the first display area;

and displaying the target element in the first display area, and displaying a candidate element in a target item in the second display area based on a second direction, wherein the target item is a selection item to which the target element belongs, and the candidate element is an element except for the target element in the elements included in the target item.

In a second aspect, an embodiment of the present application provides a display device, including: the device comprises an acquisition module, a first determination module and a display module; wherein the content of the first and second substances,

the acquisition module is used for acquiring the selection operation of the target object in a first direction aiming at the first display area of the selector; the interface area of the selector comprises a first display area and a second display area;

the first determination module is used for determining a target element positioned in the second display area based on the selection operation and the display element of the first display area;

the display module is configured to display the target element in the first display area, and display a candidate element in a target item in the second display area based on a second direction, where the target item is a selection item to which the target element belongs, and the candidate element is an element other than the target element in elements included in the target item.

In a third aspect, an embodiment of the present application provides a computer device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor implements the steps in the display method when executing the computer program.

In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps in the display method described above.

In the embodiment of the application, a display method is provided, which includes acquiring a selection operation of a target object in a first direction of a first display area of a selector; the interface area of the selector comprises a first display area and a second display area; determining a target element positioned in the second display area based on the selection operation and the display element of the first display area; the target elements are displayed in the first display area, and the elements to be selected in the target items are displayed in the second display area based on the second direction, the target items are selection items to which the target elements belong, and the elements to be selected are elements except the target elements in the elements included in the target items.

Drawings

Fig. 1 is a schematic application diagram of a display method provided in an embodiment of the present application;

fig. 2 is a schematic flow chart illustrating an implementation of a display method according to an embodiment of the present application;

FIG. 3 is a schematic diagram of a time selector provided in an embodiment of the present application;

FIG. 4 is a schematic diagram of a date and time selector provided by an embodiment of the present application;

FIG. 5 is a schematic diagram of a selector including a vertically sliding window according to an embodiment of the present application;

FIG. 6 is a schematic diagram of a selector including a plurality of vertically sliding windows provided by an embodiment of the present application;

FIG. 7 is a diagram of the types of item support in a vertically sliding window provided by an embodiment of the present application;

FIG. 8 is a schematic coordinate diagram provided by an embodiment of the present application;

fig. 9 is a schematic structural diagram of a selector according to an embodiment of the present application;

fig. 10 is a schematic structural diagram of a display device according to an embodiment of the present disclosure;

fig. 11 is a hardware entity diagram of a computer device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the following will describe the specific technical solutions of the present application in further detail with reference to the accompanying drawings in the embodiments of the present application. The following examples are intended to illustrate the present application but are not intended to limit the scope of the present application.

Before further detailed description of the embodiments of the present application, terms and expressions referred to in the embodiments of the present application are described for better understanding of the present application, and the terms and expressions referred to in the embodiments of the present application are applied to the following explanations.

1) Elements, data provided by the selector for selection, such as: elements of the selector for selecting a date include: number of year of characterization: 1980 to 2020, numbers characterizing the month: 1 to 12, numbers characterizing days: 1 to 31.

2) Selecting an item, a category to which an element to be selected in the selector belongs, for example, an element of the selector for selecting a date includes: number of year of characterization: 1980 to 2020, numbers characterizing the month: 1 to 12, numbers characterizing days: 1 to 31, the selection items of the selector comprise: year, month and day. Composed of various types of data and objects storing the various types of data.

3) The child container is a container capable of storing elements.

4) The sliding container is a container capable of storing all elements corresponding to one option. The sliding container can receive sliding operation of a user, so that different elements are selected as target elements based on the sliding operation.

5) The display device comprises a first display area, an area capable of receiving selection operation of a user in a display interface of a selector. Wherein the first display area is visible.

6) And the second display area is an inoperable area outside the first display area in the display interface of the selector and cannot receive the selection operation of the user. The second display area may be entirely invisible or partially invisible.

The embodiment of the application can be provided as a display method, a display device, equipment and a storage medium. In practical applications, the display method may be implemented by a display apparatus, and each functional entity in the display apparatus may be cooperatively implemented by hardware resources of a computer device (e.g., a terminal device, a server), such as computing resources like a processor, and communication resources (e.g., for supporting various communication modes like optical cable and cellular).

The display method of the embodiment of the application can be applied to the terminal shown in fig. 1, as shown in fig. 1.

The terminal 11 acquires a selection operation of a target object in a first direction of a first display area of the selector; determining a target element positioned in the second display area based on the selection operation and the display element of the first display area; and displaying the target elements in the first display area, and displaying the elements to be selected in the target items in the second area based on a second direction. Here, the target object may be a user who performs a selection operation in a horizontal direction with respect to an operable area of the selector on the display interface of the terminal 11, determines a target element located in an inoperable area based on a display element of a currently operable area and the selection operation, displays the target element in the operable area, and displays an element to be selected belonging to the same target item as the target element in a vertical direction.

Next, embodiments of a display method, a display apparatus, a display device, and a storage medium according to embodiments of the present application are described with reference to an application diagram of the display method shown in fig. 1.

The embodiment of the application provides a display method, which is applied to a terminal, wherein the terminal can be a mobile terminal. The functions implemented by the method may be implemented by calling program code by a processor in a computer device, which may, of course, be stored in a computer storage medium, which may comprise at least a processor and a storage medium.

Fig. 2 is a schematic flow chart of an implementation of a display method according to an embodiment of the present application, and as shown in fig. 2, the method may include the following steps:

s201, acquiring a selection operation of a target object in a first direction of a first display area of a selector;

here, the interface area of the selector includes a first display area and a second display area; the first display area is an operable area, and the second display area is an inoperable area. The target object may be a user who performs a selection operation on the selector, and the first direction may be either a horizontal direction or a vertical direction. In the embodiment of the present application, the first direction is a distribution direction of the selection items in the selector.

In an example, the first direction is a horizontal operation, the user performs a selection operation in a horizontal direction of the operable area of the selector, and the client acquires the selection operation of the user in the horizontal direction of the operable area of the selector.

S202, determining a target element positioned in the second display area based on the selection operation and the display element of the first display area;

here, the client outputs a display element in the first display area of the selector, and when a selection operation is performed by the target object in a first direction with respect to the first display area of the selector, the selection item selected by the selection operation is made as the target item in accordance with the selection of the selection item of the second display area by the selection operation.

Here, the selection operation may be one slide operation or may be a plurality of click operations.

In an example, if the selection operation is a sliding operation, the client determines the target element located in the second display area according to the sliding direction and the operation distance of the selection operation based on the position corresponding to the display element in the first display area. In one example, the first direction is a horizontal direction, and the sliding direction of the selection operation includes: a left direction and a right direction. Here, the sliding operation may be a touch operation implemented based on a touch chip, or may also be a non-touch operation implemented based on gesture recognition.

In practical applications, the selection item displayed in the first display area is taken as a target item. When the selector of the client receives the selection operation of the user, the client updates the selection item in the first display area based on the selection operation of the user, displays the selection item in the second display area in the first display area, and takes the updated selection item in the first display area as a target item. Wherein the selection operation may be a sliding operation,

such as: the selector 20 includes: the display element 23 is located in the operable area 21, and the target element 24 located in the inoperable area 22 is determined according to the selection operation of the user in the left direction of the operable area 21, starting from the position corresponding to the display element 23 of the operable area 21.

For another example: the selector 20 includes: the display element 23 is located in the operable area 21, and the target element 25 located in the inoperable area 22 is determined according to the selection operation of the user in the right direction of the operable area 21 with the position corresponding to the display element 23 of the operable area 21 as the starting point.

In one example, the selection operation is a plurality of click operations: a first click operation on the candidate output control and a second click operation on the candidate. And when the candidate output control receives the first click operation, outputting the selected item in the second display area as the candidate on the display interface, and outputting and displaying the candidate selected by the second click operation as the target item in the first display area.

S203, displaying the target elements in the first display area, and displaying the elements to be selected in the target items in the second display area based on a second direction.

Here, the target item is a selection item to which the target element belongs; the target item comprises at least two elements, and the target item comprises: target elements and candidate elements. The types of elements in the target item may be the same or different; the types of elements in the target item may be text type, picture type, compound type, etc.

Here, the candidate element is an element other than the target element in the elements included in the target item; the second direction is different from the first direction. In the embodiment of the present application, the first direction is a distribution direction of elements in the same selection item in the selector. In one example, the first direction is a horizontal direction and the second direction is a vertical direction. In one example, the first direction is a vertical direction and the second direction is a horizontal direction.

Here, after the target element located in the second display area is determined, the target element is displayed in the first display area, and the candidate element located in the same target item as the target element is displayed.

Such as: determining a target element 24 located in the inoperable area 22 according to a selection operation of the user in the leftward direction of the operable area 21; the target element 24 is displayed in the operable area 21, and the element 26 to be selected among the target items to which the target element 24 belongs is also displayed in the operable area 21.

For another example: determining a target element 25 located in the inoperable area 22 in accordance with a selection operation of the user in the rightward direction of the operable area 21; the target element 25 is displayed in the operable area 21, and the element 27 to be selected among the target items to which the target element 25 belongs is also displayed in the operable area 21.

In the embodiment of the application, the selection area of the selector is divided into a first display area and a second display area, wherein the first display area is a user operable area, the second display area is a user inoperable area, selection operation received by the selector for the first display area can enable a user to display a selection item of the second display area as a target item in the first display area and simultaneously move a candidate element of the target item in the second display area along with the position of the target item, the second display area is completely invisible or partially invisible, so that based on the receiving operation of the first display area only, when the number of the selection items is large, a fixed number of the selection items are displayed in the selection item of the first display area, when the number of the selection items is increased, the selection items are only increased in the second display area without influencing the number of the selection items of the first display area, thereby ensuring the use range of the selector.

In the embodiment of the application, the selection operation of a target object in a first direction of a first display area of a selector is acquired; the interface area of the selector comprises a first display area and a second display area; determining a target element positioned in the second display area based on the selection operation and the display element of the first display area; the target elements are displayed in the first display area, and the elements to be selected in the target items are displayed in the second display area based on the second direction, the target items are selection items to which the target elements belong, and the elements to be selected are elements except the target elements in the elements included in the target items.

In an embodiment, the method further comprises: acquiring an array set; wherein the set of arrays comprises at least one array; each array in the array set is composed of at least two elements; creating a corresponding number of target items according to the number of the arrays in the array set; for each target item, creating a child container in the target item according to the elements in the corresponding array.

Here, the selector is created before the selection operation is performed on the selector. When creating a selector, a set of arrays is first obtained. The array set comprises at least one array, and the format of the array can be a JSON format. Each array is composed of at least two elements, and the types of the at least two elements in each array can be the same or different; the type of the element can be a text type, a picture type and a composite type.

Here, after the array set is acquired, the number of arrays in the array set is determined. The number of the arrays in the array set may be one or more. And according to the number of the arrays in the array set, creating the target items with the number equal to that of the arrays. Wherein, the target item can be a vertical sliding container, a horizontal sliding container, etc.

When the set of arrays includes an array, a target item is created. Such as: array set 1 includes { array 1}, from array 1, target item 1 is created.

When the array set comprises more than one array, the target items with corresponding quantity are created according to the quantity of the arrays. Such as: array set 2 includes { array 1, array 2}, and target item 1 and target item 2 are created from array 1 and array 2. For another example: the array set 3 comprises { array 1, array 2, array 3, array 4}, and the target item 1, the target item 2, the target item 3 and the target item 4 are created according to the array 1, the array 2, the array 3 and the array 4.

Here, after the target item is successfully created, for each target item, a child container in the target item is created according to the elements in the array corresponding to the target item. In creating the child containers in the target item, the number of child containers may be determined based on the number of elements in the array. And determining the layout format of the sub-container according to the type of the elements, and inputting the elements in the array into the corresponding sub-container.

In the embodiment of the application, an array set is obtained; creating a corresponding number of target items according to the number of the arrays in the array set; for each target item, creating a child container in the target item according to the elements in the corresponding array, thus constructing a selector.

In one embodiment, the obtaining the set of arrays includes: receiving the set of arrays through a first interface of the selector; or, receiving a data request link through a second interface of the selector; and acquiring the array set based on the data request link.

Here, the acquisition of the array set may be achieved in the following first or second manner.

Receiving an array set through a first interface in a first mode;

here, the first interface may be a setSrcData interface. The set of arrays is received over the setSrcData interface. And processing the array set after receiving the array set, namely caching the data in the received array set.

The second mode is that the data request link is received through a second interface; based on the data request link, an array set is obtained.

Here, the second interface may be a setNetSrcData interface. And receiving a data request link through a setNetSrcData interface, and acquiring an array set through a network by taking the address of the data request link as a target address. And processing the array set after the array set is obtained, namely caching the data in the received array set.

After the array set is obtained, the element type of each element of each array in the array set is determined, and the corresponding relationship among the arrays, the elements and the element types is established, so that the corresponding elements and arrays can be quickly found according to the element types.

In the embodiment of the application, when the array set is obtained, the array set can be directly received through the first interface; or the data request link is received through the second interface, and the array set is obtained based on the data request link.

In one embodiment, the creating, for each target item, a child container in the target item according to an element in the corresponding array includes: determining the number of sub-containers in the target item according to the number of elements in the array; determining a layout style of the sub-container according to the type of the element; wherein the type of the element comprises at least one of: text type, picture type, composite type; and inputting the elements into the corresponding sub-containers.

Here, for each target item, the number of child containers in the target item is determined based on the number of elements in the array corresponding to the target item. Wherein the array comprises at least two elements.

Such as: the elements in the array 1 are [ C1, C2], and the number of the sub containers in the target item 1 corresponding to the array 1 is determined to be 2 according to the number of the elements in the array 1; for another example: the elements in the array 2 are [ C1, C2, C3 and C4], and the number of sub containers in the target item 2 corresponding to the array 2 is determined to be 4 according to the number of the elements in the array 2.

Here, the layout style of the child container is determined according to the type of the element. Wherein the type of element comprises at least one of: text type, picture type, compound type.

If the type of the element is a text type, the layout style of the sub-container corresponding to the element is a text style; if the type of the element is the picture type, the layout style of the sub-container corresponding to the element is the picture style; and if the type of the element is the composite type, the layout style of the sub-container corresponding to the element is the composite style. It can be seen that the layout style of the sub-containers includes at least one of: text style, picture style, composite style.

It should be noted that, if the type of each element in at least two elements in the array is the same, the layout style of each child container in the target item is also the same; if the type of each element in at least two elements in the array is not the same, the layout style of each sub-container in the target item is also different.

Such as: if the elements in the array 3 comprise [ picture 1, picture 2 and picture 3], determining that all the layout styles of the sub-container 1, the sub-container 2 and the sub-container 3 in the target item 3 are picture styles; for another example: and if the elements in the array 4 comprise [ character 1, picture 2 and compound 3], determining that the layout style of the sub-container 1 in the target item 4 is a character style, the layout style of the sub-container 2 is a picture style and the layout style of the sub-container 3 is a compound style.

After the number and the layout style of the sub-containers are determined, the elements in the array are input into the corresponding sub-containers to realize the binding of the elements and the sub-containers.

As in the above example, for example: the elements in array 3 are: respectively inputting a picture 1, a picture 2 and a picture 3 into a sub-container 1, a sub-container 2 and a sub-container 3 of a target item 3; for another example: the elements in array 4 are: character 1 is input into a sub-container 1 in a target item 4, and the elements in the array 4 are: picture 2 is input into a sub-container 2 in the target item 4, and the elements in the array 4 are: the composite 3 is input into a neutron container 3 in the target item 4.

In the embodiment of the application, the number and the layout style of the sub-containers are determined according to the elements in the array, and the elements in the array are input into the corresponding sub-containers.

In an embodiment, the method further comprises: displaying elements in the child containers located in the visualization area; and loading elements in the child containers adjacent to the visualization area in the non-visualization area.

Here, some regions in the selector are located in the visualization region of the terminal, some regions are located in the non-visualization region of the terminal, and after the elements in the array are input into the corresponding child container, if the region to which the child container belongs is located in the visualization region, the elements in the child container located in the visualization region are displayed. At the same time, elements of the child containers within the non-visualization area adjacent to the visualization area are loaded.

Here, a preset range may be set, the non-visualization region located within the preset range is determined as a region adjacent to the visualization region, elements of the child container in the region are loaded, and the rest of the non-visualization regions are not processed.

In the embodiment of the application, the elements of the sub-containers located in the visual area can be displayed, the elements of the sub-containers adjacent to the visual area are loaded in the non-visual area, and when the elements of the sub-containers in the non-visual area are displayed in the visual area, the loading time is saved, and the user experience is improved.

In an embodiment, the method further comprises: acquiring the type of an element to be updated; searching an element to be replaced with the same type as the element to be updated in the child container of the target item; and replacing the element to be replaced with the element to be updated.

When the elements in the sub-containers are updated, the elements to be updated are obtained, the types of the elements to be updated are determined, the elements to be replaced are searched in the sub-containers of the target item, the elements to be replaced and the elements to be updated have the same types, and the elements to be replaced are replaced by the elements to be updated after the elements to be replaced are determined.

Such as: the element to be updated is a picture 2, the element in the sub-container 1 in the target item is a text 1, the element in the sub-container 2 is the picture 1, and the element in the sub-container 3 is a composite 1; the type of the element to be updated is the picture type, and the type of the element found in the sub-container 2 is the picture type, so that the element picture 1 in the sub-container 2 is replaced by the picture 2.

Here, before searching for the element to be replaced having the same type as the element to be updated in the child container of the target item, a correspondence between the element in the child container and the type of the element may be determined in advance, and the element to be replaced having the same type as the element to be updated may be determined according to the correspondence.

In the embodiment of the application, the elements to be replaced with the same type in the sub-containers are replaced by the elements to be updated according to the types of the elements to be updated, so that the array of the whole group can be prevented from being replaced.

In an embodiment, the method further comprises: determining the position of the newly added array in the second display area; according to the position, a new added target item of the new added array is created and input in the second display area; determining the number of newly added child containers in the newly added target item according to the number of elements in the newly added array; determining the layout style of the newly added sub-container according to the types of the elements in the newly added array; and inputting the elements in the newly added array into the newly added child container.

When the new array is added to the selector after the selector is created, the position of the new array in the second display area is determined first, and a new target item corresponding to the new array is created at the position, at which time the display content in the first display area is unchanged.

Such as: the second display area of the selector is sequentially arranged: the position of the newly added array 1 can be determined to be located before the target item 1, or the position of the newly added array 1 can be determined to be located between the target item 1 and the item 2, or the position of the newly added array 1 can be determined to be located after the target item 3, and the newly added target item is created at the corresponding position.

Here, the number of newly added child containers in the newly added target item is determined based on the number of elements in the newly added array.

Such as: the elements in the newly added array 1 are [ D1, D2], and the number of new additive sub-containers in the newly added target item 1 corresponding to the newly added array 1 is determined to be 2 according to the number of the elements in the newly added array 1; for another example: the elements in the newly added array 2 are [ C1, C2, C3 and C4], and the number of new additive sub-containers in the newly added target item 2 corresponding to the newly added array 2 is determined to be 4 according to the number of the elements in the newly added array 2.

Here, the layout style of the newly added child container is determined according to the type of the element. Wherein the type of element comprises at least one of: text type, picture type, compound type.

If the type of the element is a text type, the layout style of the new added sub-container corresponding to the element is a text style; if the type of the element is the picture type, the layout style of the new added sub-container corresponding to the element is the picture style; and if the type of the element is the composite type, the layout style of the new increment container corresponding to the element is the composite style. It can be seen that the layout style of the newly added child container includes at least one of the following: text style, picture style, composite style.

It should be noted that, if the type of each element in at least two elements in the newly added array is the same, the layout style of each newly added sub-container in the newly added target item is also the same; and if the types of each element in at least two elements in the newly added array are different, the layout style of each newly added sub-container in the newly added target item is also different.

Such as: determining layout styles of a new sub container 1, a new sub container 2 and a new sub container 3 in the new target item 3 to be all picture styles if elements in the new array 3 comprise [ picture 1, picture 2 and picture 3 ]; for another example: and determining that the layout style of the newly added sub-container 1 in the newly added target item 4 is a character style, the layout style of the newly added sub-container 2 is a picture style, and the layout style of the newly added sub-container 3 is a composite style if the elements in the newly added array 4 comprise [ characters 1, pictures 2 and composites 3 ].

After the number and the layout style of the new increment sub-containers are determined, the elements in the array are input into the corresponding new increment sub-containers so as to realize the binding of the elements and the new increment sub-containers.

As in the above example, for example: adding elements in the array 3: respectively inputting the picture 1, the picture 2 and the picture 3 into a new-added sub-container 1, a new-added sub-container 2 and a new-added sub-container 3 in a new target item 3; for another example: adding elements in the array 4: inputting the characters 1 into a new-added sub-container 1 in a new target item 4, and adding elements in an array 4: inputting the picture 2 into a new adding sub-container 2 in the new adding target item 4, and adding elements in the new adding array 4: the compound 3 is input into a new-plus-sub container 3 in a new-plus-target item 4.

In the embodiment of the application, the target items and the sub-containers corresponding to the newly added arrays can be added in the second display area, so that the display content of the first display area is kept unchanged, and the problem that the selector is not completely displayed along with the increase of the data types is avoided.

The display method provided by the embodiment of the present application is further described below by taking a selector in an Android system as an example.

Currently, there are two types of selectors in the Android system: the Android system self-contained selector is simple, only the most basic selection can be made, and the style is single. The time selector 31 shown in fig. 3 can select only two options on the left side. Another is an open source selector provided by third party developers, which can extend many functions, such as: year, month, day, etc., as shown in fig. 4, as a time selector 41.

It can be seen that the basic functions of both the Android system-owned selector and the open-source third-party selector can be satisfied, but for the two selectors, as the data types, i.e. the selection items, increase, the area for accommodating the data types also increases linearly. For example, if data types such as constellation and week are added to fig. 4, the area of the selector will not be accommodated; and at present, the selectors and the third-party selectors of the Android system basically only support data of text types, and do not support data of picture types and composite types. This imposes restrictions on the use scenarios of the selector.

The embodiment of the application provides a selector, which does not have the problem that the width of the selector is increased along with the increase of the data types, or the problem that the width of the selector is not required to be increased completely in the display process; the selector not only supports the character type, but also supports the picture type and the composite type, and the restriction of the use scene of the self-contained selector of the Android system or a third-party selector is solved to a great extent.

The selector of the embodiment of the application comprises: a selector having one vertically sliding window and a selector having a plurality of vertically sliding windows. An interface of a selector having one vertically sliding window and a selector having a plurality of vertically sliding windows may be divided into a visible region and an invisible region. The sliding window can be vertically slid in a selector having one vertically sliding window, and can be vertically slid and horizontally slid in a selector having a plurality of vertically sliding windows.

In an example, as shown in fig. 5, a selection area of the selector has a vertically sliding window 51, the vertically sliding window 51 corresponds to a selection item, and the selection area of the selector includes a first display area 52 and a non-operable area, i.e., a second display area 53, where the first display area 52 is a visible area and the second display area 53 is a non-visible area.

In yet another example, as shown in fig. 6, the selector has a plurality of vertically sliding windows 61, one vertically sliding window 61 corresponding to one selection item, wherein the selection area of the selector includes a first display area 62 and an inoperable area, i.e., a second display area 63. The first display area 62 is a visible area, and the second display area 63 is an invisible area.

The core principle of the embodiment of the application is realized by combining gestures with a self-defined selector. The visible area of the selector in the embodiment of the present application is fixed. The selector in the embodiment of the application can be slid up, down, left and right, and when a user needs to view the next type of data, the user only needs to slide horizontally to the left or the right or slide vertically to the up or the down to see other types of data. The problem that the content in the tiled selector can be limited in width is avoided by this design. The selector in the embodiment of the application has the advantages that the width is not changed and the interaction is more friendly as the content types are increased.

Here, the style type of the inner item of the vertically sliding window, as shown in fig. 7, may include: text type 71, picture type 72, and compound type 73.

Here, the creation of the selector of the embodiment of the present application includes the following steps:

firstly, the method comprises the following steps: the selector of the embodiment of the present application is initialized.

Firstly, setting the width of a selector;

here, the user can set the width of the selector according to his/her real scene. Wherein, the setting mode includes three kinds: MODE _1, MODE _2, MODE _ 3. Wherein the content of the first and second substances,

MODE _ 1: the width of the token selector fills the parent container.

MODE _ 2: the representation selector wraps the sub-container of the representation selector;

MODE _ 3: the characterization selector is set according to the width of the user's incoming.

In a second step, data is added to the selector.

Here, there are two ways to add data to the selector: an offline mode and a network mode.

1. An off-line mode: the data required by the user is transferred to the selector as specified by calling the setSrcData interface of the selector.

The data formats specified by the selector include two types:

in the first mode, data is transmitted according to the format of a JSON array, if various different data exist, different JSON arrays can be put into the JSON array for transmission, when a user transmits the data according to the mode, a data processing module inside a selector can process the data, namely, an add method of the data processing module can be called inside the selector, and the data is cached for a window management module to use. And the window management module can create vertical sliding windows with the same quantity according to the difference of the quantity of the arrays in the JSON array set.

In the second way, data and types are set separately. The type and the amount of data are set first through the setDataType method provided by the selector, and the data type is set as follows:

SrcDataTxt: the type of the data is text;

SrcDataImage: the data is a type of picture;

SrcDataClass: data is generic class of class;

the number is set as follows:

SrcDataSize: refers to the amount of data of different types, not the amount of each set of data.

Here, after the type and the number are set, the type and the number are associated with the data. Wherein, the data format is JSON format. The data processing module establishes a corresponding mapping relation between the set type and quantity and the data, and then calls an add method of the data processing module to cache the data for the window management module to use. The window management module can create a vertical sliding window according to the set data type and quantity and the corresponding data.

2. Network mode: by calling an interface of setNetSrcData of the selector, a user transmits a link of a data request to the selector, the selector calls an internal network library to start a request for the link, and JSON data acquired through a network are transmitted to the data processing module.

Here, the data is transmitted according to the format of the JSON array, if there are a plurality of different data, the data can be transmitted by being put into different JSON arrays, and when the data returned from the network meets the data specification, the data processing module inside the selector can process the data, that is, the add method of the data processing module can be called inside the selector to cache the data for the window management module to use. And the window management module can create vertical sliding windows with the same quantity according to different quantity of arrays in the JSON array set.

And thirdly, setting the style of the sub-items, namely the items in the vertical sliding window, and controlling the format of each sub-Item through setItemStyle provided by the selector. Wherein the content of the first and second substances,

STYLE _ TEX: the sub-items are texts;

STYLE _ IMG: the sub-items are pictures;

STYLE _ LAYOUT: the sub-items are composite layouts.

When the STYLE _ TXT is introduced by the user, the STYLE of each sub-item of the vertically sliding window is in text format.

When the user enters the STYLE _ IMG, the STYLE of each sub-item of the vertical sliding window is the picture format.

When the user enters STYLE _ LAYOUT, the STYLE of each sub-item of the vertical sliding window is in a composite LAYOUT format. When the user enters the STYLE _ LAYOUT, the composite LAYOUT format may be set by calling the method of setItemSrcLayout of the selector. Here, the composite layout format includes:

composite layout format 1: layout1 (built-in layout 1);

composite layout format 2: layout2 (built-in layout 2);

composite layout format 3: layout3 (custom layout);

the

composite layout formats

1 and 2 are two layouts built in the embodiment of the application, and the composite layout format 3 can support a user to transmit a layout file with good customization.

Secondly, the method comprises the following steps: the display method of the selector is invoked after initialization to expose the selector page.

In the first step, the window management module determines the number of vertical sliding windows that need to be added in the horizontal sliding window according to the number of the processed arrays. Then, in the horizontal sliding window in the window management module, the same number of vertical sliding windows are created.

And secondly, adding a sub-layout for each vertical sliding window. Here, the sub-layout is added to the vertically sliding window in the following type.

If the data type DateType is SrcDataTxt and the layout STYLE is STYLE _ TEX, each item loads the layout according to the text format, and the data processed by the data module is bound with the text layout to fill the data in the item of each vertical sliding window.

If the data type setDataType is SrcDataImage and the layout STYLE is STYLE _ IMG, each item loads the layout according to the picture format, and when loading the picture, the loadImage interface method in the picture library is called to load the picture. And then binding the data processed by the data processing module with the corresponding picture layout, and filling each item in the vertical sliding window with the data.

If the data type setDataType is SrcDataClass and the LAYOUT STYLE is STYLE _ LAYOUT, each item is loaded according to the composite LAYOUT format. When the composite layout is loaded, different layout files are loaded according to the composite layout format, when the composite layout format 1 is used, the built-in layout of layout1 is loaded, when the composite layout format 2 is used, the built-in layout of layout2 is loaded, and when the composite layout format 3 is used, the customized layout file transmitted by a user is loaded. Then, binding the data processed by the data processing module with the container layout, and filling each item in the vertical sliding window with the data.

And thirdly, when filling each item in the vertical sliding window with data, only loading the data in the visual area of the user, and loading the data in the invisible area adjacent to the visual area, which is called preloading. The pre-loaded threshold is 5 by default, which may be provided to the user. When the user slides the interface, the data of the visible area and the data of the adjacent invisible area are refreshed dynamically. By doing so, unnecessary memory consumption can be reduced to a great extent, the interface of the user visual area is reused, and the fluency is improved.

Thirdly, the method comprises the following steps: and (4) user interaction.

After the selector of the embodiment of the application is displayed, the user can control the desired part through gestures. The principle of the selector of the embodiment of the application is as follows:

in the first step, the window management module has a horizontal layout manager and a vertical layout manager. The horizontal layout manager is responsible for creating containers that can accommodate horizontal direction add layouts and containers. Meanwhile, the horizontal layout manager calls a gesture control module for adding gesture monitoring in the horizontal direction to the container.

And secondly, judging the horizontal direction of the sliding of the user through gesture monitoring when the user slides in the visible area. As shown in fig. 8, coordinates 81(x0, y0), 82(x1, y0), and 83(x0, y1) are included. When x1-x0>0, it indicates that the user is sliding to the right, and then the distance sliding to the right, i.e., the distance of | x1-x0| is calculated by acceleration to calculate the actual sliding distance, and then the horizontally sliding content list component of the selector is slid by the corresponding distance. After the sliding is finished, the data of the user visual area and the invisible area adjacent to the visual area are updated.

Third, the vertical layout manager is responsible for creating containers that can accommodate the vertical add layouts and containers. Meanwhile, the vertical layout manager calls a gesture control module for adding gesture monitoring in the vertical direction to the container.

And fourthly, judging the sliding vertical direction of the user by gesture monitoring when the user slides the visible area. As shown in fig. 8, coordinates 81(x0, y0), 82(x1, y0), and 83(x0, y1) are included. When y1-y0>0, it indicates that the user is sliding down, and then the distance of sliding down, i.e., the distance of | y1-y0| is calculated by acceleration to calculate the actual sliding distance, and then the vertically sliding content list element of the selector is slid by the corresponding distance. After the sliding is finished, the data of the user visual area and the invisible area adjacent to the visual area are updated.

Fourthly: and (4) updating the data.

First, when updating data using the selector in the embodiment of the present application, the selector in the embodiment of the present application provides an update interface in an external API interface layer, through which data to be updated and a type of the data are transmitted.

And secondly, calling an update interface in the data processing module by an external API interface layer, and searching corresponding data by the update interface through the transmitted data type.

And thirdly, updating the corresponding type of data and informing the window management module to update the corresponding window.

The selector provided in the embodiment of the present application, as shown in fig. 9, includes: an external interface layer 91, a gesture control module 92, a window management module 93, a data processing module 94, a network library 95 and a picture library 96; the window management module 93 includes: a horizontal layout manager and a vertical layout manager. Wherein the external interface layer 91 provides an external API to enable interaction with a user.

The embodiment of the application can achieve the following technical effects:

1. in a fixed width, the switching layout of up-down and left-right sliding is realized by increasing the sliding monitoring of the gesture, and the technical principle of the key point is that the selector is realized by combining a gesture control mode and a window management mode.

2. The layout content of the embodiment of the application is not limited to characters, and pictures, various common layouts and any custom layout are added.

Based on the foregoing embodiments, the present application provides a display apparatus, which includes modules included in the apparatus and units included in the modules, and can be implemented by a processor in a computer device; of course, the implementation can also be realized through a specific logic circuit; in implementation, the processor may be a Central Processing Unit (CPU), a Microprocessor (MPU), a Digital Signal Processor (DSP), a Field Programmable Gate Array (FPGA), or the like.

Fig. 10 is a schematic structural diagram of a display device according to an embodiment of the present application, and as shown in fig. 10, the display device 100 includes: a first obtaining module 1001, a first determining module 1002 and a displaying module 1003; wherein the content of the first and second substances,

a first obtaining module 1001 configured to obtain a selection operation of a target object in a first direction with respect to a first display area of a selector; the interface area of the selector comprises a first display area and a second display area;

a first determining module 1002, configured to determine, based on the selection operation and the display element of the first display area, a target element located in the second display area;

a display module 1003, configured to display the target element in the first display area, and display a candidate element in a target item in the second display area based on a second direction, where the target item is a selection item to which the target element belongs, and the candidate element is an element other than the target element in elements included in the target item.

In one embodiment, the display device 100 further includes: the system comprises a second acquisition module, a first creation module and a second creation module; wherein the content of the first and second substances,

the second obtaining module is used for obtaining an array set; wherein the set of arrays comprises at least one array; each array in the array set is composed of at least two elements;

the first creating module is used for creating target items with corresponding quantity according to the quantity of the arrays in the array set;

and the second creating module is used for creating the child container in the target item according to the elements in the corresponding array for each target item.

In one embodiment, the second obtaining module includes: the device comprises a first receiving unit, a second receiving unit and an acquiring unit; wherein the content of the first and second substances,

the first receiving unit is used for receiving the array set through a first interface of the selector;

the second receiving unit is used for receiving a data request link through a second interface of the selector;

the obtaining unit is configured to obtain the array set based on the data request link.

In one embodiment, the second creation module comprises: a first determination unit, a second determination unit, and an input unit; wherein the content of the first and second substances,

the first determining unit is used for determining the number of the sub-containers in the target item according to the number of the elements in the array;

the second determining unit is used for determining the layout style of the sub-container according to the type of the element; wherein the type of the element comprises at least one of: text type, picture type, composite type;

the input unit is used for inputting the elements into the corresponding sub-containers.

In an embodiment, the second creating module further comprises: a first display unit and a second display unit; wherein the content of the first and second substances,

the first display unit is used for displaying elements in the sub containers in the visualization area;

the second display unit is used for loading elements in the sub-containers which are adjacent to the visualization area in the non-visualization area.

In one embodiment, the display device 100 further includes: the third acquisition module, the search module and the replacement module; wherein the content of the first and second substances,

the third obtaining module is used for obtaining the type of the element to be updated;

the searching module is used for searching the element to be replaced with the same type as the element to be updated in the child container of the target item;

the replacing module is used for replacing the element to be replaced with the element to be updated.

In one embodiment, the display device 100 further includes: the device comprises a second determining module, a third determining module, a fourth determining module and an input module; wherein the content of the first and second substances,

the second determining module is used for determining the position of the newly added group in the second display area;

the third determining module is configured to create and input a new target item of the new array in the second display area according to the position;

the fourth determining module is configured to determine a layout style of the newly added child container according to the type of the element in the newly added array;

and the input module is used for inputting the elements in the newly added array into the newly added sub-container.

The above description of the apparatus embodiments, similar to the above description of the method embodiments, has similar beneficial effects as the method embodiments. For technical details not disclosed in the embodiments of the apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be noted that, in the embodiment of the present application, if the display method is implemented in the form of a software functional module and sold or used as a standalone product, the display method may also be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read Only Memory (ROM), a magnetic disk, or an optical disk. Thus, embodiments of the present application are not limited to any specific combination of hardware and software.

Correspondingly, the present application provides an apparatus, that is, a computer apparatus, including a memory and a processor, where the memory stores a computer program executable on the processor, and the processor executes the program to implement the steps in the display method provided in the foregoing embodiment.

Accordingly, embodiments of the present application provide a storage medium, that is, a computer-readable storage medium, on which a computer program is stored, and the computer program, when executed by a processor, implements the steps in the display method provided in the above embodiments.

Here, it should be noted that: the above description of the storage medium and device embodiments is similar to the description of the method embodiments above, with similar advantageous effects as the method embodiments. For technical details not disclosed in the embodiments of the storage medium and apparatus of the present application, reference is made to the description of the embodiments of the method of the present application for understanding.

It should be noted that fig. 11 is a schematic hardware entity diagram of a computer device according to an embodiment of the present application, and as shown in fig. 11, the computer device 1100 includes: a processor 1101, at least one communication bus 1102, at least one external communication interface 1104 and a memory 1105. Wherein the communication bus 1102 is configured to enable connective communication between these components. Wherein the computer device may further include: the user interface 1103, the user interface 1103 may comprise a display screen, and the external communication interface 1104 may comprise standard wired and wireless interfaces.

The Memory 1105 is configured to store instructions and applications executable by the processor 1101, and may also buffer data (e.g., image data, audio data, voice communication data, and video communication data) to be processed or already processed by the processor 1101 and modules in the computer device, and may be implemented by a FLASH Memory (FLASH) or a Random Access Memory (RAM).

It should be appreciated that reference throughout this specification to "one embodiment" or "an embodiment" means that a particular feature, structure or characteristic described in connection with the embodiment is included in at least one embodiment of the present application. Thus, the appearances of the phrases "in one embodiment" or "in an embodiment" in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. It should be understood that, in the various embodiments of the present application, the sequence numbers of the above-mentioned processes do not mean the execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present application. The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiment of the apparatus is only illustrative, for example, the splitting of the unit is only a logical function splitting, and there may be other splitting manners in actual implementation, such as: multiple units or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented. In addition, the coupling, direct coupling or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection between the devices or units may be electrical, mechanical or other forms.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units; can be located in one place or distributed on a plurality of network units; some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be separately regarded as one unit, or two or more units may be integrated into one unit; the integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional unit.

Those of ordinary skill in the art will understand that: all or part of the steps for realizing the method embodiments can be completed by hardware related to program instructions, the program can be stored in a computer readable storage medium, and the program executes the steps comprising the method embodiments when executed; and the aforementioned storage medium includes: various media that can store program codes, such as a removable Memory device, a Read Only Memory (ROM), a magnetic disk, or an optical disk.

Alternatively, the integrated units described above in the present application may be stored in a computer-readable storage medium if they are implemented in the form of software functional modules and sold or used as independent products. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the related art may be embodied in the form of a software product stored in a storage medium, and including several instructions for enabling a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a removable storage device, a ROM, a magnetic or optical disk, or other various media that can store program code.

The above description is only for the embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method of displaying, the method comprising:

2. The method of claim 1, further comprising:

acquiring an array set; wherein the set of arrays comprises at least one array; each array in the array set is composed of at least two elements;

creating a corresponding number of target items according to the number of the arrays in the array set;

for each target item, creating a child container in the target item according to the elements in the corresponding array.

3. The method of claim 2, wherein obtaining the set of arrays comprises:

receiving the set of arrays through a first interface of the selector; alternatively, the first and second electrodes may be,

receiving a data request link through a second interface of the selector;

and acquiring the array set based on the data request link.

4. The method of claim 2, wherein for each target item, creating child containers in the target item according to elements in the corresponding array comprises:

determining the number of sub-containers in the target item according to the number of elements in the array;

determining a layout style of the sub-container according to the type of the element; wherein the type of the element comprises at least one of: text type, picture type, composite type;

and inputting the elements into the corresponding sub-containers.

5. The method of claim 4, further comprising:

displaying elements in the child containers located in the visualization area;

and loading elements in the child containers adjacent to the visualization area in the non-visualization area.

6. The method of claim 2, further comprising:

acquiring the type of an element to be updated;

searching an element to be replaced with the same type as the element to be updated in the child container of the target item;

and replacing the element to be replaced with the element to be updated.

7. The method of claim 2, further comprising:

determining the position of the newly added array in the second display area;

according to the position, a new added target item of the new added array is created and input in the second display area;

determining the number of newly added child containers in the newly added target item according to the number of elements in the newly added array;

determining the layout style of the newly added sub-container according to the types of the elements in the newly added array;

and inputting the elements in the newly added array into the newly added child container.

8. A display device, characterized in that the device comprises: the device comprises a first acquisition module, a first determination module and a display module; wherein the content of the first and second substances,

the first acquisition module is used for acquiring the selection operation of the target object in a first direction aiming at the first display area of the selector; the interface area of the selector comprises a first display area and a second display area;

9. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the steps in the display method according to any one of claims 1 to 7 when executing the computer program.

10. A storage medium on which a computer program is stored, characterized in that the computer program, when executed by a processor, implements the display method of any one of claims 1 to 7.