Application page display method and device and storage medium

Abstract

The embodiment of the invention provides an application page display method and device and a storage medium, and the method comprises the steps: obtaining a list data set corresponding to a target application program, the list data set comprising list data corresponding to a plurality of to-be-displayed modules; reading first list data corresponding to a target display module from the list data set, and rendering the first list data by using the first layout container; first list data in the list data set is replaced with second list data, a processed list data set is obtained, the second list data is list data corresponding to a preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered; and rendering each piece of list data in the processed list data set by using the second layout container to generate the target application page, so that the display style corresponding to the target display module can be more flexibly configured, and the development cost and the maintenance difficulty are reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of page processing, and in particular to a method, device and storage medium for displaying an application page. Background Art

[0002] List layout in mobile applications is a very common and important layout method, which is mainly used to display a series of items or information, such as product lists, news lists, contact lists, etc. Existing mobile application list displays usually rely on fixed layout files. Each display style corresponds to a unique layout file, and different display styles use different layout files. If you want to change the display style of a module to be displayed in the list, you need to rewrite a layout file corresponding to the module to be displayed, and you also need to modify the layout file corresponding to the entire list.

[0003] However, this approach is not flexible enough when faced with changing requirements or diverse UI styles, and often requires rewriting a large amount of code or layout files, increasing development costs and maintenance difficulties. Summary of the invention

[0004] The embodiment of the present invention provides an application page display method, device and storage medium, which are used to extract a target display module into an independent module and render it by a separate layout container, so that the display style corresponding to the target display module can be more flexibly configured, thereby reducing development costs and maintenance difficulties.

[0005] In a first aspect, an embodiment of the present invention provides a method for displaying an application page, wherein the application page uses a list layout to layout multiple modules to be displayed in a target application, and the application page includes a first layout container and a second layout container, and the second layout container overlaps the first layout container. The method includes:

[0006] Acquire a list data set corresponding to the target application, wherein the list data set includes list data corresponding to a plurality of modules to be displayed;

[0007] Reading first list data corresponding to a target display module from the list data set, and rendering the first list data using the first layout container, wherein the target display module is one of the multiple modules to be displayed;

[0008] Replacing the first list data in the list data set with the second list data to obtain a processed list data set, wherein the second list data is list data corresponding to a preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered;

[0009] The second layout container is used to render each list data in the processed list data set to generate a target application page.

[0010] In a second aspect, an embodiment of the present invention provides an application page display device, wherein the application page uses a list layout to layout multiple modules to be displayed in a target application, and the application page includes a first layout container and a second layout container, and the second layout container overlaps the first layout container. The device includes:

[0011] An acquisition module, used to acquire a list data set corresponding to the target application, wherein the list data set includes list data corresponding to a plurality of modules to be displayed;

[0012] a reading module, configured to read first list data corresponding to a target display module from the list data set, and render the first list data using the first layout container, wherein the target display module is one of the multiple modules to be displayed;

[0013] a replacement module, used for replacing the first list data in the list data set with the second list data to obtain a processed list data set, wherein the second list data is the list data corresponding to the preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered;

[0014] A rendering module is used to render each list data in the processed list data set using the second layout container to generate a target application page.

[0015] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: a memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the method for displaying an application page as described in the first aspect.

[0016] In a fourth aspect, an embodiment of the present invention provides a non-temporary machine-readable storage medium having executable code stored thereon. When the executable code is executed by a processor of an electronic device, the processor can at least implement the method for displaying an application page as described in the first aspect.

[0017] In the display scheme of the application page provided in the embodiment of the present invention, the application page uses a list layout to layout multiple modules to be displayed in the target application, and the application page includes a first layout container and a second layout container, and the second layout container overlaps the first layout container. When displaying the application page, you can first obtain a list data set corresponding to the target application. Among them, the list data set includes list data corresponding to multiple modules to be displayed. Then, read the first list data corresponding to the target display module from the list data set, and use the first layout container to render the first list data, and the target display module is one of the multiple modules to be displayed. Then, generate the second list data, the second list data is the list data corresponding to the preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered. Replace the first list data in the list data set with the second list data to obtain the processed list data set. Then, use the second layout container to render each list data in the processed list data set to generate the target application page.

[0018] In the above scheme, by extracting the target display module as an independent module, rendering the list data of the target display module by a separate first layout container, and using the second layout container to render the list data of the remaining modules to be displayed, the display style corresponding to the target display module can be more flexibly configured, reducing the development cost and maintenance difficulty. In addition, the second layout container overlaps the first layout container, and replaces the list data corresponding to the target display module in the list data set with the list data corresponding to the blank placeholder module to obtain a processed list data set. In this way, after using the first layout container to render the list data of the target display module and the second layout container to render the processed list data set, the target display module and the rendered application list can form two layers, producing a parallax effect, so that the generated target application page has a better display effect. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0020] Figure 1 A schematic diagram of an application scenario of a method for displaying an application page provided by an embodiment of the present invention;

[0021] Figure 2 A schematic diagram of a layout architecture corresponding to an application page provided in an embodiment of the present invention;

[0022] Figure 3 A flowchart of a method for displaying an application page provided by an embodiment of the present invention;

[0023] Figure 4 A flowchart of another method for displaying an application page provided by an embodiment of the present invention;

[0024] Figure 5 An application schematic diagram of an application page display provided by an embodiment of the present invention;

[0025] Figure 6 A flowchart of another method for displaying an application page provided by an embodiment of the present invention;

[0026] Figure 7 An application schematic diagram of another application page display provided by an embodiment of the present invention;

[0027] Figure 8 A flowchart of another method for displaying an application page provided by an embodiment of the present invention;

[0028] Fig. 9 An application schematic diagram of a method for displaying an application page provided by an embodiment of the present invention;

[0029] Fig.10 A schematic diagram showing the linkage sliding of a first layout container and a second layout container provided by an embodiment of the present invention;

[0030] Fig.11 A schematic diagram of the structure of an application page display device provided by an embodiment of the present invention;

[0031] Fig.12 A schematic diagram of the structure of an electronic device provided in this embodiment. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention. In addition, the step timing in the following method embodiments is only an example, not a strict limitation.

[0033] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0034] List layout in mobile applications is a very common and important layout method, which is mainly used to display a series of items or information, such as product lists, news lists, contact lists, etc. Existing mobile application list displays usually rely on fixed layout files. Each display style corresponds to a unique layout file, and different display styles use different layout files. If you want to change the display style of a module to be displayed in the list, you need to rewrite a layout file corresponding to the module to be displayed, and you also need to modify the layout file corresponding to the entire list.

[0035] However, this method is not flexible enough when facing changes in requirements or diversified UI styles. In particular, if you want to display different display styles for the same data, you need to rewrite a lot of code or layout files, which increases development costs and maintenance difficulties. In addition, the application list rendered by this list display method can only achieve a linear scrolling effect, and cannot achieve UI linkage effects during user interactions (such as pull-to-refresh and sliding).

[0036] Therefore, in order to solve the above technical problems, the present invention provides a new application page rendering method, which extracts the target display module as an independent module, renders it by a separate first layout container, and renders the remaining modules to be displayed in the application list by a second layout container, so that the display style corresponding to the target display module can be more flexibly configured, reducing the development cost and maintenance difficulty. In addition, in order to make the rendered target display module and the remaining modules to be displayed in the application list form two layers, the target display module and the remaining modules to be displayed in the application list are visually displayed at the same time, and the second layout container is overlapped on the first layout container according to the layered stacking, and a blank placeholder module is added to the application list to display the target display module.

[0037] In addition, the sliding distance of the application list can also be monitored to control the first layout container to slide along with the second layout container, so that when the application list is pulled down to refresh and slide, the target display module and the remaining modules to be displayed in the application list produce a sliding parallax effect, thereby making the rendered application page have a UI linkage effect and improving the user interaction experience.

[0038] In the following, some embodiments of the present invention are described in detail in conjunction with the accompanying drawings. In the case where there is no conflict between the embodiments, the following embodiments and features in the embodiments can be combined with each other.

[0039] Figure 1 A schematic diagram of an application scenario of a method for displaying an application page provided by an embodiment of the present invention; Figure 1 As shown, the execution subject of the method may be an application page display device, which may be implemented as software, or a combination of software and hardware, and the application page display device may be communicatively connected with a server and a client.

[0040] Among them, the server refers to a server that provides target application services to users, and the client may refer to a user device on which the target application is installed. The target application may be any type of application, and the embodiments of the present invention do not limit this. The application page display device can provide application page display services for the client, and can dynamically adjust the display styles corresponding to each module to be displayed in the target application in the client according to the actual needs of the user, so as to generate a target application page that meets the user needs and the display needs of each module to be displayed, and also supports the introduction of UI dynamic effects during the pull-down refresh and sliding process of the application list, so as to generate a UI linkage effect when interacting with the user. In actual applications, when the user starts the target application through the client, a target application start instruction is sent to the server. When the server receives the target application start instruction triggered by the client, it obtains the list data sets corresponding to the multiple modules to be displayed in the target application, and sends the list data sets corresponding to the target application to the application page display device. The application page display device receives the list data set corresponding to the target application sent by the server to obtain the list data set corresponding to the target application, and then generates a target application page according to the received list data set corresponding to the target application, and sends the generated target application page to the client to display the target application page on the client.

[0041] The application page display device provides the client with an application page that uses a list layout to layout multiple modules to be displayed in the target application. In addition, the application page uses a first layout container and a second layout container to render multiple modules to be displayed in the target application to generate a target application page.

[0042] Specifically, the implementation process of the application page display device generating the target application page can be: the application page display device receives a list data set corresponding to the target application sent by the server to obtain a list data set corresponding to the target application. The list data set includes list data corresponding to multiple modules to be displayed. The list data includes the display type corresponding to each module to be displayed and the data to be displayed.

[0043] After obtaining the list data set corresponding to the target application, the application page display device can then read the first list data corresponding to the target display module from the list data set, and use the first layout container to render the first list data. The target display module can be any one of the multiple modules to be displayed, or a module to be displayed that the user is concerned about, a module to be displayed that is promoted in the target application, or a module to be displayed that needs to be highlighted in the target application. The first layout container is mainly used to render the content of the target display module and perform layout management on the target display module.

[0044] In order to more flexibly configure the display style corresponding to the target display module in the target application, in an embodiment of the present invention, the target display module in the target application can be extracted as an independent module, and a separate first layout container is used to render the target display module.

[0045] Next, the application page display device can generate second list data, wherein the second list data is list data corresponding to a preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered. The first list data in the list data set is replaced with the second list data corresponding to the blank placeholder module to obtain a processed list data set.

[0046] In the embodiment of the present invention, two independent layout containers are used to render the list data corresponding to multiple modules to be displayed in the target application respectively. The first layout container is mainly used to render the target display module, and the second layout container is mainly used to render the remaining modules to be displayed in the application list. A complete application list is rendered by the two layout containers.

[0047] That is to say, in an embodiment of the present invention, the second layout container is still used to render the application list corresponding to the target application, but the target display module in the original application list is extracted, and in order to display the target display module in the generated target application page, the target display module in the application list can be replaced with a blank placeholder module, so that the target display module can be displayed.

[0048] In specific implementation, the second list data corresponding to the blank placeholder module may be first obtained, and then the first list data corresponding to the target display module in the list data set may be replaced with the second list data corresponding to the blank placeholder module.

[0049] Finally, the application page display device can use the second layout container to render each list data in the processed list data set to generate a target application page. The second layout container is mainly used to render and layout the remaining modules to be displayed outside the target display module in the target application.

[0050] Among them, since the processed list data set is obtained by replacing the first list data corresponding to the target display module in the original list data set sent by the server with the second list data corresponding to the blank placeholder module, when rendering the processed list data set, multiple remaining modules to be displayed and blank placeholder modules other than the target display module can be rendered. In other words, the application list that can be rendered using the second layout container includes multiple remaining modules to be displayed and blank placeholder modules other than the target display module, so that in combination with the target display module rendered by the first layout container, a complete target application page can be obtained.

[0051] In addition, in the embodiment of the present invention, the first layout container and the second layout container can be stacked in a hierarchical manner, and the second layout container can be overlapped on the first layout container, and the application list rendered by the second layout container and the target display module rendered by the first layout container can be superimposed into two layers. And the first list data in the list data set is replaced with the second list data corresponding to the blank placeholder module, so as to add a blank placeholder module at the position of the target display module of the original application list, and display the target display module at the bottom layer.

[0052] It should be noted that: in addition to the multiple to-be-displayed modules displayed in the form of an application list, the generated target application page may also include other display modules, which may be fixed modules or slidable modules.

[0053] In addition, the application page display device can also respond to the sliding operation triggered by the user on the target application interface, determine the first sliding direction and the first sliding distance corresponding to the second layout container, and control the second layout container to slide according to the first sliding direction and the first sliding distance. And according to the sliding of the second layout container and the preset UI linkage conditions, the first layout container is controlled to slide following the second layout container, so that when the user pulls down to refresh the application list and slides the application list, the target display module and the remaining modules to be displayed in the application list produce a sliding parallax effect, thereby achieving a UI linkage effect when interacting with the user, thereby improving the user experience.

[0054] The technical solution provided in this embodiment can more flexibly configure the display style corresponding to the target display module by extracting the target display module as an independent module, rendering the list data of the target display module by a separate first layout container, and rendering the list data of the remaining modules to be displayed by using the second layout container, thereby reducing the development cost and maintenance difficulty. In addition, the second layout container overlaps the first layout container, and replaces the list data corresponding to the target display module in the list data set with the list data corresponding to the blank placeholder module to obtain the processed list data set. In this way, after using the first layout container to render the list data of the target display module and the second layout container to render the processed list data set, not only can the rendered target display module and the remaining modules to be displayed in the application list form two layers, but the target display module can also be displayed to produce a parallax effect, so that the generated target application page has a better display effect.

[0055] The above embodiment describes the process of processing the list data set corresponding to the target application sent by the server in the application scenario, and using two independent layout containers to render the processed list data set to generate the target application page. In order to more clearly understand the above application page display process, the process is described in detail in combination with the following embodiment.

[0056] When displaying the application page, you can first build a reasonable layout structure for the target application, and then generate the corresponding target application page based on the layout structure corresponding to the built user interface and the list data corresponding to the multiple modules to be displayed in the user interface, and display the multiple modules to be displayed.

[0057] In an embodiment of the present invention, a layout architecture corresponding to the target application is constructed, and the various modules to be displayed (interface elements, such as buttons, text boxes, menus, etc.) in the target application are organized and arranged through the layout architecture corresponding to the target application to determine the layout structure corresponding to the target application.

[0058] A good layout architecture should be able to present information clearly and improve the convenience and efficiency of user operations. In order to allow users to slide the various modules to be displayed in the generated target application page, in an embodiment of the present invention, a list layout is used to layout multiple modules to be displayed in the target application. Specifically, a layout container can be created, and multiple modules to be displayed can be added to the layout container to perform a list layout of multiple modules to be displayed, and multiple modules to be displayed can be slid in the horizontal or vertical direction. Among them, the layout container can accommodate or carry multiple UI elements or components, and the layout container can also be nested in the layout container.

[0059] In addition, in order to configure the display style of the target display module more flexibly, the target display module is extracted as an independent module, and an independent layout container is created for the target display module, and the target display module is laid out by an independent layout container. The remaining modules to be displayed are taken as a whole, and another independent layout container is created for the remaining modules to be displayed, and the remaining modules to be displayed are laid out by another independent layout container.

[0060] In addition, in addition to laying out each page element in the container, each layout container can also perform operations such as display style configuration and rendering of data to be displayed on each page element in the container through each layout container.

[0061] In actual applications, after rendering multiple modules to be displayed in the target application, an application list in which multiple modules to be displayed are arranged in sequence can be obtained. However, in the embodiment of the present invention, two independent layout containers are used to layout and render multiple modules to be displayed respectively, so the two independent layout containers can be laid out in a frame layout manner so that all modules to be displayed can be rendered simultaneously.

[0062] Specifically, in an embodiment of the present invention, a combination method can be used to layout the application page. A frame layout container can be created first. The frame layout container uses a frame layout to layout the various components in the container, so that all controls placed in the container are stacked in layers, and the controls added later cover the previous controls. Next, a first layout container corresponding to the target display module is created, and the first layout container is added to the frame layout container. Then, a second layout container corresponding to the remaining modules to be displayed is created, and the second layout container is added to the frame layout container, so that the second layout container can be overlapped on top of the first layout container. Among them, the first layout container and the second layout container can be layout containers of any type. Preferably, the first layout container and the second layout container can be list containers.

[0063] For example, Figure 2 In the layout architecture shown, the entire application page is a large frame layout container A, which includes a first list container B and a second list container C, and the second list container C overlaps the first list container B.

[0064] By adopting the above layout architecture of overlapping the second layout container on the first layout container, during rendering, the target display module rendered by the first layout container and the remaining to-be-displayed modules rendered by the second layout container form two layers, one above the other.

[0065] After building the layout architecture corresponding to the target application, in order to better use each layout container to display multiple modules to be displayed in the target application, in an embodiment of the present invention, the height, width, transparency and other contents corresponding to each layout container can also be set. Specifically, the height and width of the frame layout container fill the screen, and the height and width of the frame layout container can be adjusted according to the screen size corresponding to the client device. That is, the height of the frame layout container can be set to the height corresponding to the client device screen, and the width of the frame layout container can be set to the width corresponding to the client device screen. The width of the first layout container and the width of the second layout container can be less than or equal to the width of the frame layout container. During specific implementation, they can be set according to actual display requirements. The height of the first layout container and the height of the second layout container can be less than or equal to the height of the frame layout container. During specific implementation, they can be set according to actual display requirements.

[0066] After the layout container corresponding to the application page is built, the list data set corresponding to the target application program sent by the server is received, and the built layout container can be used to render the list data set to generate the target application page. In conjunction with the following embodiment, the specific process of generating the target application page is exemplified.

[0067] Figure 3 A flowchart of a method for displaying an application page provided by an embodiment of the present invention is shown in FIG. Figure 3 As shown, the execution subject of the method may be an application page display device. Specifically, the method includes the following steps:

[0068] 301. Obtain a list data set corresponding to a target application, where the list data set includes list data corresponding to a plurality of modules to be displayed.

[0069] 302. Read first list data corresponding to the target display module from the list data set, and use the first layout container to render the first list data.

[0070] 303. Replace the first list data in the list data set with the second list data to obtain a processed list data set, where the second list data is the list data corresponding to the preset blank placeholder module.

[0071] 304. Use the second layout container to render each list data in the processed list data set to generate a target application page.

[0072] After the application page display device obtains the list data set corresponding to the target application, it can first perform secondary processing on the list data set, and then render the processed list data to generate a target application page. The target application page includes a list of applications to be displayed corresponding to multiple modules to be displayed.

[0073] Specifically, the list data corresponding to multiple modules to be displayed in the target application can be determined first according to the configuration information corresponding to the target application. The module to be displayed refers to the specific UI area or component where the data will be rendered, and each module to be displayed has a unique identifier. The module to be displayed corresponding to each list data in the list data set can be determined according to the identifier corresponding to each module to be displayed in the configuration information.

[0074] Next, the first list data corresponding to the target display module is read from the list data set, and the first list data is rendered using the first layout container. The target display module may be one of multiple modules to be displayed. For example, the target display module may be the first module to be displayed in the list of applications to be displayed corresponding to the target application, the module to be displayed in the middle of the list of applications to be displayed, or the module to be displayed at the bottom of the list of applications to be displayed.

[0075] In specific implementation, the target display module corresponding to the target application can be determined in advance, and the corresponding information of the determined target display module can be written into the configuration information corresponding to the target application, and the target display module can be determined by obtaining the configuration information corresponding to the target application. Among them, the target display module corresponding to the target application can be determined in advance by the server, and the target display module corresponding to the target application can also be determined in advance by the client, and the embodiment of the present invention does not limit this.

[0076] The list data corresponding to each module to be displayed includes the display type and the data to be displayed corresponding to the module to be displayed. When the first layout container is used to render the first list data corresponding to the target display module, the first layout container can render the target display module according to the display type and the data to be displayed corresponding to the target display module.

[0077] The display type in the list data indicates how the data to be displayed should be displayed or presented to the user, and determines which UI layout or style will be used to display the data to be displayed in the list data.

[0078] In addition, in an optional embodiment, different display style strategies may be set for the target display module separately. After reading the first list data corresponding to the target display module, the first layout container renders the to-be-displayed data corresponding to the target display module according to the display type and display style strategy in the first list data.

[0079] The display style strategy may include the color, font type, font size, line spacing, character spacing, arrangement, spacing, alignment of design elements, etc. of the target display module. The corresponding display style strategy may also be determined according to the user's personal preferences and user usage habits so that the rendered target display module meets the user's preferences.

[0080] Because when rendering multiple modules to be displayed in the target application, they are split into two parts and rendered by two independent layout containers respectively, in order to simultaneously display the contents rendered in the two layout containers respectively, in an embodiment of the present invention, the target display module in the original application list rendered by the second layout container can be replaced with a blank placeholder module, so that the target display module rendered by the first layout container can be displayed.

[0081] Specifically, the second list data corresponding to the preset blank placeholder module can be obtained, the second list data does not include the data to be displayed, and the display type in the second list data is blank placeholder. The first list data in the list data set is replaced with the second list data to obtain a processed list data set. Among them, the blank placeholder module is transparent and does not contain display content. The blank placeholder module is visually invisible after being rendered.

[0082] Furthermore, the transparency corresponding to the blank placeholder module may be set to be fully transparent. In specific implementation, an independent layout container may be used to render the blank placeholder module, and the transparency corresponding to the layout container may be set to be fully transparent.

[0083] In an optional embodiment, the second list data corresponding to the preset blank placeholder module can be obtained by reading the list data corresponding to the preset blank placeholder module from the preset storage area. The second list data corresponding to the preset blank placeholder module can also be obtained by generating the second list data by the application page device. Specifically, the second list data can be generated according to the characteristics of the preset blank placeholder module.

[0084] The first list data corresponding to the target display module in the list data set is replaced with the second list data corresponding to the preset blank placeholder module. This is equivalent to extracting the target display module and adding a blank placeholder module to the position corresponding to the target display module in the original application list. In this way, the target display module in the first layout container at the bottom layer can be displayed to form a parallax effect.

[0085] Finally, the second layout container is used to render each list data in the processed list data set to generate a target application page. The processed list data set includes the second list data corresponding to the newly added blank placeholder module and the list data corresponding to the remaining multiple modules to be displayed in the original application list. After the second layout container is used to render each list data in the processed list data set, a new application list can be obtained, which includes the display content corresponding to the blank placeholder module and the display content corresponding to the remaining multiple modules to be displayed except the target display module.

[0086] In the embodiment of the present invention, by extracting the target display module as an independent module, a separate first layout container is used to render the list data of the target display module, and a second layout container is used to render the list data of the remaining modules to be displayed, the display style corresponding to the target display module can be more flexibly configured, reducing the development cost and maintenance difficulty. In addition, the second layout container is overlapped on the first layout container, and the list data corresponding to the target display module in the list data set is replaced with the list data corresponding to the blank placeholder module to obtain a processed list data set. In this way, after the list data of the target display module is rendered by the first layout container and the processed list data set is rendered by the second layout container, the target display module and the rendered application list can form two layers, producing a parallax effect, so that the generated target application page has a better display effect.

[0087] It should be noted that: the execution process of using the first layout container to render the first list data is interchanged with the execution process of replacing the first list data in the list data set with the second list data, and there is no limitation on this. For example, the first list data corresponding to the target display module can be read from the list data set first, and the first list data can be stored in the local memory (or a preset storage area). Then, the first list data in the list data set is replaced with the second list data to generate a processed list data set, and the second layout container is used to render each list data in the processed list data set. Then, the first list data corresponding to the target display module is read from the local memory, and the first layout container is used to render the first list data to generate a target application page.

[0088] In addition, in order to achieve the page effect of partially covering the target display module in the initial state, the height corresponding to the first layout container and the height corresponding to the preset blank placeholder module can also be determined. Among them, the height corresponding to the preset blank placeholder module is less than the height of the first layout container, and the transparency corresponding to the preset blank placeholder module is fully transparent. For example, if the height of the first layout container is H, then the height corresponding to the preset blank placeholder module is less than H.

[0089] The above embodiment describes the implementation process of an application page display device receiving a list data set corresponding to a target application program sent by a server, processing the list data set, and using two separate layout containers to render the list data corresponding to a target display module and the processed list data set respectively, thereby generating a target application page.

[0090] When using a layout container to render list data, the layout template corresponding to each list data can be determined first, and the list data set can be rendered using the layout template to generate a target application page. In addition, the components corresponding to each list data can be determined first, and the target application page can be rendered based on the components corresponding to each list data and the list data set. The specific implementation process is described in detail below in conjunction with the following two embodiments.

[0091] Figure 4 A flowchart of another method for displaying an application page provided by an embodiment of the present invention is shown in FIG. Figure 4 As shown, the execution subject of the method may be an application page display device. Specifically, the method includes the following steps:

[0092] 401. Obtain a list data set corresponding to a target application, where the list data set includes list data corresponding to a plurality of modules to be displayed.

[0093] 402. Determine a target display module according to configuration information corresponding to the target application.

[0094] 403. Read first list data corresponding to the target display module from the list data set according to the identifier corresponding to the target display module.

[0095] 404. Determine a first layout template corresponding to the target display module according to the display type in the first list data.

[0096] 405 . Add the first layout template to the first layout container, and render the data to be displayed in the first list data into the first layout template.

[0097] 406 . Obtain second list data corresponding to the preset blank placeholder module, and replace the first list data in the list data set with the second list data to obtain a processed list data set.

[0098] 407 . Determine a second layout template corresponding to each list data according to the display type of each list data in the processed list data set.

[0099] 408 . Add the second layout template corresponding to each list data to the second layout container, and render the data to be displayed in each list data into the corresponding second layout template to generate a target application page.

[0100] After the application page display device obtains the list data set corresponding to the target application, it can first determine the target display module according to the configuration information corresponding to the target application, and then read the first list data corresponding to the target display module from the list data set according to the identifier corresponding to the target display module.

[0101] The first list data includes a display type and data to be displayed. Then, the first layout template corresponding to the target display module can be determined according to the display type in the first list data. Then, the first layout template is added to the first layout container, and the data to be displayed in the first list data is rendered into the first layout template.

[0102] Among them, the display type in the list data indicates how the data to be displayed should be displayed or presented to the user, which determines which UI layout or style will be used to display the data to be displayed in this list data. According to the display type in each list data, a corresponding layout template is selected. The first layout template refers to a specific layout template for rendering the data to be displayed corresponding to the target display module. This layout template defines the specific layout, style and structure of the data to be displayed, including how to arrange the elements in the target display module, the spacing between elements, the style used, etc.

[0103] In addition, in an optional embodiment, different display style strategies may be set for the target display module separately. After reading the first list data corresponding to the target display module, the first layout template corresponding to the target display module is determined according to the display type and display style strategy in the first list data.

[0104] The display style strategy may include the color, font type, font size, line spacing, character spacing, arrangement, spacing, alignment of design elements, etc. of the target display module. The corresponding display style strategy may also be determined according to the user's personal preferences and user usage habits so that the rendered target display module meets the user's preferences.

[0105] In a specific implementation, in order to quickly render the target display module using the first layout container, a large number of layout templates can be generated in advance, and the large number of layout templates can be stored in a preset storage area. When it is determined that the target display module corresponds to the first layout template, the corresponding first layout template can be obtained from the preset storage area. In addition, after determining the first layout template corresponding to the target display module, the first layout template can be dynamically generated, or when the first layout template is not stored in the preset storage area, the first layout template can be dynamically generated.

[0106] Because when rendering multiple modules to be displayed in the target application, they are split into two parts and rendered by two independent layout containers respectively, in order to simultaneously display the contents rendered in the two layout containers respectively, in an embodiment of the present invention, the target display module in the original application list rendered by the second layout container can be replaced with a blank placeholder module, so that the target display module rendered by the first layout container can be displayed.

[0107] Specifically, the second list data corresponding to the preset blank placeholder module can be obtained, the second list data does not include the data to be displayed, and the display type in the second list data is blank placeholder. The first list data in the list data set is replaced with the second list data to obtain a processed list data set. Among them, the blank placeholder module is transparent and does not contain display content. The blank placeholder module is visually invisible after being rendered.

[0108] Furthermore, the transparency corresponding to the blank placeholder module may be set to be fully transparent. In specific implementation, an independent layout container may be used to render the blank placeholder module, and the transparency corresponding to the layout container may be set to be fully transparent.

[0109] In an optional embodiment, the second list data corresponding to the preset blank placeholder module can be obtained by reading the list data corresponding to the preset blank placeholder module from the preset storage area. The second list data corresponding to the preset blank placeholder module can also be obtained by generating the second list data by the application page device. Specifically, the second list data can be generated according to the characteristics of the preset blank placeholder module.

[0110] The first list data corresponding to the target display module in the list data set is replaced with the second list data corresponding to the preset blank placeholder module. This is equivalent to extracting the target display module and adding a blank placeholder module to the position corresponding to the target display module in the original application list. In this way, the target display module in the first layout container at the bottom layer can be displayed to form a parallax effect.

[0111] Finally, according to the display type in each list data in the processed list data set, the second layout template corresponding to each list data is determined, the second layout template corresponding to each list data is added to the second layout container, and the data to be displayed in each list data is rendered into the corresponding second layout template to generate the target application page.

[0112] From the above description, we can see that: in the process of dynamically generating application pages, the display type in the list data determines which layout template each module to be displayed uses to display the data to be displayed, and then places the layout template in a suitable layout container, and finally renders the data to be displayed into the layout template to form an application page visible to the user.

[0113] In an embodiment of the present invention, the first layout template corresponding to the target display module is determined according to the display type in the first list data, the first layout template is added to the first layout container, and the data to be displayed in the first list data is rendered into the first layout template. Furthermore, the first list data in the list data set is replaced with the second list data to obtain a processed list data set, and the second layout template corresponding to each list data is determined according to the display type in each list data in the processed list data set. Finally, the second layout template corresponding to each list data is added to the second layout container, and the data to be displayed in each list data is rendered into the corresponding second layout template to generate the target application page, which can more flexibly configure the display styles corresponding to multiple modules to be displayed in the target application, thereby reducing the development cost and maintenance difficulty.

[0114] Among them, the specific implementation process involved in the embodiments of the present invention can refer to the contents in the above embodiments, and will not be repeated here.

[0115] In order to facilitate understanding of the display process of the application page described in the above embodiment, Figure 5 The specific application scenarios in the following sections provide examples for illustration. Figure 5 As shown, when the server receives the request triggered by the client to obtain the data to be displayed corresponding to the target application, the server obtains the list data set corresponding to the target application from the preset storage area and sends the list data set. The application page display device receives the list data set sent by the server. Among them, the list data set includes the list data corresponding to the module to be displayed A, the list data corresponding to the module to be displayed 1, the list data corresponding to the module to be displayed 2, the list data corresponding to the module to be displayed 3, and the list data corresponding to the module to be displayed 4. The list data corresponding to each module to be displayed includes the display type and the data to be displayed.

[0116] Determine the target display module, which is the module A to be displayed corresponding to the top area in the original application list. Read the first list data corresponding to the module A to be displayed from the list data set, save the first list data to the local memory, and select the target layout template corresponding to the module A to be displayed from the layout template CE according to the display style strategy and the display type in the first list data, add the target layout template to the independent container, and render the data to be displayed in the first list data to the target layout template.

[0117] The first list data corresponding to the module A to be displayed in the list data set is deleted from the list data set, and the second list data corresponding to the preset blank placeholder module is added to the list data set to obtain a processed list data set. The processed list data set includes the second list data corresponding to the blank placeholder module and the list data corresponding to the modules 1-4 to be displayed.

[0118] According to the display type in each list data in the processed list data set, determine the second layout templates corresponding to the blank placeholder module and the modules to be displayed 1-4. Add the second layout templates corresponding to the blank placeholder module and the modules to be displayed 1-4 to the second layout container, and render the corresponding data to be displayed to the corresponding second layout template to generate a list display.

[0119] The height corresponding to the transparent placeholder module can be adjusted, and the height corresponding to the transparent placeholder module can be adjusted according to the proportion of the module A to be displayed in the list to be covered in the initial state in actual needs.

[0120] Figure 6 A flowchart of another method for displaying an application page provided by an embodiment of the present invention is shown in FIG. Figure 6 As shown, the method comprises the following steps:

[0121] 601. Obtain a list data set corresponding to a target application, where the list data set includes list data corresponding to a plurality of modules to be displayed.

[0122] 602. Determine a target display module according to configuration information corresponding to the target application.

[0123] 603. Read first list data corresponding to the target display module from the list data set according to the identifier corresponding to the target display module.

[0124] 604. Determine a first component corresponding to the target display module according to the display type in the first list data.

[0125] 605. Add the first component to the first layout container, and render the data to be displayed in the first list data into the first component.

[0126] 606. Add a blank placeholder component to the second layout container, and render the list data corresponding to the preset blank placeholder module into the blank placeholder component.

[0127] 607 : Delete the first list data in the list data set, and determine the second components corresponding to the remaining modules to be displayed according to the display types in the remaining list data in the list data set.

[0128] 608. Add multiple second components to the second layout container, and render the to-be-displayed data in the remaining list data in the list data set into the corresponding second components to obtain a target application page.

[0129] For the specific implementation process of the above steps 601-603, please refer to the description in the above embodiment, which will not be repeated here. After obtaining the first list data corresponding to the target display module, the first component corresponding to the target display module is determined according to the display type in the first list data. Among them, the first component is a reusable, independent unit on the UI interface that usually has specific functions and interfaces. For example, a button, a card view, or a user information display area can be designed as a component.

[0130] After determining the first component corresponding to the target display module, the first component may be obtained or created, the first component may be added to the first layout container, and the data to be displayed in the first list data may be rendered into the first component.

[0131] Next, a blank placeholder component is added to the position corresponding to the target display module in the second layout container, and the list data corresponding to the preset blank placeholder module is rendered into the blank placeholder component. Then, the first list data in the list data set is deleted, and the second components corresponding to the remaining modules to be displayed are determined according to the display type in the remaining list data in the list data set. Finally, multiple second components are added to the second layout container, and the data to be displayed in the remaining list data in the list data set is rendered into the corresponding second components to obtain the target application page.

[0132] Using various preset components to render the target application page can greatly improve development efficiency and code maintainability. When adjusting the display style corresponding to each module to be displayed, only the component corresponding to the module to be displayed can be modified, and the display style corresponding to each module to be displayed in the target application can be adjusted flexibly.

[0133] In an embodiment of the present invention, a first component corresponding to a target display module is determined according to a display type in first list data. The first component is added to a first layout container, and the data to be displayed in the first list data is rendered into the first component. A blank placeholder component is added to a second layout container, and the list data corresponding to a preset blank placeholder module is rendered into the blank placeholder component. The first list data in a list data set is deleted, and the second components corresponding to the remaining modules to be displayed are determined according to the display type in the remaining list data in the list data set. Multiple second components are added to a second layout container, and the data to be displayed in the remaining list data in the list data set is rendered into the respective corresponding second components to obtain a target application page, which can greatly improve development efficiency and code maintainability, and can flexibly configure the display styles corresponding to each module to be displayed to meet user needs.

[0134] In order to facilitate understanding of the display process of the application page described in the above embodiment, Figure 7 The target display module is the top display module, such as Figure 7 As shown, before processing the list data set corresponding to the target application sent by the server, a frame layout container can be created first, wherein the height and width of the frame layout container fill the entire screen of the client. The top display module is extracted as an independent module, and a top style container corresponding to the independent module is created. Then, the top style container is added to the frame layout container. Next, a list container corresponding to the remaining modules to be displayed is created, and the list container is added to the frame layout container. The list container performs layout rendering on the remaining modules to be displayed in the original application list. A blank placeholder component is added to the position corresponding to the display module at the top of the list container, and the display style corresponding to the component is a blank transparent placeholder style.

[0135] After building the layout framework corresponding to the target application, you can also add a damping effect to the application list. When the application list exceeds the downward sliding boundary, you can continue to slide to fully display the top display style.

[0136] When receiving the list data set corresponding to the target application sent by the server, determine the target display module according to the configuration information corresponding to the target application. According to the identifier corresponding to the target display module, read the first list data corresponding to the target display module from the list data set. According to the display type in the first list data, determine the first component corresponding to the target display module. Add the first component to the first layout container, and render the data to be displayed in the first list data into the first component. And render the list data corresponding to the preset blank placeholder module into the blank placeholder component. Delete the first list data in the list data set, and determine the second components corresponding to the remaining modules to be displayed according to the display type in the remaining list data in the list data set. Add multiple second components in the second layout container, and render the data to be displayed in the remaining list data in the list data set into the corresponding second components to obtain the target application list.

[0137] Among them, the top style in the target application list and the middle style 1 in the application list are superimposed into two layers, so that when sliding, the top style of the bottom layer can be fully displayed to achieve a UI linkage effect.

[0138] In conjunction with the following embodiments, the specific implementation process of sliding the first layout container and the second layout container in linkage to achieve the UI linkage effect is described.

[0139] Figure 8 A flowchart of another method for displaying an application page provided by an embodiment of the present invention, Fig. 9 The following is an application diagram of the display method of the application page, such as Figure 8-9 As shown, based on the above embodiment, the method may further include the following steps:

[0140] 801. In response to a sliding operation triggered by a user on a target application interface, determine a first sliding direction and a first sliding distance corresponding to a second layout container.

[0141] 802. Control the second layout container to slide according to the first sliding direction and the first sliding distance.

[0142] 803. If the first sliding distance meets the linkage sliding condition, control the first layout container to slide following the second layout container.

[0143] When the user slides the application list displayed in the target application page, in response to the sliding operation triggered by the user on the target application program interface, a first sliding direction and a first sliding distance corresponding to the second layout container are determined.

[0144] When the sliding of the application list is detected, the current sliding distance and the current sliding direction can be obtained, and the first sliding direction and the first sliding distance corresponding to the second layout container are determined according to the current sliding distance and the current sliding direction.

[0145] Specifically, in an optional embodiment, the implementation process of determining the first sliding direction and the first sliding distance corresponding to the second layout container may include: determining the sliding operation information according to the sliding operation, the sliding operation information including the sliding trigger position, the third sliding direction and the third sliding distance; determining the first sliding direction corresponding to the second layout container according to the third sliding direction; determining the sliding type corresponding to the second layout container according to the sliding trigger position and the third sliding direction; determining the first sliding distance corresponding to the second layout container according to the sliding type and the second sliding distance.

[0146] Then, according to the first sliding direction and the first sliding distance, the second layout container is controlled to slide. Next, it is determined whether the linkage sliding condition is met, that is, whether the first sliding distance meets the linkage sliding condition. If the first sliding distance meets the linkage sliding condition, the first layout container is controlled to slide following the second layout container.

[0147] The first layout container and the second layout container implement linkage sliding, which usually means that the two components can affect each other during sliding operation, that is, the sliding action of one component will trigger the corresponding sliding or updating of the other component. The sliding ratio or speed of the two components can be set to match, that is, when the user slides on one component, the sliding speed and distance of the other component are matched according to a certain ratio. This design can increase the smoothness and intuitiveness of user operation.

[0148] In an optional embodiment, if the first sliding distance meets the linkage sliding condition, the second sliding distance is determined according to the preset displacement following coefficient and the first sliding distance; according to the second sliding distance, the first layout container is controlled to follow the second layout container to slide; according to the preset transparency change coefficient and the first sliding distance, the transparency corresponding to the first layout container is adjusted. Among them, the preset displacement following coefficient and the preset transparency change coefficient can be set according to actual needs.

[0149] For example, if the application list slides down by 10px, the upper second layout container slides down by 10px, and the bottom first layout container moves down by 5px, the preset displacement following coefficient a=2, and the application list moves 2px every time the upper second layout container moves 2px, and the bottom first layout container moves 1px. In addition, the preset displacement following coefficient a can have multiple configuration options, such as linear, acceleration, deceleration, increase first and then decrease, deceleration first and then acceleration, etc.

[0150] For the transparency change coefficient, suppose the application list slides 20px, the upper second layout container moves 20px, and the transparency of the bottom first layout container changes from 1-0, that is, opaque to completely transparent. The preset transparency change coefficient b = 0.05, that is, for every 1px the list moves (for every 1px the upper second layout container moves), the transparency of the bottom container decreases by 0.05. In addition, the preset transparency change coefficient b can have multiple configuration options, such as linear, acceleration, deceleration, increase first and then decrease, deceleration first and then acceleration, etc.

[0151] That is, in the embodiment of the present invention, when the first layout container and the second layout container are sliding in linkage, not only the displacement change of the first layout container can be controlled, but also the transparency change of the first layout container can be controlled.

[0152] In addition, if the first sliding distance does not meet the linkage sliding condition, the first layout container is controlled to slide synchronously with the second layout container according to the first sliding distance, that is, the preset displacement following coefficient a is set to 1 to achieve the effect of synchronous sliding with the second layout container.

[0153] That is to say, the sliding linkage effect (displacement, transparency) of the bottom first layout container and the upper second layout container depends on the scrolling distance of the list as a link, so that the linkage sliding between the target display style and the remaining modules to be displayed in the application list can be achieved.

[0154] Then the linkage sliding condition can be set to enable the linkage sliding operation when the first sliding distance is between the first preset value and the second preset value. Specifically, if the first sliding distance is greater than the first preset value and the first sliding distance is less than the second preset value, the offset of the first sliding distance relative to the first preset value is determined; the second sliding distance is determined according to the offset and the preset displacement following coefficient. According to the second sliding distance, the first layout container is controlled to follow the second layout container to slide.

[0155] Continuing with the above example, you can set the animation to start when the distance of sliding down from 0 is X. Assuming that when X=100px, the linkage sliding process starts, and when sliding to Y, the animation process ends. Assuming Y=200px. XY is specified by the UI designer, and the two preset coefficients a and b above can be modified to achieve different parallax effects.

[0156] For example, you can set the transparency of the bottom first layout container to 1 when X=100, and the transparency of the bottom first layout container to 0 when the application list slides to Y=200 (when the second layout container slides to Y=200); when X=100, the bottom first layout container starts to slide following the displacement, and when it slides to Y=200, it no longer follows the displacement, or the preset displacement following coefficient a is modified to 1 to achieve the effect of synchronous scrolling.

[0157] Among them, the above-mentioned Figure 6 For example, the first layout container follows the second layout container to move and the transparency changes accordingly. During the sliding process, the top style B corresponding to the top display module will gradually be exposed, such as Fig.10 The display effect shown.

[0158] In addition, a list damping effect can be added to the application list, so that the application list can continue to slide beyond the downward or upward sliding boundary, thereby achieving the purpose of fully displaying the underlying first layout container. In specific implementation, a normal sliding range and a damped sliding range can be set.

[0159] For example, assuming the list length is 300, the screen height is 100, and the normal initial state list sliding distance is 0. When sliding upward, it gradually increases until it reaches 200. The sliding process from 0 to 200 is normal sliding, and the normal sliding onScrolled method will be called back. Sliding down from the initial state 0, or sliding up from the terminal state 200, will trigger damping sliding, and the damping sliding onDampingDistanceChanged method will be called back.

[0160] In addition, you can also add linkage sliding when the application list is performing damped sliding. The process and principle of implementing linkage sliding in the application list are consistent with the specific implementation process of controlling the displacement of the first layout container and the transparency to change with the second layout container when the application list is sliding normally as described above. You can refer to the above related descriptions and will not repeat them here. For example, the initial state of the application list is 0, sliding downward triggers damped sliding and related linkage sliding, and the initial state of the application list is 0, sliding upward triggers normal sliding and related linkage sliding.

[0161] From the above description, it can be seen that by monitoring the sliding distance of the application list, the first layout container is controlled to slide along with the second layout container, so that when the application list is pulled down to refresh and slide, the target display module and the remaining modules to be displayed in the application list produce a sliding parallax effect, thereby making the rendered application page have a UI linkage effect, thereby improving the user interaction experience.

[0162] In an embodiment of the present invention, in response to a sliding operation triggered by a user on a target application interface, a first sliding direction and a first sliding distance corresponding to a second layout container are determined. According to the first sliding direction and the first sliding distance, the second layout container is controlled to slide. If the first sliding distance meets the linkage sliding condition, a layout container is controlled to slide following the second layout container, so that during the pull-down refresh and sliding process of the application list, a sliding parallax effect is generated between the target display module and the remaining modules to be displayed in the application list, thereby generating a UI linkage effect, thereby improving the user interaction experience.

[0163] Among them, the specific implementation process involved in the embodiments of the present invention can refer to the contents in the above embodiments, and will not be repeated here.

[0164] The following will describe in detail the application page display device of one or more embodiments of the present invention. Those skilled in the art will appreciate that the application page display device can be configured using commercially available hardware components through the steps taught in this solution.

[0165] Fig.11 A schematic diagram of the structure of an application page display device provided in an embodiment of the present invention, wherein the application page uses a list layout to layout multiple modules to be displayed in a target application, and the application page includes a first layout container and a second layout container, wherein the second layout container overlaps the first layout container, such as Fig.11 As shown, the device includes: an acquisition module 11, a reading module 12, a replacement module 13, and a rendering module 14.

[0166] The acquisition module 11 is used to acquire a list data set corresponding to the target application, wherein the list data set includes list data corresponding to a plurality of modules to be displayed.

[0167] The reading module 12 is used to read first list data corresponding to a target display module from the list data set, and render the first list data using the first layout container, wherein the target display module is one of the multiple modules to be displayed.

[0168] The replacement module 13 is used to replace the first list data in the list data set with the second list data to obtain a processed list data set, wherein the second list data is the list data corresponding to the preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered.

[0169] The rendering module 14 is used to render each list data in the processed list data set using the second layout container to generate a target application page.

[0170] In an optional embodiment, the device may further include a configuration module, which may be specifically used to: determine a height corresponding to the first layout container and a height corresponding to the preset blank placeholder module; wherein the height corresponding to the preset blank placeholder module is smaller than the height of the first layout container, and the transparency corresponding to the preset blank placeholder module is fully transparent.

[0171] In an optional embodiment, the reading module 12 can be specifically used to: determine the target display module according to the configuration information corresponding to the target application; read the first list data corresponding to the target display module from the list data set according to the identifier corresponding to the target display module; determine the first layout template corresponding to the target display module according to the display type in the first list data; add the first layout template to the first layout container, and render the data to be displayed in the first list data into the first layout template.

[0172] In an optional embodiment, the replacement module 13 can be specifically used to: obtain second list data corresponding to a preset blank placeholder module, the second list data does not include data to be displayed, and the display type in the second list data is a blank placeholder; replace the first list data in the list data set with the second list data to obtain a processed list data set.

[0173] In an optional embodiment, the rendering module 14 can be specifically used to: determine the second layout template corresponding to each list data in the processed list data set according to the display type in each list data; add the second layout template corresponding to each list data to the second layout container, and render the data to be displayed in each list data into the corresponding second layout template to generate a target application page.

[0174] In an optional embodiment, the rendering module 14 can also be used to: determine the first sliding direction and the first sliding distance corresponding to the second layout container in response to a sliding operation triggered by the user on the target application interface; and control the second layout container to slide according to the first sliding direction and the first sliding distance.

[0175] In an optional embodiment, the rendering module 14 may also be used to: if the first sliding distance meets the linkage sliding condition, determine the second sliding distance according to a preset displacement following coefficient and the first sliding distance; according to the second sliding distance, control the first layout container to follow the second layout container to slide; according to a preset transparency change coefficient and the first sliding distance, adjust the transparency corresponding to the first layout container; if the first sliding distance does not meet the linkage sliding condition, control the first layout container and the second layout container to slide synchronously according to the first sliding distance.

[0176] In an optional embodiment, the rendering module 14 can also be used to: determine sliding operation information according to the sliding operation, the sliding operation information including a sliding trigger position, a third sliding direction and a third sliding distance; determine the first sliding direction corresponding to the second layout container according to the third sliding direction; determine the sliding type corresponding to the second layout container according to the sliding trigger position and the third sliding direction; determine the first sliding distance corresponding to the second layout container according to the sliding type and the second sliding distance.

[0177] In an optional embodiment, the rendering module 14 can also be used to: if the first sliding distance is greater than a first preset value and the first sliding distance is less than a second preset value, determine the offset of the first sliding distance relative to the first preset value; and determine the second sliding distance based on the offset and the preset displacement following coefficient.

[0178] Fig.11 The device shown can execute the steps in the method for displaying the application page in the aforementioned embodiment. The detailed execution process and technical effects can be found in the description of the aforementioned embodiment, which will not be repeated here.

[0179] The embodiment of the present invention also provides an electronic device, such as Fig.12 As shown, the electronic device may include: a processor 21, a memory 22, and a communication interface 23. The memory 22 stores executable codes, and when the executable codes are executed by the processor 21, the processor 21 implements the display method of the application page in the above-mentioned embodiment.

[0180] In addition, an embodiment of the present invention provides a non-temporary machine-readable storage medium, on which executable code is stored. When the executable code is executed by a processor of an electronic device, the processor can at least implement the method for displaying an application page as provided in the aforementioned embodiment.

[0181] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present embodiment. Those of ordinary skill in the art may understand and implement the present invention without creative effort.

[0182] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by adding a necessary general hardware platform, and of course can also be implemented by combining hardware and software. Based on such an understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a computer product, and the present invention can be in the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0183] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for displaying an application page, characterized in that: The application page uses a list layout to layout multiple modules to be displayed in the target application, and the application page includes a first layout container and a second layout container, the second layout container overlaps the first layout container, and the method includes: Acquire a list data set corresponding to the target application, wherein the list data set includes list data corresponding to a plurality of modules to be displayed; Reading first list data corresponding to a target display module from the list data set, and rendering the first list data using the first layout container, wherein the target display module is one of the multiple modules to be displayed; Replacing the first list data in the list data set with the second list data to obtain a processed list data set, wherein the second list data is list data corresponding to a preset blank placeholder module, and the blank placeholder module is visually invisible after being rendered; The second layout container is used to render each list data in the processed list data set to generate a target application page.

2. The method according to claim 1, characterized in that The method further comprises: Determine a height corresponding to the first layout container and a height corresponding to the preset blank placeholder module; The height corresponding to the preset blank placeholder module is smaller than the height of the first layout container, and the transparency corresponding to the preset blank placeholder module is fully transparent.

3. The method according to claim 1, characterized in that The list data includes a display type and data to be displayed, and first list data corresponding to a target display module is read from the list data set, and the first layout container is used to render the first list data, including: Determining a target display module according to configuration information corresponding to the target application; According to the identifier corresponding to the target display module, read the first list data corresponding to the target display module from the list data set; Determining a first layout template corresponding to the target display module according to the display type in the first list data; The first layout template is added to the first layout container, and the data to be displayed in the first list data is rendered into the first layout template.

4. The method according to claim 1, characterized in that: The step of replacing the first list data in the list data set with the second list data to obtain a processed list data set includes: Acquire second list data corresponding to a preset blank placeholder module, where the second list data does not include data to be displayed, and the display type in the second list data is a blank placeholder; Replacing the first list data in the list data set with the second list data to obtain a processed list data set; The using the second layout container to render each list data in the processed list data set to generate a target application page includes: Determining, according to the display type of each list data in the processed list data set, a second layout template corresponding to each list data; The second layout template corresponding to each list data is added to the second layout container, and the data to be displayed in each list data is rendered into the corresponding second layout template to generate a target application page.

5. The method according to claim 1, characterized in that: The method further comprises: In response to a sliding operation triggered by a user on the target application interface, determining a first sliding direction and a first sliding distance corresponding to the second layout container; The second layout container is controlled to slide according to the first sliding direction and the first sliding distance.

6. The method according to claim 5, characterized in that The method further comprises: If the first sliding distance meets the linkage sliding condition, determining the second sliding distance according to a preset displacement following coefficient and the first sliding distance; According to the second sliding distance, controlling the first layout container to slide following the second layout container; Adjusting the transparency corresponding to the first layout container according to a preset transparency change coefficient and the first sliding distance; If the first sliding distance does not meet the linkage sliding condition, the first layout container and the second layout container are controlled to slide synchronously according to the first sliding distance.

7. The method according to claim 5, characterized in that The determining a first sliding direction and a first sliding distance corresponding to the second layout container includes: Determining sliding operation information according to the sliding operation, the sliding operation information including a sliding trigger position, a third sliding direction, and a third sliding distance; Determining, according to the third sliding direction, a first sliding direction corresponding to the second layout container; Determining a sliding type corresponding to the second layout container according to the sliding trigger position and the third sliding direction; A first sliding distance corresponding to the second layout container is determined according to the sliding type and the second sliding distance.

8. The method according to claim 6, characterized in that If the first sliding distance meets the linkage sliding condition, determining the second sliding distance according to a preset displacement following coefficient and the first sliding distance includes: If the first sliding distance is greater than a first preset value and the first sliding distance is less than a second preset value, determining an offset of the first sliding distance relative to the first preset value; The second sliding distance is determined according to the offset and the preset displacement following coefficient.

9. An electronic device, characterized in that: include: A memory, a processor, and a communication interface; wherein the memory stores executable code, and when the executable code is executed by the processor, the processor executes the method for displaying an application page as described in any one of claims 1 to 8.

10. A non-transitory machine-readable storage medium, characterized in that: The non-transitory machine-readable storage medium stores executable code, and when the executable code is executed by a processor of an electronic device, the processor executes the method for displaying an application page as described in any one of claims 1 to 8.

Images