A waterfall loading method, device, equipment and medium for commodity display

Abstract

The application discloses a waterfall loading method, device, equipment and medium for commodity display, which is applied to a small program in a mobile terminal and includes at least two view containers. The method comprises the following steps: acquiring the pixel area where the last loaded initial commodity data is located from each view container; calculating the pixel difference between the multiple pixel areas; if a loading instruction is received, acquiring multiple updated commodity data from a commodity database; updating the loading starting container according to the comparison result of the pixel difference and a preset pixel threshold value, loading the updated commodity data into each view container based on the updated loading starting container, rendering, generating a target display page for display, and updating the initial commodity data, so as to jump to acquire the pixel area where the last initial commodity data is located from each view container, and update the loading starting container through the pixel difference to balance the display specifications of the commodity data in each view container, thereby improving the flexibility and smoothness of the small program page display.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data loading, and in particular to a waterfall loading method, device, equipment and medium for commodity display. BACKGROUND

[0002] With the continuous development of Internet technology, WeChat applets, as an application that can be used without downloading and installation, have attracted widespread attention from various industries. It is hoped that the powerful social ability of WeChat can be used to spread commodity advertisements and provide rich commodity display.

[0003] However, in the process of commodity display, commodity layout often faces display problems, such as differences in the titles, promotion labels, picture sizes or contents of some commodities, which easily affect the page aesthetics and user experience.

[0004] Therefore, the prior art uses a waterfall method to load and present commodity pictures. However, the existing waterfall commodity display scheme cannot be compatible with the display of commodity pictures of different specifications or with a large number of promotion information, resulting in large-scale blanking of commodity display in the WeChat applet, which affects the flexibility and smoothness of commodity display. SUMMARY

[0005] The present application provides a waterfall loading method, device, equipment and medium for commodity display, which solves the technical problem that the existing WeChat applet waterfall commodity display scheme cannot be compatible with the display of commodity pictures of different specifications, resulting in large-scale blanking of commodity display in the WeChat applet, which affects the flexibility and smoothness of commodity display.

[0006] The first aspect of the present application provides a waterfall loading method for commodity display, which is applied to a WeChat applet in a mobile terminal. The WeChat applet includes at least two view containers. The method comprises the following steps:

[0007] Obtaining the pixel regions where the last loaded initial commodity data is located from each view container;

[0008] Calculating the pixel difference between a plurality of pixel regions;

[0009] When a loading instruction is received, obtaining a plurality of updated commodity data from a preset commodity database;

[0010] Updating the preset loading starting container according to the comparison result of the pixel difference and a preset pixel threshold, and loading the updated commodity data into each view container based on the updated loading starting container;

[0011] When the updated commodity data is loaded, rendering all the view containers to generate a target display page for display;

[0012] Update the initial product data to the updated product data, and then proceed to the step of obtaining the pixel area where the last loaded initial product data is located from each of the view containers.

[0013] Optionally, the mini-program further includes a visible area, and the step of calculating the pixel difference between the plurality of pixel areas includes:

[0014] Extract the initial pixel position corresponding to each pixel region;

[0015] Select the initial pixel position that is farthest from the bottom of the visible area from the plurality of initial pixel positions as the first target pixel position;

[0016] Select the initial pixel position closest to the bottom of the visible area from the plurality of initial pixel positions as the second target pixel position;

[0017] The difference between the first target pixel position and the second target pixel position is calculated as the pixel difference between the plurality of pixel regions.

[0018] Optionally, the step of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container, includes:

[0019] Compare the pixel difference with a preset pixel threshold;

[0020] If the pixel difference is greater than or equal to the pixel threshold, the preset loading starting point container is updated to the view container where the first target pixel is located;

[0021] Starting from the updated loading starting point container, the updated product data is loaded sequentially into each of the view containers.

[0022] Optionally, the step of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container, further includes:

[0023] If the pixel difference is less than the pixel threshold, then the current loading starting point container is determined as the updated loading starting point container.

[0024] Optionally, before the step of obtaining the pixel region where the last loaded initial product data is located from each of the view containers, the method further includes:

[0025] When a homepage opening command is received, multiple initial product data are retrieved from a pre-set product database;

[0026] The initial product data is loaded into each of the view containers based on the preset loading starting point container;

[0027] Render all the view containers to generate the initial display page for presentation.

[0028] Optionally, the mini-program further includes a waterfall layout container, and the method further includes:

[0029] The waterfall flow container monitors the scroll bar position corresponding to the scroll bar within the mini-program in real time.

[0030] When the scroll bar position is at a preset update threshold position, a scroll update command is sent to the product database;

[0031] The waterfall container receives the scrolling product data returned by the product database in response to the scrolling update instruction, and identifies the scrolling product data as the new updated product data.

[0032] Jump to execute the steps of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container.

[0033] Optionally, the method further includes:

[0034] Real-time acquisition of the pixel dimensions of the updated product data;

[0035] If the pixel size is larger than the size of the visible area corresponding to the mini-program, then the pixels corresponding to the updated product data are loaded into the view container line by line;

[0036] If the pixel size is less than or equal to the visible area.

[0037] A second aspect of the present invention provides a waterfall-style loading device for product display, applied to a mini-program within a mobile terminal, the mini-program including at least two view containers, the device comprising:

[0038] The pixel region acquisition module is used to acquire the pixel region where the last loaded initial product data is located from each of the view containers;

[0039] A pixel difference calculation module is used to calculate the pixel difference between multiple pixel regions;

[0040] The product data acquisition module is used to retrieve multiple updated product data from a preset product database when a loading command is received.

[0041] The data loading module is used to update the preset loading start container based on the comparison result between the pixel difference and the preset pixel threshold, and to load the updated product data into each of the view containers based on the updated loading start container.

[0042] The page rendering and display module is used to render all the view containers and generate the target display page for display after the updated product data is loaded.

[0043] The loop update module is used to update the initial product data to the updated product data and then jump to the step of obtaining the pixel area where the last loaded initial product data is located from each of the view containers.

[0044] A third aspect of the present invention provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor causes the processor to perform the steps of the waterfall loading method for product display as described in any of the first aspects of the present invention.

[0045] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed, implements the waterfall loading method for product display as described in any of the first aspects of the present invention.

[0046] As can be seen from the above technical solutions, the present invention has the following advantages:

[0047] This invention obtains the pixel region of the last loaded initial product data from each of the view containers contained in the mini-program, and calculates the pixel difference between multiple pixel regions based on the initial pixel position in the pixel region. Simultaneously, if the mini-program receives an input loading command, it retrieves multiple updated product data from a preset product database, further compares the pixel difference with a preset pixel threshold, updates the preset loading starting container based on the comparison result, and loads each updated product data into each view container according to the updated loading starting container. Once all updated product data has been loaded, all view containers are rendered to generate the target display page and display it. At the same time, the initial product data is updated to the updated product data, and the pixel region of the last loaded initial product data is obtained again to calculate the pixel difference. This achieves a waterfall-style product flow layout based on pixel differences. By updating the loading starting container through pixel differences, the display specifications of product data in each view container are balanced, preventing large-scale blank displays in the mini-program and further improving the flexibility and smoothness of the mini-program display. Attached Figure Description

[0048] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0049] Figure 1 This is a flowchart of the steps of a waterfall-style loading method for product display provided in Embodiment 1 of the present invention;

[0050] Figure 2 This is a flowchart illustrating the steps of a waterfall-style loading method for product display provided in Embodiment 2 of the present invention.

[0051] Figure 3a This is a schematic diagram illustrating an example of the product data loading process provided by the present invention;

[0052] Figure 3b A schematic diagram illustrating a process for updating product data loading, as another example of the present invention;

[0053] Figure 4 This is a structural block diagram of a waterfall-style loading device for product display provided in Embodiment 3 of the present invention. Detailed Implementation

[0054] This invention provides a waterfall-style loading method, apparatus, device, and medium for product display, which addresses the technical problem that existing waterfall-style product display solutions for mini-programs are difficult to be compatible with displaying product images of different sizes, resulting in large-scale blank spaces in the product display and affecting the flexibility and smoothness of the product display.

[0055] Waterfall layout, also known as waterfall flow, is a website page layout that visually presents a multi-column layout with irregular spacing. As the page scrolls down, this layout continuously loads data blocks and appends them to the current end.

[0056] To make the objectives, features, and advantages of this invention more apparent and understandable, the technical solutions of the embodiments of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the embodiments described below are only some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0057] Please see Figure 1 , Figure 1The flowchart illustrates the steps of a waterfall-style loading method for product display provided in Embodiment 1 of the present invention.

[0058] This invention provides a waterfall-style loading method for product display, applied to mini-programs within mobile terminals. The mini-program includes at least two view containers, and the method includes:

[0059] Step 101: Obtain the pixel region where the last loaded initial product data is located from each view container.

[0060] Mini programs refer to applications that can be used without downloading or installing them. They are sub-programs within an app and can be developed to provide the required functions within the framework of the main app, such as WeChat mini programs.

[0061] A view container refers to a view, which is equivalent to a div layer in HTML. In other words, it's a separate, distinct part of a page on a mobile device. Its types can include, but are not limited to, scrollable view containers, slider view containers, and draggable, movable view containers.

[0062] Initial product data refers to the product data loaded by the product database in response to the homepage opening command sent by the mini program after the user opens the mini program. This may include, but is not limited to, product data such as images, videos, and text descriptions.

[0063] A pixel region refers to the set of pixels occupied by the initial product data within the view container.

[0064] In this embodiment of the invention, the view container is mainly a vertically scrollable view container. During the user's use of the mini program, the last loaded initial product data is selected from each view container, and its corresponding pixel area is obtained as the data basis for subsequent waterfall loading.

[0065] The initial product data loaded last refers to the initial product data that is located at the edge or bottom of the visible area of ​​the mini program, or the initial product data that is located at the edge or bottom of the view container but not within the visible area of ​​the mini program.

[0066] Step 102: Calculate the pixel difference between multiple pixel regions.

[0067] After obtaining each pixel region, we can further group the pixel regions into pairs and calculate the pixel differences between multiple pixel regions based on their initial pixel positions.

[0068] Step 103: When a loading instruction is received, retrieve multiple updated product data from a preset product database.

[0069] Loading instructions refer to the instructions generated by a mobile terminal in response to user input, such as clicking or swiping on the mobile terminal's screen to request further data on the product.

[0070] Meanwhile, if the mini-program receives a loading command from the user, it can send a request to the preset product database through the product data center interface carried by the mini-program to obtain multiple updated product data, such as product images, product prices, and product promotional information.

[0071] Step 104: Update the preset loading start container based on the comparison result between the pixel difference and the preset pixel threshold, and load the updated product data to each view container based on the updated loading start container.

[0072] The loading start container refers to the first view container that loads initial product data or updates product data.

[0073] After obtaining the pixel difference, the pixel difference can be further compared with the preset pixel value. Based on the comparison result, the loading starting point container at the current moment is updated. Starting from the updated loading starting point container, the updated product data is loaded into each view container one by one.

[0074] It should be noted that when there are only two view containers in the mini program, the product data can be updated by cross-loading the two view containers, starting from the updated loading starting container.

[0075] Step 105: After the updated product data is loaded, render all view containers and generate the target display page for presentation.

[0076] Once all the updated product data has been loaded, the target display page can be generated by rendering all view containers and displayed in the mini-program for user interaction.

[0077] Step 106: Update the initial product data to updated product data, and then proceed to the step of obtaining the pixel area where the last loaded initial product data is located from each view container.

[0078] After generating the target display page, in order to further update the loaded updated product data, the initial product data can be updated to the updated product data, and the process jumps to step 101 to calculate the pixel difference between the pixel areas where the last loaded initial product data is located at the current moment, until the mini program receives the loading instruction and retrieves the new updated product data from the product database again.

[0079] In this embodiment of the invention, the mini-program obtains the pixel region where the last loaded initial product data is located from each of its contained view containers, and calculates the pixel difference between multiple pixel regions based on the initial pixel position in the pixel region. Simultaneously, if the mini-program receives an input loading command, it obtains multiple updated product data from a preset product database, further compares the pixel difference with a preset pixel threshold, updates the preset loading starting point container based on the comparison result, and loads each updated product data into each view container according to the updated loading starting point container. After all updated product data has been loaded, all view containers are rendered to generate the target display page and display it. At the same time, the initial product data is updated to updated product data, and the pixel region where the last loaded initial product data is located is obtained again to calculate the pixel difference, thereby realizing a waterfall-style product flow layout based on pixel differences. The method of updating the loading starting point container by pixel differences balances the display specifications of product data in each view container, preventing large-scale blank displays in the mini-program and further improving the flexibility and smoothness of the mini-program display.

[0080] Please see Figure 2 , Figure 2 This is a flowchart illustrating the steps of a waterfall-style loading method for product display provided in Embodiment 2 of the present invention.

[0081] This invention provides a waterfall-style loading method for product display, applied to mini-programs within mobile terminals. The mini-program includes at least two view containers, and the method includes:

[0082] Step 201: Obtain the pixel region where the last loaded initial product data is located from each view container.

[0083] In this embodiment of the invention, the specific implementation process of step 201 is similar to that of step 101, and will not be repeated here.

[0084] In another example of the invention, before performing step 201, the method further includes the following steps S11-S13:

[0085] S11. When a homepage opening command is received, retrieve multiple initial product data from a preset product database;

[0086] When a user opens the mini-program for the first time, the system responds to the user's click on the mini-program, generates a homepage opening command, and sends a request to the preset product database through the mini-program's built-in product data center interface to obtain multiple initial product data from the preset product database.

[0087] It is worth mentioning that for multiple initial product data obtained from the product database, product recommendation information can be selected and pushed based on big data statistics, or the historical preference information associated with the terminal identifier corresponding to the mobile terminal can be retrieved from the product database based on this terminal identifier, and then the data can be obtained accordingly.

[0088] S12. Load the initial product data into each view container based on the preset loading starting point container;

[0089] S13. Render all view containers and generate the initial display page for presentation.

[0090] Before acquiring multiple initial product data, one of the view containers can be selected as the loading start container. Starting from this loading start container, each initial product data is loaded into each view container in turn. When the last view container has loaded initial product data but there is still some initial product data remaining, the loading start container is returned to continue loading the remaining initial product data until all initial product data has been loaded. Finally, all view containers are rendered to generate the initial display page displayed in the mini program.

[0091] It should be noted that the process of rendering a view container can be as follows:

[0092] 1. In the rendering layer, the mini-program converts the view container into a JS object through multiple WebView threads. JavaScript (JS for short) is a lightweight, interpreted or just-in-time (JIT) programming language with a function-first approach.

[0093] 2. Convert the JS object back into a real DOM document node tree and let the rendering layer thread render it;

[0094] 3. When data changes, the logic layer provides the latest changed data, generates a new JS object, and compares it with the previous JS object;

[0095] 4. Map the latest changes to the real DOM tree and update the current UI style of the mini-program.

[0096] Step 202: Calculate the pixel difference between multiple pixel regions.

[0097] Optionally, the mini-program also includes a visible area, and step 202 may include the following sub-steps:

[0098] Extract the initial pixel position corresponding to each pixel region;

[0099] Select the initial pixel position that is farthest from the bottom of the visible area from multiple initial pixel positions as the first target pixel position;

[0100] Select the initial pixel position closest to the bottom of the visible area from multiple initial pixel positions as the second target pixel position;

[0101] The difference between the first target pixel position and the second target pixel position is calculated as the pixel difference between multiple pixel regions.

[0102] The initial pixel position refers to the pixel coordinates of the pixel region within the visible area of ​​the mini-program, where the distance between the pixel coordinates and the bottom edge of the visible area is minimized. An image coordinate system uv is established with the top left corner of the visible area as the origin, using pixels as the unit. The horizontal coordinate u and vertical coordinate v of the pixel are the column number and row number in the image array that constitutes the pixel region, respectively.

[0103] In one example of this invention, the initial pixel positions can be extracted from the pixel regions where each initial product data is located. To determine whether the loading starting point container needs to be updated, the multiple initial pixel positions can be filtered first, and the pixel differences between the multiple pixel regions can be calculated as the data basis for subsequent judgments.

[0104] Specifically, the initial pixel position furthest from the bottom of the visible area can be selected as the first target pixel position, and the initial pixel position closest to the bottom of the visible area can be selected as the second target pixel position. The difference between the first and second target pixel positions is then calculated, and this difference is defined as the pixel difference between multiple pixel regions.

[0105] It should be noted that the initial product data can be loaded in the form of a data frame with a regular shape, in which case the initial pixel position is any pixel coordinate corresponding to the bottom edge of the data frame; or it can be loaded in the form of a data frame with an irregular shape, in which case the initial pixel position can be the smallest pixel coordinate of the irregular shape, such as a star, heart, or hexagon. The specific data frame form loaded in this embodiment of the invention is not limited.

[0106] Step 203: When a loading instruction is received, retrieve multiple updated product data from a preset product database.

[0107] In this embodiment of the invention, the mini-program also monitors user operations on the mobile terminal in real time. If the mobile terminal receives a user operation, such as clicking the next page or swiping, it generates a loading command and transmits it to the mini-program. The mini-program then responds to the loading command by retrieving multiple updated product data from a preset product database.

[0108] Step 204: Compare the pixel difference with the preset pixel threshold.

[0109] It should be noted that the preset pixel threshold can be set to 700 pixels, 1000 pixels, etc., and can be set according to different mini-program types. This embodiment of the invention does not limit this.

[0110] Step 205: If the pixel difference is greater than or equal to the pixel threshold, then update the preset loading starting point container to the view container where the first target pixel is located.

[0111] In one example of this invention, if the pixel difference is greater than or equal to the pixel threshold, it indicates that the initial product data specifications in the two view containers corresponding to the pixel difference are too different, which may easily result in a blank view container. Therefore, the preset loading starting point container can be updated to the view container where the smallest pixel area is located, to await the loading of subsequent updated product data.

[0112] Step 206: If the pixel difference is less than the pixel threshold, then the current loading starting point container is determined as the updated loading starting point container.

[0113] In another example of the present invention, if the pixel difference is less than the pixel threshold, it indicates that the initial product data specifications within the view container are still within an acceptable range, and the current loading starting point container can be maintained and used as the updated loading starting point container. Here, the current loading starting point container refers to the view container that last loaded the first updated or initial product data.

[0114] In the actual implementation, users update product data by continuously scrolling down. Each time product data is updated, the product data is loaded one by one from the loading starting container to each view container. If all view containers have loaded the product data for the first time but the product data has not been fully loaded, the loading returns to the loading starting container for a second round of loading.

[0115] For example, a mini-program might have view containers A, B, and C with identical specifications, with view container B as the default loading starting container. Each time a user triggers a loading command, the mini-program retrieves the pixel region where the initial product data was last loaded for each view container. Based on the distance between the initial pixel position of each pixel region and the bottom of the visible area, it selects the farthest first target pixel position (the initial pixel position in view container A) and the closest second target pixel position (the initial pixel position in view container B). It then calculates the pixel difference between the first and second target pixel positions, thus obtaining the pixel difference between view containers A, B, and C. If the pixel difference is greater than or equal to a pixel threshold (e.g., 700 pixels), the loading starting container can be reset to the view container where the first target pixel position is located, i.e., reset to view container A. If the pixel difference is less than the pixel threshold, the current loading starting container, i.e., view container B, can be maintained.

[0116] Step 207: Starting from the updated loading starting point container, load and update the product data to each view container sequentially.

[0117] After updating the loading start container, starting from the updated loading start container, the updated product data is loaded into each view container in sequence to maintain the display balance between the view containers.

[0118] Please see Figures 3a-3b The diagram illustrates a process for updating product data loading according to an embodiment of the present invention.

[0119] In this embodiment, the current loading starting point container is leftList. When the mini program receives the updated product data returned by the product database response loading instruction, as shown in Figure 3 (8, 9, 10, 11, etc.), the pixel difference between the initial product data 6 and the initial product data 7 can be further calculated.

[0120] like Figure 3a As shown, if the value is greater than or equal to the preset pixel threshold, such as 700 pixels, the loading starting point container can be updated to the view container rightList, and the loading of product data 8, 9, 10, and 11 can be performed in the order of updating the product data.

[0121] like Figure 3b As shown, if the value is less than the pixel threshold, the current loading starting point container leftList is maintained, and the loading of product data 8, 9, 10, and 11 is performed in the order of updating the product data.

[0122] Step 208: After the updated product data is loaded, render all view containers and generate the target display page for presentation.

[0123] In this embodiment of the invention, the specific implementation process of step 208 is similar to that of step 105, and will not be repeated here.

[0124] Step 209: Update the initial product data to updated product data, and then proceed to the step of obtaining the pixel area where the last loaded initial product data is located from each view container.

[0125] After generating the target display page, in order to further update the loaded updated product data, the initial product data can be updated to the updated product data, and the process jumps to step 201 to calculate the pixel difference between the pixel areas where the last loaded initial product data is located at the current moment, until the mini program receives the loading instruction and retrieves the new updated product data from the product database again.

[0126] It should be noted that if the mini-program receives a close command, that is, the mobile terminal responds to the user's preset close button on the display screen, the mini-program closes and the loop between steps 201-209 stops. Alternatively, if the mini-program does not receive a load command, to conserve mini-program resources, after calculating the pixel differences across multiple pixel areas, the acquisition of product data is stopped.

[0127] Optionally, the mini-program also includes a waterfall layout container, and the method further includes the following steps S21-S24:

[0128] S21. Monitor the scroll bar position in real time within the mini-program using the waterfall flow container;

[0129] S22. When the scroll bar position is at the preset update threshold position, send a scroll update instruction to the product database;

[0130] S23. Receive the scrolling product data returned by the product database in response to the scrolling update instruction through the waterfall container, and determine the scrolling product data as the new updated product data;

[0131] S24. Jump to execute the steps of updating the preset loading start container based on the comparison result of pixel difference and preset pixel threshold, and loading the updated product data to each view container based on the updated loading start container.

[0132] The scroll bar position refers to the smallest pixel coordinate of the set of pixels that make up the scroll bar within the visible area of ​​the mini program.

[0133] The update threshold position refers to the maximum pixel coordinates of the set of pixels occupied by the waterfall container within the visible area of ​​the mini-program.

[0134] Taking WeChat Mini Programs as an example, the existing solution is to further load the product flow through the bottom-reaching method of the Mini Program, such as the onReachBottom event. However, due to the triggering cycle limit of the onReachBottom event, it cannot be triggered frequently within 350ms. When users quickly swipe the page, due to the limitation of the bottom-reaching loading method of the Mini Program, it cannot frequently respond to user operations, making it difficult to ensure the smoothness of the Mini Program and meet the user's need for continuous browsing of products.

[0135] To address this, this invention proposes a method of wrapping a product flow within a certain range with a waterfall-style container. By comparing the pixel area of ​​the mini-program's scrollbar with the update threshold position, the product data is pre-updated to meet user needs. For example, the built-in WeChat mini-program API, `query.select('container name').boundingClientRect()`, can be used to obtain the pixel height from the scrollbar position to the bottom of the waterfall-style container.

[0136] Specifically, the scroll bar position within the mini-program can be monitored in real time through the waterfall flow container. When the scroll bar position is at the update threshold position, a scroll update command can be sent from the mini-program to the product database. After receiving the scroll update command, the product database responds by returning scrolling product data to the waterfall flow container. At this point, the scrolling product data can be identified as the new updated product data. Step 104 or steps 204-207 can be repeated to complete the update of the scrolling product data.

[0137] Furthermore, the method also includes the following steps S31-S33:

[0138] S31. Obtain the pixel dimensions of updated product data in real time;

[0139] S32. If the pixel size is larger than the size of the visible area, then load and update the pixels corresponding to the product data to the view container row by row.

[0140] Pixel size refers to the set of pixels occupied by the updated product data within the visible area of ​​the mini-program.

[0141] In this embodiment of the invention, when loading updated product data, the pixel size of the updated product data can be obtained in real time. If it is larger than the size of the visible area, it indicates that the pixel size of the updated product data is too large to be displayed within a visible area. In this case, the pixels of the updated product data are loaded into the view container line by line to avoid large blank areas appearing before the image is fully loaded.

[0142] Taking updating product data as an image type as an example, after obtaining multiple updated product data from the product database, the pixel size of each updated product data is detected in real time. If the pixel size is determined to be larger than the size of the visible area, it means that the visible area cannot completely display the entire updated product data, that is, the whole image. At this time, the page can respond to the scrolling operation and load the part of the image that enters the visible area pixel by pixel, while the part of the image that does not enter the visible area waits for further scrolling operations.

[0143] It should be noted that when multiple updated product data have a high resolution, such as 1280×1024, but the mobile terminal's network environment is insufficient to load all the updated product data at the same time, you can first replace the background image path of the img element or other elements with the path of an image with a size of 1*1px. Only when the image appears in the visible area of ​​the mini program should the actual path of the image be set to allow the image to be displayed, thereby enabling product data updates even in poor network conditions.

[0144] S33. If the pixel size is less than or equal to the size of the visible area, then all pixels corresponding to the updated product data will be loaded into the view container.

[0145] In another example of the present invention, if the pixel size is less than or equal to the size of the visible area, it indicates that the updated product data can be displayed within the visible area. In this case, all pixels of the updated product data are loaded into the view container to enhance the user experience.

[0146] In this embodiment of the invention, the mini-program obtains the pixel region where the last loaded initial product data is located from each of its contained view containers, and calculates the pixel difference between multiple pixel regions based on the initial pixel position in the pixel region. At the same time, if the mini-program receives an input loading command, it obtains multiple updated product data from a preset product database, further compares the pixel difference with a preset pixel threshold, updates the preset loading starting point container based on the comparison result, and loads each updated product data into each view container according to the updated loading starting point container. When all updated product data has been loaded, all view containers are rendered to generate the target display page and display it. At the same time, the initial product data is updated to updated product data, and the pixel region where the last loaded initial product data is located is obtained again to calculate the pixel difference, thereby realizing a waterfall-style product flow layout based on pixel difference. By updating the loading starting point container through pixel difference, the display specifications of product data in each view container are balanced, preventing the mini-program from displaying large-scale blank spaces, and further improving the flexibility and smoothness of the mini-program display.

[0147] Please see Figure 4 , Figure 4This is a structural block diagram of a waterfall-style loading device for product display provided in Embodiment 3 of the present invention.

[0148] This invention provides a waterfall-style loading device for product display, applied to a mini-program within a mobile terminal. The mini-program includes at least two view containers, and the device includes:

[0149] The pixel region acquisition module 401 is used to obtain the pixel region where the last loaded initial product data is located from each view container;

[0150] The pixel difference calculation module 402 is used to calculate the pixel difference between multiple pixel regions;

[0151] The product data acquisition module 403 is used to acquire multiple updated product data from a preset product database when a loading instruction is received.

[0152] The data loading module 404 is used to update the preset loading start container based on the comparison result between the pixel difference and the preset pixel threshold, and to load the updated product data to each view container based on the updated loading start container.

[0153] The page rendering and display module 405 is used to render all view containers and generate the target display page for display after the updated product data has been loaded.

[0154] The loop update module 406 is used to update the initial product data to the updated product data and jump to the step of obtaining the pixel area where the last loaded initial product data is located from each view container.

[0155] Optionally, the mini-program also includes a visible area, and the pixel difference calculation module 402 is specifically used for:

[0156] Extract the initial pixel position corresponding to each pixel region;

[0157] Select the initial pixel position that is farthest from the bottom of the visible area from multiple initial pixel positions as the first target pixel position;

[0158] Select the initial pixel position closest to the bottom of the visible area from multiple initial pixel positions as the second target pixel position;

[0159] The difference between the first target pixel position and the second target pixel position is calculated as the pixel difference between multiple pixel regions.

[0160] Optionally, the data loading module 404 is specifically used for:

[0161] Compare the pixel difference with the preset pixel threshold;

[0162] If the pixel difference is greater than or equal to the pixel threshold, the preset loading starting point container will be updated to the view container where the first target pixel is located.

[0163] Starting from the updated loading starting container, the updated product data is loaded and updated sequentially into each view container.

[0164] Optionally, the data loading module 404 is further used for:

[0165] If the pixel difference is less than the pixel threshold, then the current loading starting point container is determined as the updated loading starting point container.

[0166] Optionally, the device further includes:

[0167] The initial product data acquisition module is used to retrieve multiple initial product data from a preset product database when a homepage opening command is received;

[0168] The initial product data loading module is used to load initial product data into various view containers based on a preset loading start container;

[0169] The initial display page rendering module is used to render all view containers and generate the initial display page for presentation.

[0170] Optionally, the mini-program also includes a waterfall layout container, and the device also includes:

[0171] The scroll bar position monitoring module is used to monitor the scroll bar position in real time within the mini program through the waterfall flow container;

[0172] The scroll update instruction sending module is used to send a scroll update instruction to the product database when the scroll bar position is at a preset update threshold position;

[0173] The updated product data determination module is used to receive the scrolling product data returned by the product database in response to the scrolling update command through the waterfall container, and determine the scrolling product data as the new updated product data;

[0174] The loop module is used to jump to execute the steps of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data to each view container based on the updated loading start container.

[0175] Optionally, the device further includes:

[0176] The real-time pixel size acquisition module is used to acquire the pixel size of the updated product data in real time.

[0177] The first size determination module is used to load and update the pixels corresponding to the product data to the view container row by row if the pixel size is larger than the size of the visible area.

[0178] The second size determination module is used to load all pixels corresponding to the updated product data into the view container if the pixel size is less than or equal to the size of the visible area.

[0179] This invention provides an electronic device, including a memory and a processor. The memory stores a computer program, and when the computer program is executed by the processor, the processor performs the steps of the waterfall loading method for product display as described in any embodiment of this invention.

[0180] This invention provides a computer-readable storage medium storing a computer program thereon, which, when executed, implements a waterfall-style loading method for product display as described in any embodiment of this invention.

[0181] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the above-described device and module can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0182] In the several embodiments provided by this invention, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

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

[0184] Furthermore, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0185] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0186] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A waterfall-style loading method for product display, characterized in that, A method for using a mini-program on a mobile terminal, the mini-program comprising at least two view containers, the method comprising: Obtain the pixel region where the last loaded initial product data is located from each of the view containers; the initial product data includes images, videos, and text descriptions; Calculate the pixel difference between the plurality of pixel regions; When a loading command is received, multiple updated product data are retrieved from the preset product database; The preset loading start container is updated based on the comparison result between the pixel difference and the preset pixel threshold, and the updated product data is loaded into each of the view containers based on the updated loading start container. Once the updated product data has been loaded, all view containers are rendered, and the target display page is generated for display. Update the initial product data to the updated product data, and then proceed to the step of obtaining the pixel area where the last loaded initial product data is located from each of the view containers; The mini-program also includes a visible area, and the step of calculating the pixel difference between multiple pixel areas includes: Extract the initial pixel position corresponding to each pixel region; Select the initial pixel position that is farthest from the bottom of the visible area from the plurality of initial pixel positions as the first target pixel position; Select the initial pixel position closest to the bottom of the visible area from the plurality of initial pixel positions as the second target pixel position; The difference between the first target pixel position and the second target pixel position is calculated as the pixel difference between the plurality of pixel regions; The step of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container, includes: Compare the pixel difference with a preset pixel threshold; If the pixel difference is greater than or equal to the pixel threshold, the preset loading starting point container is updated to the view container where the first target pixel is located; The updated product data is loaded sequentially into each of the view containers, starting from the updated loading starting container. The step of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container, further includes: If the pixel difference is less than the pixel threshold, then the current loading starting point container is determined as the updated loading starting point container.

2. The method according to claim 1, characterized in that, Prior to the step of obtaining the pixel region where the last loaded initial product data is located from each of the view containers, the method further includes: When a homepage opening command is received, multiple initial product data are retrieved from a pre-set product database; The initial product data is loaded into each of the view containers based on the preset loading starting point container; Render all the view containers to generate the initial display page for presentation.

3. The method according to any one of claims 1-2, characterized in that, The mini-program also includes a waterfall layout container, and the method further includes: The waterfall flow container monitors the scroll bar position corresponding to the scroll bar within the mini-program in real time. When the scroll bar position is at a preset update threshold position, a scroll update command is sent to the product database; The waterfall container receives the scrolling product data returned by the product database in response to the scrolling update instruction, and identifies the scrolling product data as the new updated product data. Jump to execute the steps of updating the preset loading start container based on the comparison result of the pixel difference and the preset pixel threshold, and loading the updated product data into each of the view containers based on the updated loading start container.

4. The method according to claim 1, characterized in that, The method further includes: Real-time acquisition of the pixel dimensions of the updated product data; If the pixel size is larger than the size of the visible area, then the pixels corresponding to the updated product data are loaded into the view container row by row; If the pixel size is less than or equal to the size of the visible area, then all pixels corresponding to the updated product data are loaded into the view container.

5. A waterfall-style loading device for product display, characterized in that, A mini-program applied within a mobile terminal, the mini-program comprising at least two view containers, the device comprising: The pixel region acquisition module is used to acquire the pixel region where the last loaded initial product data is located from each of the view containers; the initial product data includes images, videos and text descriptions; A pixel difference calculation module is used to calculate the pixel difference between multiple pixel regions; The product data acquisition module is used to retrieve multiple updated product data from a preset product database when a loading command is received. The data loading module is used to update the preset loading start container based on the comparison result between the pixel difference and the preset pixel threshold, and to load the updated product data into each of the view containers based on the updated loading start container. The page rendering and display module is used to render all the view containers and generate the target display page for display after the updated product data is loaded. The loop update module is used to update the initial product data to the updated product data, and then jump to the step of obtaining the pixel area where the last loaded initial product data is located from each of the view containers; The mini-program also includes a visible area, and the pixel difference calculation module is specifically used for: Extract the initial pixel position corresponding to each pixel region; Select the initial pixel position that is farthest from the bottom of the visible area from the plurality of initial pixel positions as the first target pixel position; Select the initial pixel position closest to the bottom of the visible area from the plurality of initial pixel positions as the second target pixel position; The difference between the first target pixel position and the second target pixel position is calculated as the pixel difference between the plurality of pixel regions; The data loading module is specifically used for: Compare the pixel difference with a preset pixel threshold; If the pixel difference is greater than or equal to the pixel threshold, the preset loading starting point container is updated to the view container where the first target pixel is located; The updated product data is loaded sequentially into each of the view containers, starting from the updated loading starting container. The data loading module is also specifically used for: If the pixel difference is less than the pixel threshold, then the current loading starting point container is determined as the updated loading starting point container.

6. An electronic device, characterized in that, The device includes a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor causes the processor to perform the steps of the waterfall loading method for product display as described in any one of claims 1-4.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed, it implements the waterfall loading method for product display as described in any one of claims 1-4.

Images