List display method, device and storage medium

Abstract

The present application proposes a list display method, device and storage medium, which relate to the field of computer technology. The method includes: obtaining data items of a module to be displayed in a list; determining a target display style to be displayed from a plurality of preset candidate display styles according to the size relationship between the width of the data items in the module and the width of the list; displaying the data items in the module according to the target display style; wherein the module is located in the list, and the module is used to present a category of commodity information, and the plurality of candidate display styles include a waterfall display style and a row and column display style, and the row and column display style includes at least one of a row display style, a column display style and a row and column mixed display style. The present application can improve the display effect of the list.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a list display method, device and storage medium. Background Art

[0002] Application (APP) lists (for example, lists displayed on the search page of online e-commerce platforms) often display a wide variety of products and services. Lists can be displayed in a variety of styles on the screen, including row display style, column display style, row and column combination display style, and waterfall display style.

[0003] In the traditional display method, users can select a display style to display the list in the APP list interface according to their habits or preferences. For example, users can directly choose to display the list in a row display style or a column display style. However, in some cases, the display style selected based on the user's habits or preferences may not be suitable for the content in the list, and the display effect may not be very good. Therefore, a better list display method is urgently needed. Summary of the invention

[0004] The present application provides a list display method, device and storage medium, which compares the relationship between the width of data items in a module and the width of the list, thereby better determining a display style suitable for the list and improving the display effect of the list.

[0005] To achieve the above-mentioned purpose, a first aspect of an embodiment of the present application proposes a list display method, which includes:

[0006] Get the data item of the module to be displayed in the list;

[0007] According to the size relationship between the width of the data items in the module and the width of the list, a target display style to be displayed is determined from a plurality of preset candidate display styles;

[0008] Display the data items in the module according to the target display style;

[0009] Among them, the above-mentioned module is located in the list, and the module is used to present a category of product information in the list. The multiple candidate display styles include waterfall display style and row and column display style. The row and column display style includes at least one of row display style, column display style and row and column mixed display style.

[0010] The waterfall display style may be a double-column waterfall display style or a multi-column waterfall display style. Alternatively, the waterfall display style may be a double-row waterfall display style or a double-row waterfall display style.

[0011] The above-mentioned product information may include physical product information (e.g., medicines) presented on the shopping app, virtual product information (e.g., online courses) or service information (e.g., medical service information), etc.

[0012] The data item in the above module can be any data item in the module. For example, the data item in the above module can be the first data item or the last data item in the module. Since the widths of the data items in a module are generally the same, the target display style can be determined based on the relationship between the width of any data item in a module and the width of the list, and the determined target display style can be applied to all data items in the module.

[0013] The above module is not a logical function module in a device or equipment, but an area in a list for displaying or presenting information of a certain category of goods.

[0014] In some embodiments, the above-mentioned multiple candidate display styles include row and column display styles, and the above-mentioned method of determining the target display style to be displayed from the preset multiple candidate display styles according to the size relationship between the width of the data item in the module and the width of the list, and determining the target display style from the multiple candidate display styles includes:

[0015] Extract module data items and list width data;

[0016] When the width of the data items in the module is the same as the width of the list, the target display style is determined to be the column display style.

[0017] The above column display style may specifically refer to that data items are displayed in order from top to bottom.

[0018] When the width of the data items in the module is the same as the width of the list, the column display style can be used to effectively reduce the space waste in the list and improve the display effect.

[0019] In some embodiments, the above-mentioned multiple candidate display styles include row and column display styles, and the above-mentioned method of determining the target display style to be displayed from the preset multiple candidate display styles according to the size relationship between the width of the data item in the module and the width of the list includes:

[0020] Extract the module's data items and the list's height data;

[0021] When the height of the data items in the module is the same as the height of the list, the target display style is determined to be the row display style.

[0022] The above-mentioned row display style may specifically refer to that the data items are displayed in order from left to right.

[0023] When the height of the data items in the module is the same as the height of the list, the row display style can be used to effectively reduce space waste in the list and improve the display effect.

[0024] In some embodiments, the above-mentioned multiple candidate display styles include a waterfall display style, and the above-mentioned method of determining the target display style to be displayed from the preset multiple candidate display styles according to the size relationship between the width of the data item in the module and the width of the list includes:

[0025] In the event that the width of the data items in the module is different from the width of the list, determining a first preset threshold;

[0026] When the width of the data item in the module is less than or equal to the first preset threshold, the target display style is determined to be the waterfall display style.

[0027] When the width of a data item in a module is less than or equal to a certain threshold, directly using a column display style will cause a waste of list space. In this case, using a waterfall display style can reduce the waste of list space and improve the display effect.

[0028] The first preset threshold may be a preset threshold.

[0029] In some embodiments, the value of the first preset threshold is half of the width of the list.

[0030] In some embodiments, the value of the first preset threshold is (W-2*S) / 2, where W is the width of the list, and S is the gap distance between two adjacent columns of waterfall flows when the list is displayed in waterfall flow style.

[0031] The above W and S are both values ​​greater than 0, W and S may be preset values, and the sizes of W and S may be specifically represented by the number of pixels.

[0032] It should be understood that in this solution, when the width of the data item in the module is less than the first preset threshold, the target display style may be determined to be the waterfall display style.

[0033] In some embodiments, the waterfall display style is a double-column waterfall display style. When it is determined that the target display style is a double-column waterfall display style, the data items in the module displayed according to the target display style include:

[0034] The display position of the current data item to be displayed in the module is determined according to the positions of the first data item and the second data item in the module, wherein the first data item and the second data item are two data items displayed before the current data item in the module.

[0035] In some embodiments, before determining the display position of the current data item to be displayed in the module according to the positions of the first data item and the second data item in the module, the method further includes:

[0036] Obtain location information of the first data item and the second data item in the module.

[0037] In some embodiments, determining the display position of the current data item to be displayed in the module according to the positions of the first data item and the second data item in the module includes:

[0038] In the case where the distance between the bottom of the first data item and the upper boundary of the top of the module is greater than the distance between the bottom of the second data item and the upper boundary of the top of the module, displaying the current data item below the first data item;

[0039] When the distance between the bottom of the first data item and the upper border of the top of the module is smaller than the distance between the bottom of the second data item and the upper border of the top of the module, it is determined that the current data item is displayed below the second data item.

[0040] In some embodiments, the waterfall display style is a double-column waterfall display style. When it is determined that the target display style is a double-column waterfall display style, the method of determining the display position of the current data item to be displayed in the module according to the position of the first data item and the second data item in the module includes:

[0041] The display position of the current data item to be displayed in the module is determined according to the size relationship between the distance between the bottom of the first data item and the upper boundary of the top of the module, and the distance between the bottom of the second data item and the upper boundary of the top of the module.

[0042] The first data item and the second data item are two data items displayed before the current data item in the module. The current data item here is the data item to be displayed after the first data item and the second data item. That is to say, in the above module, after the first data item and the second data item are displayed, the current data item will be displayed. Here, the specific position of the current data item is determined according to the specific positions of the first data item and the second data item in the module.

[0043] When determining the display position of the current data item, the current data item can be placed below the data item whose bottom is shorter from the top of the module among the first data item and the second data item to save display space within the module, thereby rationally utilizing the display space within the module.

[0044] In some embodiments, before determining the display position of the current data item to be displayed in the module according to the distance between the bottom of the first data item and the upper boundary of the top of the module and the distance between the bottom of the second data item and the upper boundary of the top of the module, the method further includes:

[0045] Obtain the location information of the first data item and the second data item in the module.

[0046] In some embodiments, the above-mentioned determining the display position of the current data item to be displayed in the module according to the size relationship between the distance between the bottom of the first data item and the upper boundary of the top of the module and the distance between the bottom of the second data item and the upper boundary of the top of the module specifically includes:

[0047] In the case where the distance between the bottom of the first data item and the upper boundary of the top of the module is greater than the distance between the bottom of the second data item and the upper boundary of the top of the module, displaying the current data item below the first data item;

[0048] When the distance between the bottom of the first data item and the upper border of the top of the module is smaller than the distance between the bottom of the second data item and the upper border of the top of the module, it is determined that the current data item is displayed below the second data item.

[0049] The specific positions of the first data item and the second data item here can be represented by coordinates in a certain coordinate system. Specifically, the positions of the first data item and the second data item can be calculated in the coordinate system with the upper left corner of the list as the coordinate origin. The distance between the bottom of the first data item and the upper boundary of the top of the module is the value of the vertical coordinate of the bottom of the first data item in the coordinate system, and the distance between the bottom of the second data item and the upper boundary of the top of the module is the value of the vertical coordinate of the bottom of the second data item in the coordinate system.

[0050] In some embodiments, the above-mentioned determining the display position of the current data item to be displayed in the module according to the size relationship between the distance between the bottom of the first data item and the upper boundary of the top of the module and the distance between the bottom of the second data item and the upper boundary of the top of the module includes:

[0051] In the case where the distance between the bottom of the first data item and the lower boundary of the tail of the module is greater than the distance between the bottom of the second data item and the lower boundary of the tail of the module, determining that the current data item is displayed below the first data item;

[0052] When the distance between the bottom of the first data item and the lower boundary of the tail of the module is smaller than the distance between the bottom of the second data item and the lower boundary of the tail of the module, it is determined that the current data item is displayed below the second data item.

[0053] Optionally, when determining the distance between the bottom of the first data item and the tail of the module, the distance between the bottom of the first data item and the lower boundary of the tail of the module may be calculated, or the distance between the bottom of the first data item and the upper boundary of the tail of the module may be calculated. And when performing distance comparison, the distance between the bottom of the first data item and the tail of the module and the distance between the bottom of the second data item and the tail of the module may be compared, thereby determining which of the bottom of the first data item and the bottom of the second data item is closer to the tail of the module.

[0054] Through the above process, when determining the placement of each data item, the main thing is to place the current data item below the data item that is farther from the end of the module among the data items that have been displayed in the module (or place the current data item below the data item that is closer to the top of the module among the data items that have been displayed in the module). This can better utilize the list space and improve display efficiency (display more content in a limited space and reduce the waste of display space).

[0055] To achieve the above-mentioned purpose, a second aspect of an embodiment of the present application provides a display device for a list, the display device comprising:

[0056] An acquisition unit, used for acquiring data items of modules to be displayed in the list;

[0057] A processing unit, configured to determine a target display style to be displayed from a plurality of preset candidate display styles according to a size relationship between a width of a data item in a module and a width of a list;

[0058] A display unit, used for displaying data items in the module according to a target display style;

[0059] Among them, the above module is used to present a category of product information, and the multiple candidate display styles include waterfall display style and row and column display style. The row and column display style includes at least one of row display style, column display style and row and column mixed display style.

[0060] In some embodiments, the plurality of candidate display styles include row and column display styles, and the processing unit is specifically configured to:

[0061] Extract module data items and list width data;

[0062] When the width of the data items in the module is the same as the width of the list, the target display style is determined to be the column display style.

[0063] To achieve the above-mentioned purpose, the third aspect of an embodiment of the present application proposes an electronic device, which includes a memory and a processor, wherein a program is stored in the memory, and when the program is executed by the processor, the processor is used to execute the method in the above-mentioned first aspect.

[0064] To achieve the above-mentioned purpose, the fourth aspect of an embodiment of the present application proposes a computer-readable storage medium, which has a computer program stored therein. When the computer program is executed by a computer, the computer is used to execute the method in the above-mentioned first aspect.

[0065] The list display method, device and storage medium proposed in the present application can determine the display style that matches the data items in the module by comparing the size relationship between the width of the data items in the module and the width of the list, so that the data items in the module can be displayed in a suitable display style, which can improve the display effect of the list. BRIEF DESCRIPTION OF THE DRAWINGS

[0066] Figure 1 is a schematic diagram of the modules included in the list;

[0067] Figure 2 This is a schematic diagram of the internal components of the module;

[0068] Figure 3 A schematic flowchart of a list display method according to an embodiment of the present application;

[0069] Figure 4 A schematic flow chart for determining a target display style;

[0070] Figure 5 is a schematic flow chart for determining the display position of the current data item;

[0071] Figure 6 It is a schematic diagram of the data items placed in module 1;

[0072] Figure 7 It is a schematic diagram of the data items placed in module 1;

[0073] Figure 8 is a schematic block diagram of a display device according to an embodiment of the present application;

[0074] Fig. 9 A schematic diagram of the hardware structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0075] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0076] It should be noted that, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first", "second", etc. in the specification, claims and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0077] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0078] Before introducing the list display method of the present application, the basic situation of the list in the present application is first introduced.

[0079] The list mentioned in this application can be a list of goods, services and other information displayed in the display interface of an APP of an electronic device (for example, a smartphone, tablet computer, personal digital assistant (PDA), car computer, and any smart terminal such as an IoT device). For example, the list of this application can be a product interface presented in the interface of a smartphone shopping APP.

[0080] The above list can include different modules, each module can display a category of content or products, each module consists of a top (header), data items (cell) and a footer (footer), where the top can display information such as the title and the number of current classification data, and the data items can display the text, pictures and other content of each data. The footer can display functional logic entrances such as "View More". Generally speaking, there can be multiple data items in a module, and one data item can correspond to a product or a piece of content.

[0081] For example, after entering the keyword "cough" in the APP search box, the search results obtained include medical services and medicines related to cough. Then, the search results for medical services can correspond to one module, and the search results for medicines can correspond to another module. In the module corresponding to the search results for medicines, 5 medicines related to the treatment of cough can be included. Then, these 5 medicines related to the treatment of cough correspond to 5 data items respectively.

[0082] like Figure 1 As shown, the list includes modules 1 to 3, then module 1 may display search results for medical services related to "cough", module 2 may display search results for medicines related to "cough", and module 3 may display search results for other aspects.

[0083] In the present application, different display styles can be selected when the width of the data item in the module meets different size relationships with the width of the list. Each module can determine a more appropriate display style corresponding to the module according to the size relationship between the width of the data item therein and the width of the list, and each module can correspond to different display styles.

[0084] like Figure 2 As shown, module 1 includes a top portion, data items 1 to 6, and a tail portion. Specifically, data items 1 to 6 can be used to display different commodity information.

[0085] For example, when module 1 displays medicines related to cough, data items 1 to 6 may respectively display 6 medicines related to treating cough.

[0086] The following is a detailed description of the list display method of the embodiment of the present application in conjunction with the accompanying drawings.

[0087] Figure 3 A schematic flowchart of a list display method according to an embodiment of the present application. Figure 3 The method shown can be performed by an electronic device, which can be a smart phone, a tablet computer, a car computer, an Internet of Things device, etc.

[0088] Figure 3 The method shown includes steps S100 to S300, and these three steps are described in detail below.

[0089] S100, obtaining data items of modules to be displayed in a list.

[0090] S200: Determine a target display style to be displayed from a plurality of preset candidate display styles according to a size relationship between a width of a data item in a module and a width of a list.

[0091] The module is located in a list, and is used to present a category of product information in the list. The multiple candidate display styles include a waterfall display style and a row and column display style. The row and column display style includes at least one of a row display style, a column display style, and a row and column mixed display style.

[0092] The above-mentioned product information may include physical product information (e.g., medicines) presented on the shopping app, virtual product information (e.g., online courses) or service information (e.g., medical service information), etc.

[0093] The above-mentioned row display style may refer to a style in which data items are displayed in a row from left to right, the column display style may refer to a style in which data items are displayed in a column from top to bottom, and the row and column mixed display style may refer to a style in which data items are displayed in the form of multiple columns and rows.

[0094] It should be understood that the module in the present application is not a logical functional module in a device or equipment, but an area in a list used to display or present a certain type of content or product.

[0095] Generally speaking, the widths of the various data items in a module may be the same, so in the above step S200, the target display style may be determined based on the size relationship between the width of any data item in the module and the width of the list, and the target display style determined in this way may be used as the display style of all data items in the module. Alternatively, in order to simplify the solution, when determining the display style corresponding to the data items in each module, the target display style may be determined based on the relationship between the width of a specific data item in each module (which may be a data item at a fixed position or a data item in a fixed order, for example, the first data item or the last data item in the module) and the width of the list.

[0096] In an embodiment of the present application, if there are multiple modules in the list, the list display method of the embodiment of the present application can be used to determine the display style corresponding to each module, and finally present the data items in the module according to the display style corresponding to each module.

[0097] For example, the list includes module 1, module 2 and module 3. Through the list display method of the embodiment of the present application, it is determined that the target display style corresponding to module 1 and module 2 is the column display style, and the target display style corresponding to module 3 is the waterfall display style. Then, next, the data items in module 1 and module 2 in the list are displayed in the column display style, and the data items in module 3 are displayed in the waterfall display style.

[0098] S300, displaying data items in the module according to a target display style.

[0099] If the above step S300 is executed by a processor, then after determining to present the data items in the above module in the target display style, the processor can transmit the relevant data to the display screen for display. If the device executing the above step S300 has a display, the step S300 can be executed by the display of the device, so as to display the data items in the module in the target display style.

[0100] If a module includes 6 data items, then after a target display style is determined according to a data item in the module, the 6 data items in the module can be displayed in the target display style.

[0101] Combine the following Figure 4 The process of determining the target display style in step S200 is introduced in detail.

[0102] Figure 4 A schematic flowchart for determining a target display style.

[0103] Figure 4 The process shown includes steps S201 to S206, which are described in detail below.

[0104] S201 indicates the start of the judgment process.

[0105] S202, determining whether the width of the data items in the module is the same as the width of the list.

[0106] S203, if the width of the data items in the module is the same as the width of the list (the judgment result in S202 is "yes"), determine that the target display style is a column display style.

[0107] When the width of the data items in the module is the same as the width of the list, the column display style can be used to effectively reduce the space waste in the list and improve the display effect.

[0108] S204: If the width of the data item in the module is different from the width of the list, continue to determine whether the width of the data item in the module is less than or equal to a first preset threshold.

[0109] S205 , if the width of the data item in the module is less than or equal to the first preset threshold (the judgment result in S204 is “yes”), then determine that the target display style is a waterfall display style.

[0110] It should be understood that in the above step S205, it is also possible to determine that the target display style is the waterfall display style only when the width of the data item in the module is less than the first preset threshold.

[0111] When the width of a data item in a module is less than or equal to a certain threshold, directly using a column display style will cause a waste of list space. In this case, using a waterfall display style can reduce the waste of list space and improve the display effect.

[0112] S206, indicating that the judgment process is finished.

[0113] The first preset threshold may be a preset value, and the value of the first preset threshold may be half of the width of the list.

[0114] Optionally, the first preset threshold may also be a value smaller than half of the list width.

[0115] Specifically, the value of the above-mentioned first preset threshold can be (W-2*S) / 2, where W is the width of the list, S is the gap distance between two adjacent columns of waterfall flow when the list is displayed in waterfall flow style, and S is a preset value.

[0116] like Figure 2 As shown, W represents the width of the list, S represents the gap between two adjacent waterfalls when the waterfall style is displayed, w0 is the width of data item 1, Figure 2 In the example, the width w0 of data item 1 is equal to (W-2*S) / 2, so, Figure 2 The target display style of the data items in module 1 is the waterfall display style. Therefore, for Figure 2 Each data item in module 1 can be displayed in a waterfall display style.

[0117] The unit of the first preset value may specifically be pixel.

[0118] When the waterfall display style is specifically a double-column waterfall display style, and the target display style is determined to be a double-column waterfall display style, step S300 of the above method may further include a process of determining a display position of a data item in the module.

[0119] Optionally, in the above step S300, displaying the data items in the module according to the target display style specifically includes:

[0120] The display position of the current data item to be displayed in the module is determined according to the size relationship between the distance between the bottom of the first data item and the upper boundary of the top of the module, and the distance between the bottom of the second data item and the upper boundary of the top of the module.

[0121] The first data item and the second data item are two data items displayed before the current data item in the module.

[0122] The current data item here is the data item that will be displayed after the first data item and the second data item. That is to say, in the above module, after the first data item and the second data item are displayed, the current data item will be displayed. Here, the specific position of the current data item is determined according to the specific positions of the first data item and the second data item in the module.

[0123] In the present application, when determining the display position of the current data item, the current data item can be placed below the data item whose bottom is shorter than the top of the module among the first data item and the second data item, so as to save display space within the module and thus reasonably utilize the display space within the module.

[0124] It should be understood that before determining the position of the current data item according to the distances between the bottoms of the first data item and the second data item and the top of the module, the position information of the first data item and the second data item in the module may be obtained first.

[0125] In the present application, the specific positions of the first data item and the second data item can be represented by coordinate values ​​in a certain coordinate system. Specifically, the positions of the first data item and the second data item can be calculated in the coordinate system with the upper left corner of the list as the coordinate origin. The distance between the bottom of the first data item and the upper boundary of the top of the module is the value of the vertical coordinate of the bottom of the first data item in the coordinate system, and the distance between the bottom of the second data item and the upper boundary of the top of the module is the value of the vertical coordinate of the bottom of the second data item in the coordinate system.

[0126] For example, Figure 6 As shown, the distance between the bottom of the first data item and the upper boundary of the top of the module is Y1, and the distance between the bottom of the second data item and the upper boundary of the top of the module is Y2.

[0127] Combine the following Figure 5 The specific process in step S300 is introduced.

[0128] Figure 5 is a schematic flow chart for determining the display position of the current data item.

[0129] like Figure 5 As shown, the above S300 specifically includes:

[0130] S301 indicates the start of the determination process.

[0131] S302, determining whether the distance between the bottom of the first data item and the upper boundary of the top of the module is greater than the distance between the bottom of the second data item and the upper boundary of the top of the module.

[0132] S303: If the judgment result in S301 is "No", determine that the current data item is displayed below the first data item.

[0133] S304: If the judgment result in S302 is "yes", determine that the current data item is displayed below the second data item.

[0134] It should be understood that if the distance between the bottom of the first data item and the tail of the module is equal to the distance between the bottom of the second data item and the tail of the module, it can be randomly determined to display the current data item below the first data item or below the second data item.

[0135] Through the above process, when determining the placement position of each data item, the current data item is mainly placed below the data item whose bottom is farther from the end of the module among the data items displayed in the module (or the current data item is placed below the data item whose bottom is closer to the top of the module among the data items displayed in the module). This can better utilize the list space and improve display efficiency (display more content in a limited space and reduce waste of display space).

[0136] It should be understood that the above S301 to S304 are only one possible implementation method in the embodiment of the present application. In fact, when determining the position of the current data item based on the positions of the first data item and the second data item, it can also be determined based on the relationship between the distance between the bottom of the first data item and the tail of the module and the distance between the bottom of the second data item and the tail of the module.

[0137] Specifically, when the distance between the bottom of the first data item and the tail of the module is smaller than the distance between the bottom of the second data item and the tail of the module, it is determined that the current data item is displayed below the second data item.

[0138] When the distance between the bottom of the first data item and the tail of the module is greater than the distance between the bottom of the second data item and the tail of the module, it is determined that the current data item is displayed below the first data item.

[0139] It should be understood that in the embodiment of the present application, the waterfall display style can be a double-column waterfall display style or a multi-column waterfall display style. When the waterfall display style is a multi-column waterfall display style, it can also be displayed in accordance with Figure 5 The method shown determines the position of the current data item based on the displayed data items. For example, in a three-column waterfall display style, the positions of data items 1, 2, and 3 have been determined in module 1, and the position of data item 4 needs to be determined next. Then, the distances between the bottoms of the three data items and the lower boundary of the tail of module 1 can be compared. If the bottom of data item 1 is the farthest from the lower boundary of the tail of module 1, data item 4 can be placed below data item 1.

[0140] In the present application, the waterfall flow display style may specifically be a double-line waterfall flow display style or a multi-line waterfall flow display style.

[0141] When the waterfall display style is specifically a double-row waterfall display style or a multi-row waterfall display style, the method of determining the placement position of the current data item is similar to the method of determining the position of the current data item in the above-mentioned determination that the waterfall display style is a double-column waterfall display style or a multi-column waterfall display style. The difference is that here it is arranged and displayed in rows, while in the double-column waterfall display style or the multi-column waterfall display style it is arranged and displayed in columns.

[0142] Next, combine Figure 6 and Figure 7 Describes where to place the data items.

[0143] Figure 6 is a schematic diagram of the data items placed in module 1.

[0144] like Figure 6 As shown, the placement positions of data item 1 and data item 2 in the module have been determined (data item 1 and data item 2 are the first two data items displayed in the list, and a random determination method can be used to determine the placement positions. Specifically, Figure 6 As shown, data item 1 is placed in the upper left corner of the list, and data item 2 is placed in the upper right corner of the list). When determining the placement positions of subsequent data items, the positions of the tops of data item 1 and data item 2 can be determined.

[0145] Specifically, Figure 6 As shown, Y1 is the bottommost ordinate of data item 1, and Y2 is the bottommost ordinate of data item 2. Y1 is smaller than Y2, so data item 2 is closer to the lower boundary of the tail of the display module than data item 1. Therefore, it can be determined that the next data item to be displayed is placed below data item 1.

[0146] Figure 7 is a schematic diagram of the data items placed in module 1.

[0147] like Figure 7 As shown, according to the above judgment process, data item 3 can be placed directly below data item 1.

[0148] In addition to the list display method of the embodiment of the present application, the position of each module in the list and the position of each data item in each module can also be determined, and the position information can be saved.

[0149] Next, you can use predefined interfaces (for example, layoutAttributesForElementsInRect interface) to obtain the location information of each module in the list and the display style information to be adopted by the data items in the list, and finally present the list based on this information.

[0150] like Figure 1 As shown, the coordinates of each module can be calculated one by one with the upper left corner of the list as the coordinate origin. Since the width and height of each module can be pre-set, after the coordinate origin is determined in the list, the coordinate position of each module in the coordinate system can be determined according to the width and height of each module (for example, the coordinates of the four vertices of each module can be determined). Figure 1 As shown, after the coordinates of module 1 are determined, the coordinates of module 2 can be determined based on the coordinates of module 1 and the size of module 2.

[0151] After determining the coordinates of each module, we need to further determine the coordinates of the top, tail, and data items within each module. Figure 2 As shown, taking module 1 as an example, when calculating the coordinates of module 1, it is necessary to calculate the coordinates of the top, tail and each data item in module 1 one by one. Since the coordinates of the vertices around module 1 are known, the size of the top, tail and each data item of module 1 is known, therefore, the coordinates of the lower left corner and lower right corner of the top can be determined in the coordinate system, and then the coordinates of data item 1 and data item 2 can be calculated by the coordinates of the lower left corner and lower right corner of the top.

[0152] After determining the coordinates of data item 1 and data item 2, the coordinates of data item 3 and data item 4 can be calculated until the calculation of the coordinates of all data items is completed. After completing the calculation of the coordinates of data item 5 and data item 6, the coordinates of the tail can be determined based on data item 5 and data item 6 and the size of the tail.

[0153] Therefore, through the above processes, the location of each module and the location of the data items in each module can be determined. Next, the list can be displayed according to the location information and display style information.

[0154] In this application, you can customize the list layout, calculate the coordinates of the list elements according to your own needs, and let the system provide the list control for rendering. The list can use the native UICollectionView provided by the iOS system to customize the layout class, which needs to inherit the layout base class UICollectionViewFlowLayout corresponding to the list.

[0155] In addition, in the present application, the coordinates of each module in the list and each data item in the module can be dynamically calculated in the custom layout.

[0156] Taking the two-column waterfall display style to display data items as an example, the specific process of dynamically calculating the coordinates of data items in a custom layout is as follows:

[0157] (1) Add two floating-point variables in the custom layout to save the bottom position of the lowest element in the waterfall display style of the left and right columns. The variable names are maxY1 and maxY2.

[0158] (2) Traverse all classification modules and calculate the coordinates of each data item (the data items here can also be called elements). This is a cyclic process.

[0159] For example, if the display list includes module 1 to module 3, then it is necessary to traverse module 1 to module 3 to calculate the coordinates of each data item in each module.

[0160] (3) Get the width and height of the top of the current module. Taking the upper left corner of the list as the coordinate origin, set the coordinates of the upper left corner of the data item in the upper left corner of the current module to (0, max(maxY1, maxY2)), and set the coordinates of the lower right corner of the data item in the upper right corner of the current module to (width, max(maxY1, maxY2) + height). Next, synchronize the maxY1 and maxY2 variables to max(maxY1, maxY2) + height.

[0161] (4) Traverse all data items in the current module, which is also a cyclic process.

[0162] Through the above processes (1) to (4), the location of each module and the location of the data items in each module can be determined. Next, the list can be displayed according to the location information and display style information.

[0163] The present application also provides a display device that can present data items in a list in a target display style. Figure 8 Provide detailed explanation.

[0164] Figure 8 is a schematic block diagram of a display device according to an embodiment of the present application. Figure 8 The display device 600 shown includes:

[0165] An acquisition unit 601 is used to acquire data items of modules to be displayed in the list;

[0166] The processing unit 602 is used to determine a target display style to be displayed from a plurality of preset candidate display styles according to the size relationship between the width of the data items in the module and the width of the list;

[0167] Display unit 603, used to display data items in the module according to the target display style;

[0168] Among them, the above module is used to present a category of product information, and the above multiple candidate display styles include waterfall display style and row and column display style, and the row and column display style includes at least one of row display style, column display style and row and column mixed display style.

[0169] The process of the processing unit 602 determining the target display style may specifically be the process in the list display method of the embodiment of the present application introduced above.

[0170] The display device 600 here can specifically be any intelligent terminal such as a smart phone, a tablet computer, a PDA, a car computer, and an Internet of Things device.

[0171] The display device proposed in the present application can determine the display style that matches the data items in the module by comparing the size relationship between the width of the data items in the module and the width of the list, so that the data items in the module can be displayed in a suitable display style, which can improve the display effect of the list.

[0172] The present application also provides an electronic device that can execute each process in the list display method of the present application. Fig. 9 The electronic device of the embodiment of the present application is introduced in detail.

[0173] Fig. 9 A schematic block diagram of an electronic device according to an embodiment of the present application.

[0174] like Fig. 9 As shown, the electronic device 700 may include a processor 701 and a memory 702. The memory 702 stores a program, and when the program is executed by the processor 701, the processor 701 can execute each step of the list display method of the embodiment of the present application.

[0175] The electronic device 700 may be any intelligent terminal including a mobile phone, a tablet computer, a PDA, a car computer, etc.

[0176] The processor 701 may be implemented by a general-purpose central processing unit (CPU), a microprocessor, an application specific integrated circuit (ASIC), or one or more integrated circuits.

[0177] The memory 702 may be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM).

[0178] The memory 702 can store an operating system and other applications. When the technical solution provided in the embodiments of this specification is implemented through software or firmware, the relevant program code is stored in the memory 702, and the processor 701 calls to execute the list display method of the embodiments of this application.

[0179] The memory 702 may be used as a non-transitory computer-readable storage medium, and may be used to store non-transitory software programs and non-transitory computer executable programs.

[0180] In addition, the memory 702 may include a high-speed random access memory, and may also include a non-transitory memory, such as at least one disk storage device, a flash memory device, or other non-transitory solid-state storage device. In some embodiments, the memory may optionally include a memory remotely arranged relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0181] The electronic device 700 may further include an input / output interface 703 for realizing information input and output.

[0182] The electronic device may further include a communication interface 704 and a bus 705 .

[0183] Among them, the communication interface 704 is used to realize the communication interaction between this device and other devices. Communication can be realized through wired means (for example, Universal Serial Bus (USB), network cable, etc.) or wireless means (for example, mobile network, wireless local area network (Wireless Fidelity, WIFI), Bluetooth, etc.).

[0184] The bus 705 is used to transmit information between various components of the device (eg, the processor 701 , the memory 702 , the input / output interface 703 , and the communication interface 704 ).

[0185] In addition, the processor 701 , the memory 702 , the input / output interface 703 , and the communication interface 704 may be communicatively connected to each other within the device via the bus 705 .

[0186] The embodiment of the present application further provides a computer-readable storage medium, which has a computer-readable storage medium storing a computer program. When the computer program is executed by a computer, the computer is used for each step of the list display method of the embodiment of the present application.

[0187] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0188] It can be understood by those skilled in the art that Figure 1-8 The technical solutions shown in the figure do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than those shown in the figure, or a combination of certain steps, or different steps.

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

[0190] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

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

[0192] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

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

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

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

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

[0197] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. A list display method, characterized in that: include: According to the keyword, the module to be displayed in the list and the data items of the module are obtained; wherein the module is an area for displaying or presenting a category of product information, and the module includes a top portion, the data items and a tail portion, the top portion is used to display the title of the product information, the data items are used to display each data text and picture of the product information, and the tail portion is used to display the function logic entrance; According to the size relationship between the width of the data item in the module and the width of the list, a target display style to be displayed is determined from a plurality of preset candidate display styles; wherein the target display style is a row-column display style or a waterfall display style, and the row-column display style includes at least one of the following styles: a row display style, a column display style, and a row-column mixed display style; Display the data items in the module according to the target display style; The step of determining the target display style to be displayed from a plurality of preset candidate display styles according to the size relationship between the width of the data items in the module and the width of the list includes: Extracting data items of the module and width data of the list; In a case where the width of the data items in the module is the same as the width of the list, determining the target display style to be the column display style; When the width of the data items in the module is different from the width of the list, a first preset threshold is determined; when the width of the data items in the module is less than or equal to the first preset threshold, the target display style is determined to be the waterfall display style.

2. The method according to claim 1, characterized in that The waterfall display style is a double-column waterfall display style. When it is determined that the target display style is the double-column waterfall display style, displaying the data items in the module according to the target display style includes: The display position of the current data item to be displayed in the module is determined according to the positions of the first data item and the second data item in the module, wherein the first data item and the second data item are two data items displayed before the current data item in the module.

3. The method according to claim 2, characterized in that Before determining the display position of the current data item to be displayed in the module according to the positions of the first data item and the second data item in the module, the method further includes: Obtain location information of the first data item and the second data item in the module.

4. The method according to claim 2 or 3, characterized in that The step of determining the display position of the current data item to be displayed in the module according to the positions of the first data item and the second data item in the module comprises: In the case where the distance between the bottom of the first data item and the upper boundary of the top of the module is greater than the distance between the bottom of the second data item and the upper boundary of the top of the module, displaying the current data item below the first data item; When the distance between the bottom of the first data item and the upper border of the top of the module is smaller than the distance between the bottom of the second data item and the upper border of the top of the module, it is determined that the current data item is displayed below the second data item.

5. A display device, characterized in that: include: an acquisition unit, used to acquire a module to be displayed in the list and a data item of the module according to a keyword; wherein the module is an area for displaying or presenting a category of product information, and the module includes a top portion, the data item, and a tail portion, wherein the top portion is used to display the title of the product information, the data item is used to display each data text and picture of the product information, and the tail portion is used to display a functional logic entry; A processing unit, configured to determine a target display style to be displayed from a plurality of preset candidate display styles according to a size relationship between a width of the data item in the module and a width of the list; wherein the target display style is a row-column display style or a waterfall display style, and the row-column display style includes at least one of the following styles: a row display style, a column display style, and a row-column mixed display style; A display unit, configured to display the data items in the module according to the target display style; The processing unit is used to determine the target display style to be displayed from a plurality of preset candidate display styles according to the size relationship between the width of the data items in the module and the width of the list, including: Extracting data items of the module and width data of the list; In a case where the width of the data items in the module is the same as the width of the list, determining the target display style to be the column display style; When the width of the data items in the module is different from the width of the list, a first preset threshold is determined; when the width of the data items in the module is less than or equal to the first preset threshold, the target display style is determined to be the waterfall display style.

6. An electronic device, characterized in that: The electronic device comprises a memory and a processor, wherein a program is stored in the memory, and when the program is executed by the processor, the processor is used to execute the method according to any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that: The computer readable storage contains a computer program. When the computer program is executed by a computer, the computer is configured to execute the method according to any one of claims 1 to 4.

Images