Double-row waterfall flow data rendering method based on unit-app

Abstract

The invention discloses a unii-app-based double-column waterfall flow data rendering method. The method comprises the steps of constructing an overall component containing a to-be-rendered tag structure item and a double-column waterfall flow target interface; the method comprises the following steps: determining to-be-displayed information of a target page according to a business function, acquiring target list data, rendering an integral component by using the target list data, if rendering succeeds, respectively storing first two data of a target list into a first preset list and a second preset list, acquiring heights of the two lists in each round of traversal based on the rendered integral component, and determining a current traversal data storage list according to height comparison, obtaining a first target list and a second target list until the target list data is traversed; and finally, respectively storing the two target list data to a left column and a right column of a double-column waterfall flow target interface, and automatically rendering to complete double-column waterfall flow data display. According to the method, the problem of acquisition height failure caused by frame influence can be avoided, the problem of overlong performance and rendering time can be solved, and an efficient and accurate waterfall flow effect is achieved.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular, to a method for rendering double-column waterfall flow data based on uni-app. Background Art

[0002] In the field of front-end development, uni-app, as a framework for developing some front-end applications using Vue.js, has a wide range of application scenarios, especially in the development of WeChat mini-program applications. Vue.js, as a well-known front-end development framework written by You Yuxi, provides powerful support for front-end development with its convenience and efficiency. In current development requirements, it mainly focuses on using the unique method of obtaining component information in uni-app to calculate the height, and then realizing a simple waterfall flow effect.

[0003] Currently, there are two common implementation solutions, but both have certain defects. The existing solution one is implemented based on uni-app and uses the nextTick method of Vue.js. However, due to the influence of the framework, performance problems will occur, resulting in the invalidation of height acquisition when the component is not rendered completely, which makes the waterfall flow effect unable to be accurately realized and seriously affects the user experience. The existing solution two uses the method of splicing each waterfall flow module once and accumulating them, which will cause performance problems and significantly increase the rendering time, reducing the response speed and operation efficiency of the application. Summary of the Invention

[0004] In view of this, the embodiments of the present disclosure provide a method for rendering double-column waterfall flow data based on uni-app, which can solve problems such as long rendering cycle and poor rendering effect in the prior art, and cannot well meet the requirements of realizing a simple waterfall flow when developing WeChat mini-program applications with uni-app.

[0005] In a first aspect, the embodiments of the present disclosure provide a method for rendering double-column waterfall flow data based on uni-app, including:

[0006] Construct an overall component including the structure items of the tags to be rendered, and construct a target interface of a double-column waterfall flow to be displayed;

[0007] Determine the information to be displayed on the target page according to the business function, and obtain the target list data based on the information to be displayed;

[0008] Render the overall component according to the target list data, and judge whether the overall component is successfully rendered according to a preset judgment strategy;

[0009] If the rendering is successful, obtain the first data and the second data in the target list data, and store them in a first preset list and a second preset list respectively;

[0010] Based on the successfully rendered overall component, obtain the current first preset list height and the current second preset list height;

[0011] Determine whether the current first preset list height is greater than the current second preset list height. If so, store the next traversed data in the target list data into the second preset list; if not, store it in the first preset list;

[0012] Execute the traversal operation until the target data list is empty, obtain the current first preset list and second preset list, and respectively denote them as the first target list and the second target list;

[0013] Store the data in the first target list and the second target list into the two-column waterfall flow target interface.

[0014] Optionally, the building of the overall component including the label structure items to be rendered includes:

[0015] Call the container component in the target software and initialize the container component to a hidden state;

[0016] Create sub-label structure items corresponding to the views to be displayed within the container component to obtain the target component;

[0017] Create a data storage list within the target component, perform an initialization operation on the data storage list, and after initialization, the data storage list is empty.

[0018] Optionally, the judging whether the overall component is successfully rendered according to the preset judgment strategy includes:

[0019] Create a selector query object of uni-app;

[0020] Determine all sub-item elements in the overall component;

[0021] Call the query method of the selector query object to perform a query operation on all sub-item elements, and obtain the query results of all sub-item elements based on the callback function;

[0022] Determine whether the overall component is successfully rendered according to whether the query results exist.

[0023] Optionally, the determining all sub-item elements in the overall component includes:

[0024] Obtain the class attribute of the overall component;

[0025] Obtain the current sub-item list of the overall component according to the class attribute; the sub-item list contains the attribute information of the overall component;

[0026] Obtain all sub - item elements in the overall component according to the sub - item list; the sub - item elements include their own attribute information and their own layout position information.

[0027] Optionally, the query result is a callback result obtained after executing the query to obtain all sub - item elements by calling a callback function, and the callback result is the res content;

[0028] Determine whether the overall component is successfully rendered according to whether the query result exists, including: when the returned res content exists, it indicates successful rendering;

[0029] When the returned res content does not exist, it indicates that the rendering is not successful.

[0030] Optionally, when the overall component is not successfully rendered, re - execute the data acquisition operation and the rendering operation according to a preset strategy;

[0031] Re - execute the data acquisition operation and the rendering operation according to the preset strategy, including: call the timer function to delay for a preset time, then re - obtain the target list data according to the information to be displayed on the target page, and call the v - for directive of vue to perform the rendering operation of the overall component with the re - obtained target list data.

[0032] Optionally, determine whether the current height of the first preset list is greater than the current height of the second preset list. If so, store the next traversed data in the target list data into the second preset list; if not, store it in the first preset list, including:

[0033] Obtain the current height of the first preset list and the current height of the second preset list respectively;

[0034] Traverse the target list data and obtain the third data;

[0035] If the height of the first preset list is greater than the height of the second preset list, store the third data in the second preset list;

[0036] If the height of the first preset list is not greater than the height of the second preset list, store the third data in the first preset list;

[0037] Obtain the current height of the first preset list and the current height of the second preset list respectively, and obtain the next traversed data in the target list data and analyze and store it.

[0038] Optionally, it further includes: storing the data in the first target list and the second target list into the left column and the right column of the two-column waterfall flow target interface respectively, and automatically rendering the left column and the right column, and using the rendered two-column waterfall flow target interface as the two-column waterfall flow data rendering and display interface.

[0039] In a second aspect, an embodiment of the present disclosure further provides a two-column waterfall flow data rendering system based on uni-app, including:

[0040] A construction module, configured to construct an overall component including items of a label structure to be rendered, and construct a two-column waterfall flow target interface to be displayed;

[0041] A data acquisition module, configured to determine the information to be displayed on the target page according to the service function, and acquire target list data based on the information to be displayed;

[0042] A judgment module, configured to render the overall component according to the target list data, and judge whether the overall component is successfully rendered according to a preset judgment strategy;

[0043] A data storage and analysis module, configured to, when the rendering is successful, acquire the first data and the second data in the target list data, and store them into a first preset list and a second preset list respectively;

[0044] A height acquisition module, configured to obtain the current height of the first preset list and the current height of the second preset list based on the successfully rendered overall component;

[0045] A traversal module, configured to judge whether the current height of the first preset list is greater than the current height of the second preset list. If so, store the next traversed data in the target list data into the second preset list. If not, store it into the first preset list;

[0046] A target list acquisition module, configured to perform a traversal operation until the target data list is empty, and acquire the current first preset list and second preset list, and record them as the first target list and the second target list respectively;

[0047] A processing module, configured to store the data in the first target list and the second target list into the left column and the right column of the two-column waterfall flow target interface respectively, and automatically render the left column and the right column, and use the rendered two-column waterfall flow target interface as the two-column waterfall flow data rendering and display interface.

[0048] In a third aspect, an embodiment of the present disclosure further provides a computer device, adopting the following technical solution:

[0049] The computer device includes:

[0050] At least one processor; and,

[0051] A memory communicatively connected to the at least one processor; wherein,

[0052] The memory stores instructions executable by the at least one processor, and when the instructions are executed by the at least one processor, the at least one processor is enabled to execute the above-mentioned uni-app-based double-column waterfall flow data rendering method.

[0053] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium, which stores computer instructions for causing a computer to execute the above-mentioned uni-app-based double-column waterfall flow data rendering method.

[0054] In a fifth aspect, an embodiment of the present disclosure further provides a computer program product, including computer programs / instructions, and when the computer programs / instructions are executed by a processor, the steps of the above-mentioned method are implemented.

[0055] The dual-column waterfall flow data rendering method based on uni-app disclosed in this application first constructs an overall component containing the tag structure items to be rendered and the dual-column waterfall flow target interface to be displayed. This modular design makes the code structure clearer. Codes with different functions are separated into different modules. The overall component is responsible for handling the data rendering logic, while the dual-column waterfall flow target interface focuses on data display. When it is necessary to modify the rendering logic or the display interface, only the corresponding module needs to be adjusted, without affecting other parts of the code, greatly improving the maintainability of the code; determine the information to be displayed on the target page according to the business function, and obtain the target list data. This step separates the business logic from the data rendering logic, making the code easier to understand and manage. Changes in the business logic only need to be modified in the part of obtaining the target list data, without affecting the subsequent data rendering process; after rendering the overall component according to the target list data, judge whether the overall component is rendered successfully through a preset judgment strategy. Only when the rendering is successful will the subsequent data distribution operation continue. This mechanism can effectively avoid data errors or interface abnormalities caused by rendering failures, improving the stability and reliability of data rendering; when distributing the target list data to the first preset list and the second preset list, a strategy of judging according to the list height is adopted. If the height of the current first preset list is greater than the height of the current second preset list, the next traversed data is stored in the second preset list; otherwise, it is stored in the first preset list. This strategy can make the data heights of the two columns as balanced as possible, avoiding the situation where one column is too long and the other column is too short, improving the aesthetics of the interface and the user experience; by performing a traversal operation until the target data list is empty, the target list data is sequentially distributed to the first preset list and the second preset list. This way of traversal operation can ensure the efficiency of data processing and distribution, avoiding unnecessary repeated operations. At the same time, during the traversal process, data is distributed according to the list height, making the data distribution more reasonable and further improving the processing efficiency; after obtaining the first target list and the second target list, store the data in them into the left column and the right column of the dual-column waterfall flow target interface respectively, and automatically render the left column and the right column, effectively reducing manual intervention, improving the rendering efficiency, and ensuring the timely and accurate update of the interface.

[0056] The above description is only an overview of the technical solution of this disclosure. In order to understand the technical means of this disclosure more clearly, it can be implemented according to the content of the specification. And in order to make the above and other purposes, features and advantages of this disclosure more obvious and understandable, the following specific preferred embodiments are given and described in detail in conjunction with the drawings. Brief Description of the Drawings

[0057] To more clearly illustrate the technical solutions of the embodiments of the present disclosure, the accompanying drawings required for the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present disclosure. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0058] Figure 1 It is a schematic flowchart of a dual-column waterfall flow data rendering method based on uni-app provided by an embodiment of the present disclosure.

[0059] Figure 2 It is a schematic flowchart of a construction method of an overall component provided by an embodiment of the present disclosure.

[0060] Figure 3 It is a schematic flowchart of a method for judging whether an overall component is successfully rendered according to a preset judgment strategy provided by an embodiment of the present disclosure.

[0061] Figure 4 It is a schematic flowchart of a method for determining all sub-item elements in an overall component provided by an embodiment of the present disclosure.

[0062] Figure 5 It is a schematic structural diagram of a computer device provided by an embodiment of the present disclosure. Specific embodiments

[0063] The embodiments of the present disclosure will be described in detail below with reference to the accompanying drawings.

[0064] It should be clear that the embodiments of the present disclosure are illustrated by specific specific examples below. Those skilled in the art can easily understand other advantages and effects of the present disclosure from the content disclosed in this specification. Obviously, the described embodiments are only some embodiments of the present disclosure, rather than all embodiments. The present disclosure can also be implemented or applied through other different specific embodiments. Various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that, without conflict, the following embodiments and the features in the embodiments can be combined with each other. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present disclosure without creative efforts belong to the scope of protection of the present disclosure.

[0065] It should be noted that the following description relates to various aspects of embodiments within the scope of the appended claims. It will be apparent that the aspects described herein can be embodied in a wide variety of forms, and any specific structure and / or function described herein is illustrative only. Based on this disclosure, those skilled in the art should understand that one aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number of aspects set forth herein can be used to implement an apparatus and / or practice a method. Additionally, this apparatus and / or method can be implemented using other structures and / or functionality in addition to one or more of the aspects set forth herein.

[0066] It should also be noted that the diagrams provided in the following embodiments only illustrate the basic concept of the present disclosure schematically. Only the components related to the present disclosure are shown in the diagrams, rather than being drawn according to the number, shape, and size of the components in actual implementation. The type, quantity, and ratio of each component in actual implementation can be arbitrarily changed, and the component layout type may also be more complex.

[0067] In addition, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, those skilled in the art will understand that the aspects described can be practiced without these specific details.

[0068] Referring to Figure 1 , the present application discloses a method for rendering two-column waterfall flow data based on uni-app, including:

[0069] S100, constructing an overall component containing the label structure items to be rendered, and constructing a two-column waterfall flow target interface to be displayed.

[0070] In this step, constructing the overall component enables unified templating for data rendering, facilitating subsequent standardized display of different product data, improving development efficiency and code maintainability; constructing the two-column waterfall flow target interface in advance can clarify the position and layout of data display, providing a clear goal for data rendering and avoiding layout confusion during subsequent rendering.

[0071] Among them, before rendering, the two-column waterfall flow target interface is a blank page displayed by a skeleton screen, which includes the columns that need to be rendered by the waterfall flow that have been set, that is, the left column and the right column of the two-column waterfall flow target interface.

[0072] S200, determining the information to be displayed on the target page according to the business function, and obtaining the target list data based on the information to be displayed.

[0073] Among them, the target list data includes one or more of text information and picture information; this step ensures that the solution is implemented based on the uni-app scenario and is a solution optimized based on the uni-app scenario.

[0074] For example, in an e-commerce product display application, according to the business function, it is determined that the information to be displayed on the target page includes pictures, names, prices, sales volumes, etc. of the products. Then, by interacting with the backend server, a request is sent to obtain the product list data containing this information. For example, a request is sent to the server to request all product information under a certain category, and the server returns a list containing multiple product data. For different business function requirements, the information to be displayed in the corresponding program is different. For example, for the popular science articles or popular science interview information that needs to be displayed at the bottom of the mini-program home page, the obtained target list data may include text and pictures.

[0075] In this step, determining the information to be displayed according to the business function can accurately obtain the required data, avoid obtaining too much irrelevant information, reduce the data transmission volume and processing complexity; obtaining the target list data based on the information to be displayed ensures that the data to be rendered subsequently meets the business requirements and can provide valuable information for users.

[0076] S300, render the overall component according to the target list data, and judge whether the overall component is successfully rendered according to the preset judgment strategy;

[0077] If the rendering is successful, obtain the first data and the second data in the target list data, and store them in the first preset list and the second preset list respectively.

[0078] Specifically, a first preset list list1 is pre-constructed, corresponding to the left column of the double-column waterfall flow; a second preset list list2 is pre-constructed, corresponding to the right column of the double-column waterfall flow; then the first data obtained from the target list data is stored in the first preset list, and the second data obtained from the target list data is stored in the second preset list. By creating temporary first and second preset lists to store the analyzed data, the purpose is to let the data be prepared first and then rendered at one time. If the actual tables on both sides are directly bound to the page, it will cause the page to be continuously rendered when filling the data in the table, affecting performance. Therefore, the solution disclosed in this application can significantly improve the rendering performance.

[0079] In this step, rendering the overall component combines the data with the display template to prepare for subsequent display on the target interface. Judging the rendering success can timely discover possible problems in the rendering process and ensure the accuracy of data rendering. Initially, the first two data are respectively stored in two preset lists, laying a foundation for the subsequent double-column waterfall flow layout, enabling the two columns of data to start displaying balancedly.

[0080] S400, based on the successfully rendered overall component, obtain the current first preset list height and the current second preset list height;

[0081] Determine whether the current first preset list height is greater than the current second preset list height. If so, store the next traversed data in the target list data into the second preset list; if not, store it in the first preset list.

[0082] Among them, the method for obtaining the current first preset list height includes: obtaining the data in the current first preset list, corresponding each data's ID to the sub-items of the already rendered overall component, obtaining the corresponding sub-item height as the height of the corresponding data; adding up the heights of all data in the current first preset list to obtain the current first preset list height.

[0083] The method for obtaining the current second preset list height includes: obtaining the data in the current second preset list, corresponding each data's ID to the sub-items of the already rendered overall component, obtaining the corresponding sub-item height as the height of the corresponding data; adding up the heights of all data in the current second preset list to obtain the current second preset list height.

[0084] Taking the first preset list as an example, it is a container for temporarily storing some target list data. When calculating its height, first extract all the stored data from this list. These data usually contain some identification information. For example, each data has a unique ID; after the overall component is successfully rendered, it will contain multiple sub-items, and each sub-item corresponds to an element in the target list data. Since each data has a unique ID, through this ID, the corresponding sub-item can be found in the already rendered overall component. This step is like using a "key" (the ID of the data) to open the corresponding "door" (the sub-item of the overall component); when the corresponding sub-item is found according to the ID of the data, the height actually occupied by the sub-item on the page can be obtained, and this height is considered the height occupied by the corresponding data when displayed on the page, and it is used as the height of the data; in actual development, the method for obtaining the element height may vary depending on the front-end framework and technology used. For example, in JavaScript, methods such as offsetHeight or getBoundingClientRect() can be used to obtain the height of the element. After obtaining the height corresponding to each data in the first preset list, add up these height values, and the result of the accumulation is the total height of the current first preset list. This total height will be used for subsequent comparison with the height of the second preset list to determine which preset list the next traversed data in the target list data should be stored in.

[0085] In this step, by comparing the heights of the two columns to determine the storage location of the data, the balance of the two-column waterfall layout can be ensured, avoiding the situation where one column is too long and the other is too short, and making the interface display more beautiful.

[0086] S500, perform a traversal operation until the target data list is empty, obtain the current first preset list and second preset list, and record them as the first target list and the second target list respectively.

[0087] Specifically, continuously repeat step S400 to process each data in the target list data in turn until all data is processed. At this time, the first preset list and the second preset list have stored all the product data, and record them as the first target list and the second target list respectively. Performing the traversal operation ensures that all data in the target list data is reasonably allocated to the two columns without data omission, clearly obtaining the first target list and the second target list, providing an accurate data source for subsequent rendering on the target interface.

[0088] Among them, each time the next data in the target data list is traversed, the current height of the first preset list and the current height of the second preset list are re-obtained. For example, after analyzing and storing the third data in the target data list, traverse the next data in the target list data, that is, obtain the fourth data in the target data list. At this time, calculate the current height of the first preset list and the current height of the second preset list, that is, consider that the third data has been stored, and then determine the storage scheme of the fourth data according to the comparison of the current height of the first preset list and the current height of the second preset list; and so on until all data in the target data list is traversed, that is, all data in the target data list is transferred and stored, and at this time the target data list is empty, obtain the current first preset list and second preset list, that is, the latest first preset list and second preset list, and record them as the first target list and the second target list respectively.

[0089] S600, store the data in the first target list and the second target list into the left column and the right column of the two-column waterfall target interface respectively, and automatically render the left column and the right column, and use the rendered two-column waterfall target interface as the two-column waterfall data rendering display interface.

[0090] Specifically, the v-for syntax of vue can be used to automatically render the left column and the right column of the two-column waterfall target interface, that is, the two-way binding of vue triggers the rendering of the actual content of the two-column list waterfall display label on the page, and finally forms a two-column waterfall of uni-app. Use the rendered two-column waterfall target interface as the two-column waterfall data rendering display interface.

[0091] In this step, the two columns of data are respectively stored in the left and right columns of the target interface and rendered, realizing the layout display of the double-column waterfall flow, providing users with an intuitive and beautiful data display method, and improving the user experience.

[0092] The double-column waterfall flow data rendering method based on uni-app disclosed in this application first constructs an overall component containing the label structure items to be rendered and the target interface of the double-column waterfall flow to be displayed. This modular design makes the code structure clearer. The code with different functions is separated into different modules. The overall component is responsible for handling the data rendering logic, while the target interface of the double-column waterfall flow focuses on data display. When it is necessary to modify the rendering logic or the display interface, only the corresponding module needs to be adjusted, which will not affect the code of other parts, greatly improving the maintainability of the code; determine the information to be displayed on the target page according to the business function, and obtain the target list data. This step separates the business logic from the data rendering logic, making the code easier to understand and manage. Changes in the business logic only need to be modified in the part of obtaining the target list data, and will not affect the subsequent data rendering process; after rendering the overall component according to the target list data, judge whether the overall component is rendered successfully through a preset judgment strategy. Only when the rendering is successful, will the subsequent data distribution operation continue. This mechanism can effectively avoid data errors or interface anomalies caused by rendering failures, improving the stability and reliability of data rendering; when distributing the target list data to the first preset list and the second preset list, a strategy of judging according to the list height is adopted. If the height of the current first preset list is greater than the height of the current second preset list, the next traversed data is stored in the second preset list; otherwise, it is stored in the first preset list. This strategy can make the data heights of the two columns as balanced as possible, avoiding the situation where one column is too long and the other column is too short, and improving the aesthetics of the interface and the user experience; by performing a traversal operation until the target data list is empty, the target list data is sequentially distributed to the first preset list and the second preset list. This way of traversal operation can ensure the efficient processing and distribution of data, avoiding unnecessary repeated operations. At the same time, during the traversal process, data is distributed according to the list height, making the data distribution more reasonable and further improving the processing efficiency; after obtaining the first target list and the second target list, store the data in them into the left and right columns of the double-column waterfall flow target interface respectively, and automatically render the left and right columns. This automatic rendering mechanism can reduce manual intervention, improve the rendering efficiency, and ensure the timely and accurate update of the interface.

[0093] Due to the adoption of a data allocation strategy based on the list height, the data heights in the left and right columns of the two-column waterfall flow target interface are relatively balanced, making the interface more aesthetically pleasing. When users browse the data, they will not experience visual disharmony due to one column being too long, thus improving the user's browsing experience. The entire data rendering process is automatically completed, and users can promptly view the rendered two-column waterfall flow data display interface. This real-time nature can meet the users' needs for timely data acquisition and display, enhancing user satisfaction.

[0094] In this embodiment, the two-column waterfall flow layout can make full use of the screen space to display more data while maintaining the beauty and balance of the interface, enabling users to more easily browse and find the information they need; by reasonably allocating data into two columns, it avoids monotony and congestion in data display, making the data display more orderly and clear; adopting the method of separating the overall component from the target interface and a standardized data rendering process reduces the development complexity and improves the maintainability and reusability of the code; this method can handle data of different sizes and types, has strong versatility and flexibility, and can adapt to various business scenarios.

[0095] The method disclosed in this application obtains the rendering results of existing nodes in a timely manner, analyzes and calculates all the waterfall flow data to be written, and then writes it into the two-column waterfall flow display label at one time, finally achieving one-time rendering to obtain the rendering results, which is simple and efficient.

[0096] Referring to Figure 2 , the method of "constructing an overall component containing the label structure items to be rendered" in S100, that is, the construction method of the overall component, includes:

[0097] S111, call the container component in the target software and initialize the container component to a hidden state.

[0098] In this step, when the application starts, if the container component is directly displayed while the content inside is not fully prepared, users may see an incomplete or chaotic interface, resulting in a feeling of page flickering. Initializing the container component to a hidden state and then displaying it after the subsequent content is ready can provide users with a smooth and comfortable loading experience; in the hidden state, the system will not perform rendering and layout calculations on the container component and its internal elements, which is very important when dealing with complex components or a large amount of data, and can reduce the occupation of system resources, improving the performance and response speed of the application.

[0099] Suppose the target software is a news and information application developed based on uni-app. In this application, the container component can be analogized to a large "storage box" for accommodating the news content to be displayed later; when developers design the interface, they call the general container component provided by uni-app, such as similar toComponents with label functions. After creating this container component, set it to a hidden state, just like closing the "storage box" first, and users can't see it temporarily on the interface.

[0100] S112. Create sub-label structure items corresponding to the view to be displayed within the container component to obtain the target component.

[0101] In this step, the view to be displayed is split into different sub-label structure items and encapsulated within the container component to form an independent target component. This makes the code structure clearer, with the functions and responsibilities of different parts clearly defined. If the news display style needs to be modified or new display content needs to be added later, only the target component needs to be adjusted, without affecting other parts of the code, improving the maintainability and reusability of the code. The sub-label structure items provide a clear corresponding relationship for data binding. For example, when news data is obtained from the server, the data can be easily filled into the corresponding sub-label structure items to achieve the dynamic display of data and views.

[0102] Continuing with the news application as an example, the view to be displayed is the news title, abstract, and publication time. Inside the previously created container component ("storage box"), developers create corresponding sub-label structure items. It can be imagined as dividing different small grids in the "storage box", with each small grid used to place specific content. For example, one small grid for the news title, one for the abstract, and one for the publication time. In this way, the container component plus these sub-label structure items form a complete target component for displaying the relevant information of a piece of news.

[0103] S113. Create a data storage list inside the target component, perform an initialization operation on the data storage list, and the initialized data storage list is empty.

[0104] In this step, the data is centrally stored in a list for easy unified management and operation. Developers can easily perform operations such as sorting, filtering, adding, or deleting elements on the list, without having to handle data separately in the code. When the data in the data storage list changes, the target component can automatically update the display content according to the new data in the list. Initializing it as an empty list can avoid exceptions when the data is not yet ready, ensuring the stability and accuracy of view updates.

[0105] Still taking the news application as an example, create a data storage list inside the target component. This list is like a "data warehouse" for storing news data obtained from the server. When the application starts, initialize this "data warehouse" as empty, meaning there is no actual news data in it yet. Subsequently, when the application requests news data from the server, the obtained data will be sequentially stored in this list.

[0106] The construction method of the overall component disclosed in S111 - S113, by constructing the overall component step by step, splitting different functions and tasks, developers can focus more on the implementation of each step. At the same time, the modular design enhances the code reusability, reduces the workload of repeated development, and thus improves the development efficiency; first hide the container component, then gradually create sub - label structure items and initialize the data list, and finally display the complete target component uniformly, avoiding page flickering and abnormal display, providing users with a smooth and stable interface display, and enhancing the user experience; the initialization of the data storage list and the subsequent data filling mechanism enable the system to conveniently process data from different sources and in different quantities. When more types of news need to be displayed or other functions are added, only the data storage list and the target component need to be correspondingly extended, without causing too much impact on the entire system.

[0107] Refer to Figure 3 , for the method of judging whether the overall component is rendered successfully according to the preset judgment strategy in S300, it includes:

[0108] S311, create a selector query object of uni - app.

[0109] Specifically, the selector query object created by the uni.createSelectorQuery() method provides a unified interface for subsequent querying of page node information, facilitating various query operations by developers; integrated with the uni - app framework, that is, the object is provided by the uni - app framework and can be well integrated with other functions and features of uni - app, ensuring compatibility and stability in the uni - app development environment.

[0110] S312, determine all sub - item elements in the overall component.

[0111] Precisely locate all sub - item elements in the overall component, providing a clear target for subsequent queries and operations. After determining the sub - item elements, it is convenient to obtain relevant information of these elements, such as layout information, attribute information, etc., providing data support for further business logic processing.

[0112] S313, call the query method of the selector query object to perform query operations on all sub - item elements, and obtain the query results of all sub - item elements based on the callback function.

[0113] In this embodiment, the query result is a callback result obtained after calling the callback function to execute the query result of obtaining all sub - item elements, and the callback result is the res content.

[0114] Asynchronous acquisition of query results using callback functions does not block the main thread, ensuring the fluency and response speed of the application. At the same time, it can obtain the complete query results of all sub-item elements, providing an accurate data basis for subsequent judgment of whether the component is successfully rendered.

[0115] S314, determine whether the overall component is successfully rendered based on the existence of the query results.

[0116] Determining whether the component is successfully rendered by judging the existence of the query results is a simple and direct method, easy to implement and understand. At the same time, it can promptly detect cases where the component rendering fails, facilitating error handling and debugging by developers, and improving the stability and reliability of the application.

[0117] Specifically, when the returned res content exists, it indicates successful rendering; when the returned res content does not exist, it indicates unsuccessful rendering.

[0118] Among them, the situation where the res content does not exist includes one or more of the following: res does not exist, res is an empty array, res[0] is an empty array, res[0][0] does not exist, or res[0][0].height does not exist.

[0119] After using uni.createSelectorQuery().exec() to execute the selector query, the parameter res in its callback function is an array that contains the results of different query operations. Among them, res is the parameter received by the exec callback function, which is an array, and each element in the array corresponds to the result of a query operation.

[0120] Since the selector query can chain multiple query methods (such as select, selectAll, etc.), the results of each method will be stored in the res array in order. res[0] usually represents the result of the first query operation; if the select method is used to select a single element, res[0] is the relevant information object of that element; if the selectAll method is used to select multiple elements, res[0] is an array containing multiple element information objects.

[0121] When the selectAll method is used to select multiple elements, res[0] is an array, and res[0][0] represents the first element information object in the array. To judge whether res[0] does not exist or is empty: check whether the first element of the res array exists; if the selectAll method is used, it can also be further checked whether res[0] is an empty array.

[0122] res[0][0].height represents the height attribute in the element information object of res[0][0], and this attribute usually represents the height of the element. The determination of the non-existence of res[0][0].height includes: first, determining the element information object based on whether res[0] is an array, and then checking whether the object and its height attribute exist.

[0123] Further, referring to Figure 4 , the method of "determining all sub-item elements in the overall component" in S312, that is, the method of determining all sub-item elements in the overall component, specifically includes:

[0124] A100, obtaining the class attribute of the overall component.

[0125] In uni-app, the class attribute of the overall component can be obtained by means of a selector query object.

[0126] The class attribute is an important identifier of the component. By obtaining the class attribute, the overall component can be more accurately located, avoiding confusion with other components. The class attribute can be used as the basis for subsequent selection of the component and its sub-items, providing key information for the subsequent steps.

[0127] A200, obtaining the current sub-item list of the overall component according to the class attribute; the sub-item list contains the attribute information of the overall component.

[0128] Specifically, after obtaining the class attribute of the overall component, this class attribute can be used to select the overall component, and then its sub-item list can be obtained.

[0129] Obtaining the sub-item list can clearly understand the internal structure of the overall component, know which sub-items the component contains and the basic attribute information of these sub-items, and prepare for obtaining the detailed information of the sub-item elements in the subsequent steps. The attribute information in the sub-item list can be used as the basis for further query and operation.

[0130] A300, obtaining all sub-item elements in the overall component according to the sub-item list; the sub-item elements contain their own attribute information and their own layout position information.

[0131] Specifically, after obtaining the sub-item list, by traversing the sub-item list, the detailed information of each sub-item element can be obtained, including its own attribute information and layout position information.

[0132] Obtaining the attribute information and layout position information of the sub-item elements can comprehensively understand the situation of each sub-item element, providing detailed data support for operations such as component rendering and interaction; the layout position information is very important for realizing the layout adjustment and interaction effects of the component. For example, the implementation of animation effects is based on the position of the sub-item elements.

[0133] The method disclosed in A100 - A300 can operate and manage components more efficiently by gradually obtaining the class attributes, sub - item lists, and detailed information of sub - item elements of the components, reducing the debugging time during the development process; comprehensively understanding the structure and information of sub - item elements enables developers to better control the rendering and interaction of components, improving the stability and reliability of components; based on the layout position information of sub - item elements, smoother animation effects and interaction experiences can be achieved, enhancing user satisfaction with the application.

[0134] In this embodiment, when the overall component rendering fails, the data acquisition operation and the rendering operation are re - executed according to a preset strategy.

[0135] Specifically, re - executing the data acquisition operation and the rendering operation according to the preset strategy includes: calling a timer function (such as the setTimeout function) to delay for a preset time (such as 300 ms), and then re - obtaining the target list data according to the information to be displayed on the target page. Then, call the v - for directive of vue to perform the rendering operation of the overall component with the re - obtained target list data.

[0136] Furthermore, in the current embodiment, there is an overall component whose rendering depends on the target list data obtained from the information to be displayed on the target page. When attempting to render the overall component for the first time, if the rendering fails, certain measures need to be taken to solve this problem. The preset strategy adopted here is to re - execute the data acquisition operation and the rendering operation. Specifically, call a timer function to delay for a preset time. Use a timer function like setTimeout to set a preset delay time (for example, 300 ms). The purpose of this step is to give the system some time to handle possible resource loading, data preparation, etc. problems. During this delay time, the system may complete some operations that were not completed before, thus creating better conditions for re - obtaining data and rendering the component. After the delay time ends, obtain the target list data from the information to be displayed on the target page again. This may involve sending requests to the server, reading data from local caches, etc. to ensure that the latest, complete, and available data is obtained. Call the v - for directive of Vue to perform the rendering operation of the overall component with the re - obtained target list data. v - for is a directive in the Vue framework used to loop - render lists. When the target list data is re - obtained, use the v - for directive to bind this data to the overall component, thereby achieving the re - rendering of the component.

[0137] Component rendering failure may be caused by various reasons, such as network latency, incomplete data loading, etc. By re - fetching and rendering the data after a delay, it can give the system enough time to solve these problems, increase the probability of successful component rendering, and thus enhance the stability of component rendering. When the component rendering fails, if not handled, users may see a blank or incomplete page, which will affect the user experience. Adopting this preset strategy can automatically attempt to solve the rendering problem, allowing users to see the complete and correct page content faster and improving user satisfaction with the application. For developers, there is no need to manually check the reason for each rendering failure and perform complex error handling. The preset strategy can automatically complete the operations of re - fetching data and rendering, simplifying the error - handling logic and reducing the development and maintenance costs. In some dynamic application scenarios, data may change at any time. By re - fetching data and rendering the component, it can ensure that the component always displays the latest data and adapts to the dynamically changing environment.

[0138] The double - column waterfall flow data rendering method based on uni - app disclosed in this application deprecates nextTick in Vue.js because uni - app uses nextTick to notify the completion of rendering, and there is a defect that sometimes uni - app cannot notify after rendering, which causes it to be ineffective in some scenarios in uni - app. It uses setTimeout to regularly check whether there is a tag height to ensure timely information acquisition.

[0139] In the existing solutions, Solution 1 using the nextTick method of Vue.js has performance problems affected by the framework, and Solution 2 has performance problems and too long rendering time due to concatenating each waterfall flow module accumulatively once. However, this application constructs temporary first and second preset lists, allowing the data to be prepared in these two temporary tables first and then rendered at once, effectively avoiding the problems existing in the existing solutions. If directly binding the actual tables on both sides to the page, the page will keep rendering when filling the data table, thus greatly reducing unnecessary rendering operations, effectively improving the overall rendering performance, and increasing the response speed of the application.

[0140] There is a problem in the existing Solution 1 that obtaining the height fails when the component is not rendered completely, which makes it impossible to accurately implement the waterfall flow effect. The solution of this application uses a preset judgment strategy to judge whether the overall component is rendered successfully, and only after successful rendering will subsequent data distribution and rendering operations be carried out. This ensures that subsequent data processing and rendering are based on the component that has been successfully rendered, avoiding problems such as height acquisition failure caused by incomplete component rendering, and thus being able to accurately implement the double - column waterfall flow effect and improving the user experience.

[0141] The solution of this application has a clear and reasonable logic in data allocation. When allocating the target list data to the first preset list and the second preset list, the storage location of the next traversed data is determined by comparing the heights of the current two lists. This dynamic data allocation method can make the heights of the left and right columns of the double-column waterfall flow more balanced, making the display effect of the waterfall flow more beautiful and reasonable. However, such a delicate data allocation strategy is not reflected in the existing solutions.

[0142] For the existing solution one that uses the nextTick method, which has performance problems affected by the framework and may cause the height acquisition to fail when the component is not fully rendered. This application uses a preset judgment strategy to start subsequent data processing and rendering operations only after the overall component is successfully rendered, which avoids unnecessary operations when the component is not fully rendered, thus solving the problem of height acquisition failure. At the same time, by preparing the data in the temporary list first and then performing a one-time rendering, the number of renderings is reduced, the performance is improved, and the performance problems caused by the framework are avoided.

[0143] For the existing solution two that uses the method of concatenating each waterfall flow module accumulatively once, resulting in performance problems and too long rendering time. The solution of this application uses the first preset list and the second preset list as temporary storage, first reasonably allocates the target list data to these two temporary lists, and finally stores the data in the left and right columns of the double-column waterfall flow target interface for rendering at one time. This method avoids the performance loss caused by single-time concatenation and accumulation, reduces the rendering time, and improves the rendering efficiency.

[0144] In a second aspect, the embodiments of the present disclosure further provide a double-column waterfall flow data rendering system based on uni-app, which is used to execute the double-column waterfall flow data rendering method disclosed in the first aspect of this application, and specifically includes:

[0145] A construction module, which is used to construct an overall component including the tag structure items to be rendered and construct the double-column waterfall flow target interface to be displayed;

[0146] A data acquisition module, which is used to determine the information to be displayed on the target page according to the business function and acquire the target list data based on the information to be displayed;

[0147] A judgment module, which is used to render the overall component according to the target list data and judge whether the overall component is successfully rendered according to the preset judgment strategy;

[0148] A data storage and analysis module, which is used to, when the rendering is successful, acquire the first data and the second data in the target list data and store them in the first preset list and the second preset list respectively;

[0149] A height acquisition module, configured to obtain a current first preset list height and a current second preset list height based on the overall component with successful rendering;

[0150] A traversal module, configured to determine whether the current first preset list height is greater than the current second preset list height. If so, store the next traversal data in the target list data into the second preset list; if not, store it in the first preset list;

[0151] A target list acquisition module, configured to perform traversal operations until the target data list is empty, and obtain the current first preset list and second preset list, and record them as the first target list and the second target list respectively;

[0152] A processing module, configured to store the data in the first target list and the second target list into the left column and the right column of the two-column waterfall flow target interface respectively, and automatically render the left column and the right column, and use the rendered two-column waterfall flow target interface as the two-column waterfall flow data rendering display interface.

[0153] The computer device according to an embodiment of the present disclosure includes a memory and a processor. The memory is used to store non-transitory computer-readable instructions. Specifically, the memory may include one or more computer program products, and the computer program products may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory, etc. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc.

[0154] The processor may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the computer device to perform desired functions. In an embodiment of the present disclosure, the processor is used to run the computer-readable instructions stored in the memory, so that the computer device executes all or part of the steps of the two-column waterfall flow data rendering method based on uni-app in the foregoing embodiments of the present disclosure.

[0155] Those skilled in the art should understand that, in order to solve the technical problem of how to obtain a good user experience effect, the embodiments may also include well-known structures such as communication buses and interfaces, and these well-known structures should also be included in the protection scope of the present disclosure.

[0156] As Figure 5 FIG. is a schematic structural diagram of a computer device provided by an embodiment of the present disclosure. It shows a schematic structural diagram of a computer device suitable for implementing the computer device in the embodiments of the present disclosure. Figure 5 The computer device shown is merely an example and should not impose any limitations on the functions and scope of use of the embodiments of the present disclosure.

[0157] As Figure 5 shown, the computer device may include a processor (such as a central processing unit, a graphics processing unit, etc.), which may perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) or a program loaded from a storage device into a random access memory (RAM). In the RAM, various programs and data required for the operation of the computer device are also stored. The processor, ROM, and RAM are connected to each other through a bus. An input / output (I / O) interface is also connected to the bus.

[0158] Generally, the following devices may be connected to the I / O interface: an input device including, for example, a sensor or a visual information acquisition device; an output device including, for example, a display screen; a storage device including, for example, a magnetic tape, a hard disk, etc.; and a communication device. The communication device may allow the computer device to communicate wirelessly or wirelesly with other devices (such as edge computing devices) to exchange data. Although Figure 5 a computer device with various devices is shown, it should be understood that it is not required to implement or have all the shown devices. Instead, more or fewer devices may be implemented or had.

[0159] In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, the embodiments of the present disclosure include a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network through the communication device, or installed from a storage device, or installed from a ROM. When the computer program is executed by the processor, all or part of the steps of the double-column waterfall flow data rendering method based on uni-app of the embodiments of the present disclosure are executed.

[0160] For a detailed description of this embodiment, reference may be made to the corresponding descriptions in the foregoing embodiments, and details will not be repeated here.

[0161] A computer-readable storage medium according to the embodiments of the present disclosure stores non-temporary computer-readable instructions. When the non-temporary computer-readable instructions are run by a processor, all or part of the steps of the double-column waterfall flow data rendering method based on uni-app of the foregoing embodiments of the present disclosure are executed.

[0162] The above computer-readable storage media include, but are not limited to: optical storage media (e.g., CD-ROMs and DVDs), magneto-optical storage media (e.g., MOs), magnetic storage media (e.g., magnetic tapes or external hard drives), media with built-in rewritable non-volatile memories (e.g., memory cards), and media with built-in ROMs (e.g., ROM cartridges).

[0163] For a detailed description of this embodiment, reference may be made to the corresponding descriptions in the foregoing embodiments, which will not be elaborated herein.

[0164] The basic principles of the present disclosure have been described above in connection with specific embodiments. However, it should be noted that the advantages, benefits, effects, etc. mentioned in the present disclosure are merely examples and not limitations, and it cannot be considered that these advantages, benefits, effects, etc. are essential for each embodiment of the present disclosure. Additionally, the specific details disclosed above are for illustrative and facilitating understanding purposes only and are not limitations. The above details do not limit the present disclosure to necessarily implementing with the above specific details.

[0165] In the present disclosure, relational terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. The block diagrams of the devices, apparatuses, equipment, and systems involved in the present disclosure are only illustrative examples and do not intend to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including", "comprising", "having", etc. are open-ended terms, meaning "including but not limited to", and can be used interchangeably with each other. The words "or" and "and" used herein refer to the phrase "and / or", and can be used interchangeably with each other, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to", and can be used interchangeably with each other.

[0166] In addition, as used herein, the "or" used in the listing of items starting with "at least one" indicates a separate listing, so that for example, the listing of "at least one of A, B, or C" means A or B or C, or AB or AC or BC, or ABC (i.e., A and B and C). Furthermore, the term "exemplary" does not mean that the described examples are preferred or better than other examples.

[0167] It should also be noted that in the systems and methods of the present disclosure, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent solutions of the present disclosure.

[0168] Various changes, substitutions, and alterations to the technology described herein can be made without departing from the teachings defined by the appended claims. Additionally, the scope of the claims of this disclosure is not limited to the specific aspects of the processes, machines, manufactures, compositions of events, means, methods, and acts described above. Processes, machines, manufactures, compositions of events, means, methods, or acts that are currently available or later to be developed that perform substantially the same function or achieve substantially the same result as the corresponding aspects described herein can be utilized. Accordingly, the appended claims include such processes, machines, manufactures, compositions of events, means, methods, or acts within their scope.

[0169] The foregoing description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the disclosure. Thus, the disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

[0170] The foregoing description has been presented for purposes of illustration and description. Additionally, this description is not intended to limit the embodiments of the disclosure to the form disclosed herein. Although several example aspects and embodiments have been discussed above, those skilled in the art will recognize some of their variations, modifications, alterations, additions, and subcombinations.

Claims

1. A method for rendering double-column waterfall flow data based on uni-app, characterized in that, Including: Construct an overall component including the tag structure items to be rendered; Construct a two-column waterfall flow target interface to be displayed; Determine the information to be displayed on the target page according to the business function, and obtain the target list data based on the information to be displayed; Render the overall component according to the target list data, and judge whether the overall component is successfully rendered according to the preset judgment strategy; If the rendering is successful, obtain the first data and the second data in the target list data, and store them in the first preset list and the second preset list respectively; Based on the overall component with successful rendering, obtain the current height of the first preset list and the current height of the second preset list; Judge whether the current height of the first preset list is greater than the current height of the second preset list. If so, store the next traversed data in the target list data into the second preset list. If not, store it in the first preset list; Execute the traversal operation until the target data list is empty, obtain the current first preset list and second preset list, and record them as the first target list and the second target list respectively; Store the data in the first target list and the second target list into the two-column waterfall flow target interface.

2. The method for rendering double-column waterfall flow data based on uni-app according to claim 1, wherein The construction of the overall component including the tag structure items to be rendered includes: Call the container component in the target software and initialize the container component to a hidden state; Create a sub-tag structure item corresponding to the view to be displayed within the container component to obtain a target component; Create a data storage list within the target component, perform an initialization operation on the data storage list, and the initialized data storage list is empty.

3. The method for rendering double-column waterfall flow data based on uni-app according to claim 1, characterized in that The judgment of whether the overall component is successfully rendered according to the preset judgment strategy includes: Create a selector query object of uni-app; Determine all sub-item elements in the overall component; Call the query method of the selector query object to perform a query operation on all sub-item elements, and obtain the query results of all sub-item elements based on the callback function; Determine whether the overall component is successfully rendered according to whether the query results exist.

4. The method for rendering double-column waterfall flow data based on uni-app according to claim 3, wherein The determination of all sub-item elements in the overall component includes: Obtain the class attribute of the overall component; Obtain the current sub-item list of the overall component according to the class attribute; the sub-item list contains the attribute information of the overall component; Obtain all sub-item elements in the overall component according to the sub-item list; the sub-item elements contain their own attribute information and their own layout position information.

5. The method for rendering double-column waterfall flow data based on uni-app according to claim 3, wherein The query result is a callback result obtained after calling the callback function to execute the query result of obtaining all sub-item elements, and the callback result is the res content; The determination of whether the overall component is successfully rendered according to whether the query results exist includes: when the returned res content exists, it indicates successful rendering; When the returned res content does not exist, it indicates that the rendering is not successful.

6. The method for rendering double-column waterfall flow data based on uni-app according to claim 5, wherein When the overall component is not successfully rendered, re-execute the data acquisition operation and the rendering operation according to the preset strategy; Re - executing the data acquisition operation and the rendering operation according to the preset policy includes: calling the timer function to delay for a preset time and then re - acquiring the target list data according to the information to be displayed on the target page, and calling the v - for directive of vue to perform the rendering operation of the overall component with the re - acquired target list data.

7. The method for rendering two-column waterfall flow data based on uni-app according to claim 1, wherein Judging whether the current first preset list height is greater than the current second preset list height. If so, storing the next traversed data in the target list data into the second preset list; if not, storing it in the first preset list, includes: Respectively obtaining the current first preset list height and the second preset list height; Traversing the target list data and obtaining the third data; If the first preset list height is greater than the second preset list height, storing the third data into the second preset list; If the first preset list height is not greater than the second preset list height, storing the third data into the first preset list; Respectively obtaining the current first preset list height and the second preset list height, and obtaining the next traversed data in the target list data for analysis and storage.

8. The method for rendering double-column waterfall flow data based on uni-app according to claim 1, wherein Further includes: Respectively storing the data in the first target list and the second target list into the left column and the right column of the two - column waterfall flow target interface, and automatically rendering the left column and the right column. Taking the rendered two - column waterfall flow target interface as the two - column waterfall flow data rendering and display interface.

9. A computer device, characterized in that, The computer device includes: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor. The instructions are executed by the at least one processor so that the at least one processor can execute the two - column waterfall flow data rendering method based on uni - app according to any one of claims 1 - 8.

10. A computer-readable storage medium, characterized in that, This computer - readable storage medium stores computer instructions for causing a computer to execute the two - column waterfall flow data rendering method based on uni - app according to any one of claims 1 - 8.

Images