A method for rendering extremely long lists based on embedded platforms

Abstract

The present invention discloses a method for rendering an extremely long list based on an embedded platform, which relates to the technical field of graphical user interface rendering. The method comprises the following steps: setting the overall size and visible area size of a list control, initializing the number of pre-loaded items, calculating the start index and end index based on the scrolling position and the height of the list item, dynamically creating virtual list items by executing JavaScript code using a Duktape engine, replacing real content and maintaining structural stability using placeholder elements, binding scrolling events, updating the virtual list in real time, reusing loaded items, predicting user trends based on historical scrolling behavior, loading list items in advance, and achieving high-performance rendering. The method fills a gap in the existing technology and ensures a smooth user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of graphical user interface rendering, in particular to an ultra-long list rendering method based on an embedded platform. Background Art

[0002] In embedded systems, graphical user interface rendering technology is crucial, especially for list controls that need to process large amounts of data. The traditional method of loading all list items at once leads to performance bottlenecks due to resource limitations. To solve this problem, paged loading, partial loading, and virtualization technologies have been introduced. Paged loading affects the continuous browsing experience, and partial loading is complex to implement. The success of virtualization technology on desktop and mobile platforms is difficult to directly transplant to resource-constrained embedded devices. Existing virtualization solutions are insufficiently optimized for embedded systems, and efficiency and experience still need to be improved. This highlights the urgent need to develop efficient, low-resource consumption list rendering technology specifically for embedded platforms. Summary of the Invention

[0003] In view of the above existing problems, the present invention is proposed.

[0004] Therefore, the present invention provides an ultra-long list rendering method based on an embedded platform, which solves the problems of high resource consumption and poor user experience when rendering long lists in embedded platforms.

[0005] In order to solve the above technical problems, the present invention provides the following technical solutions:

[0006] In a first aspect, an embodiment of the present invention provides a method for rendering an extremely long list based on an embedded platform, which includes setting the overall size and visible area size of a list control, and initializing variables for the number of pre-loaded items and the visible area size;

[0007] Calculate the index positions of the top and bottom list items in the visible area based on the current scroll position, the height of each list item, and the height of the visible area;

[0008] Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, update the list item array, dynamically create virtual list items, and replace the real list item content;

[0009] Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area;

[0010] Initialize the placeholder element, calculate the virtual list elements on the first screen, and bind the scroll event to JavaScript to update the scrolling virtual list elements in real time;

[0011] By listening to scroll events, the loaded list items are reused and the list items in the visible area are dynamically updated;

[0012] Based on historical scrolling behavior and current scrolling speed, the user's scrolling direction and speed are predicted, and an intelligent prediction algorithm is used to load the list items in the next visible area in advance.

[0013] As a preferred solution of the method for rendering an extremely long list based on an embedded platform described in the present invention, the overall size and visible area size of the list control are set, and the variables for the number of pre-loaded items and the visible area size are initialized. The specific operations are as follows:

[0014] Create a virtual list control on LVGL, get the screen size, and set the width W and height H of the virtual list control;

[0015] Set the height VH and width VW of the visible area according to the screen resolution and user experience;

[0016] During the initialization phase, the number of preloaded items is set to P. The preprocessor directive is used to fix the number of preloaded items. Based on the set visible area size, the padding is controlled by adjusting the style of the control, thereby indirectly setting the visible area size.

[0017] As a preferred solution of the method for rendering an extremely long list based on an embedded platform described in the present invention, the index positions of the top and bottom list items in the visible area are calculated based on the current scroll position, the height of each list item, and the height of the visible area. The specific operations are as follows:

[0018] Calculate the start and end indexes of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area;

[0019] Based on the start index and end index positions of the visible area, the preload start index and preload end index are calculated.

[0020] As a preferred solution of the embedded platform-based super-long list rendering method described in the present invention, the Duktape engine is used to run JavaScript, calculate the visible area, load list items, and update the list item array, dynamically create virtual list items, and replace the real list item content. The specific operations are as follows:

[0021] In JavaScript, find the list item with an index between the start index and the end index to determine the current visible area;

[0022] Load data for list items whose indexes are between the preload start index and the preload end index;

[0023] In the D uktape engine, JavaScript is used to update the list item array. For the list items that already exist in the array, their contents are updated. For the newly added list items, HTML elements are dynamically created using DOM operations. After the list items are created, the contents of the list items are replaced with the real list items.

[0024] As a preferred solution of the embedded platform-based super-long list rendering method of the present invention, wherein: using placeholder elements to maintain the list structure and moving the current virtual list element to the real visible area, the specific operations are as follows:

[0025] Based on the current scroll position, the start and end indexes of the virtual list are calculated to determine the visible area of ​​the virtual list. Placeholder elements are used to map each item in the virtual list. When the user scrolls the list, the position of the placeholder elements is updated in real time.

[0026] According to the latest start index and end index, load the data of the corresponding list item, update the corresponding DOM element for the list item data changes between the start index and the end index, map the updated virtual list item to the real list item, and replace the original content

[0027] As a preferred solution of the embedded platform-based super-long list rendering method of the present invention, the following steps are performed: initializing a placeholder element, calculating the virtual list element on the first screen, binding the scroll event to JavaScript, and updating the scrolling virtual list element in real time:

[0028] After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items;

[0029] Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function to calculate the new start index and end index and update the list item data;

[0030] Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

[0031] As a preferred solution of the method for rendering an extremely long list based on an embedded platform described in the present invention, wherein: by monitoring scroll events, reusing loaded list items, and dynamically updating list items in the visible area, the specific operations are as follows:

[0032] Based on the current scroll position, calculate the new start index and end index, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and has been recycled into the pool;

[0033] For list items that are now between the start index and the end index and were not in the visible area before, they are taken from the pool and their content and position are updated. For list items that are now out of the range of the start index and the end index, they are marked as invisible and recycled into the list item pool. The user interface is updated synchronously using the request animation frame function.

[0034] As a preferred solution of the method for rendering an extremely long list based on an embedded platform described in the present invention, the user's scrolling direction and speed are predicted based on historical scrolling behavior and current scrolling speed, and an intelligent prediction algorithm is used to preload the list items in the next visible area. The specific operations are as follows:

[0035] When the user scrolls the virtual list, the scrolling direction, scrolling speed and duration data are collected and recorded, and time series analysis is used to identify the user's scrolling direction and speed distribution;

[0036] Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction;

[0037] When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scroll speed and direction;

[0038] Once the next visible area is predicted, the data for that area is asynchronously loaded from the server, caching the most recent and most frequently accessed data segments.

[0039] In a second aspect, an embodiment of the present invention provides a computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: when the computer program is executed by the processor, any step of the method for rendering an extremely long list based on an embedded platform as described in the first aspect of the present invention is implemented.

[0040] In a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein: when the computer program is executed by a processor, any step of the method for rendering an extremely long list based on an embedded platform as described in the first aspect of the present invention is implemented.

[0041] The beneficial effects of the present invention are as follows: by using the Duktap engine to run JavaScript on LVGL, efficient rendering and management of list controls are achieved, and only list items in the current visible area are rendered, thereby significantly reducing memory usage; in addition, the visible area is dynamically calculated and updated to ensure smooth and uninterrupted scrolling of the list. At the same time, the flexibility of JavaScript and the efficiency of the Duktap engine are utilized to simplify the implementation difficulty of long list rendering, and a variety of tunable parameters are provided to allow developers to balance memory usage and rendering efficiency according to specific needs. It is especially optimized for embedded systems to ensure high-performance operation in resource-constrained environments, effectively filling the gap in the existing technology for rendering ultra-long lists on embedded platforms. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0043] Figure 1 This is a flowchart of the method for rendering an extremely long list based on an embedded platform in Example 1.

[0044] Figure 2 This is a process diagram for updating the virtual list position during scrolling in Example 1. DETAILED DESCRIPTION

[0045] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0046] In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention may also be implemented in other ways different from those described herein. Those skilled in the art may make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0047] Secondly, the term "one embodiment" or "embodiment" herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The phrase "in one embodiment" appearing in various places throughout this specification does not necessarily refer to the same embodiment, nor does it refer to a separate or selective embodiment that is mutually exclusive of other embodiments.

[0048] Example 1, reference Figure 1 and Figure 2, which is the first embodiment of the present invention, provides a method for rendering an extremely long list based on an embedded platform, comprising the following steps:

[0049] S1. Set the overall size and visible area size of the list control, and initialize the variables for the number of preloaded items and the visible area size.

[0050] S1.1. Create a virtual list control on LVGL, obtain the screen size, and set the width W and height H of the virtual list control;

[0051] Set the height VH and width VW of the visible area according to the screen resolution and user experience;

[0052] During the initialization phase, the number of preloaded items is set to P. The preprocessor directive is used to fix the number of preloaded items. Based on the set visible area size, the padding is controlled by adjusting the control style, thereby indirectly setting the visible area size.

[0053] Specifically, the number of preloaded items is set and calculated based on the screen resolution and list item height; for example, if the screen resolution is 1080p and the average list item height is 50px, then the preloaded items can be set to the screen height divided by the list item height, rounded up, to ensure that at least all items visible on the current screen are loaded.

[0054] S2. Calculate the index positions of the top and bottom list items in the visible area based on the current scroll position, the height of each list item, and the height of the visible area.

[0055] S2.1. Calculate the start and end indexes of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area.

[0056] Calculate the preload start index and preload end index based on the start index and end index positions of the visible area;

[0057] Specifically, calculate the height of the visible area, WH, which includes the upper and lower buffers. To improve scrolling smoothness, WH should be greater than or equal to the actual visible height of the list items. For example, if the height of each list item is 1, and you want the list to display at least N items at a time, then WH should be at least N*I.

[0058] Next, in the scroll event handler, the start index SI and end index EI of the visible area are calculated based on the current scroll position S and the list item height I. The expressions are:

[0059]

[0060] SI represents the starting index of the visible area, starting from the top of the list and scrolling down S pixels to reach the index of the first list item;

[0061]

[0062] EI represents the end index of the visible area, starting from the top of the list and scrolling down S+VH pixels to the index of the first list item;

[0063] Furthermore, considering the impact of preloaded items, the start index PSI and end index PEI of the preloaded list item are calculated based on the start index SI and end index EI, as well as the number of preloaded items P. The expression is:

[0064] PSI = SI - P;

[0065] PEI=EI+P;

[0066] Where P is the number of preloaded items, which is usually a small positive integer (such as 1 or 2) to ensure that there is no noticeable delay when the list is scrolled. In addition, it is also necessary to ensure that PSI and PEI do not exceed the total number of list items. If PSI is less than zero, it should be set to zero; if PEI is greater than the total number of list items, it should be set to the total number of list items.

[0067] S3. Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, and update the list item array. Dynamically create virtual list items and replace the real list item content.

[0068] S3.1. In JavaScript, find the list item whose index is between the start index and the end index to determine the current visible area.

[0069] Load data for list items whose indexes are between the preload start index and the preload end index;

[0070] In the Duktape engine, JavaScript is used to update the list item array. For list items that already exist in the array, their contents are updated. For newly added list items, DOM operations are used to dynamically create HTML elements. After the list item is created, the content of the list item is replaced with the actual list item.

[0071] Specifically, in JavaScript, use document.createElement('div') to create a new div element, and then use the appendChild() or insertBefore() method to add it to the appropriate position of the virtual list.

[0072] S4. Use placeholder elements to maintain the list structure and move the current virtual list element to the real visible area.

[0073] S4.1. Calculate the starting and ending indexes of the virtual list based on the current scroll position, determine the visible area of ​​the virtual list, and assign a placeholder element to each item in the virtual list. When the user scrolls the list, update the position of the placeholder element in real time.

[0074] According to the latest start index and end index, the data of the corresponding list item is loaded. The corresponding DOM element is updated for the list item data changes between the start index and the end index. The updated virtual list item is mapped to the real list item, replacing the original content.

[0075] Specifically, a mapping table is established between virtual list items and real list items, for example, using an object or Map data structure, where the key is the ID or index of the virtual list item and the value is the corresponding real list item DOM node reference. During each update, the DOM node in the mapping table is searched based on the latest index range and its content is updated.

[0076] S5. Initialize the placeholder element, calculate the virtual list elements on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list elements in real time.

[0077] S5.1. After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items.

[0078] Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function to calculate the new start index and end index and update the list item data;

[0079] Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

[0080] S6. By listening to scroll events, reuse the loaded list items and dynamically update the list items in the visible area.

[0081] S6.1. Calculate the new start and end indexes based on the current scroll position, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and has been recycled into the pool.

[0082] For list items that are now between the start index and the end index and were not in the visible area before, they are taken from the pool and their content and position are updated. For list items that are now out of the range of the start index and the end index, they are marked as invisible, recycled into the list item pool, and the user interface is updated synchronously using the request animation frame function;

[0083] Specifically, create a list item pool object containing two queues: one for storing currently visible list items, and the other for storing invisible and reusable list items; when a list item leaves the visible area, it is moved from the "visible" queue to the "invisible" queue, and vice versa; when the list scrolls, the list item is taken from the "invisible" queue, its content and position are updated, and then put into the "visible" queue.

[0084] S7. Based on historical scrolling behavior and current scrolling speed, predict the user's scrolling direction and speed, use an intelligent prediction algorithm, and load the list items in the next visible area in advance.

[0085] S7.1. When a user scrolls a virtual list, collect and record scrolling direction, scrolling speed, and duration data, and use time series analysis to identify the user's scrolling direction and speed distribution;

[0086] Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction;

[0087] When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scroll speed and direction;

[0088] Once the next visible area is predicted, the data for that area is asynchronously loaded from the server, caching the most recent and most frequently accessed data segments.

[0089] Specifically, we implement an intelligent prediction algorithm, select a prediction function, and input the scrolling direction, speed, and historical scrolling data. We can use a simple weighted moving average method to predict the next distance the user may scroll, or go further and use a machine learning model (such as LSTM) to consider the scrolling history pattern and make more accurate predictions.

[0090] This embodiment also provides a computer device suitable for the case of an ultra-long list rendering method based on an embedded platform, comprising: a memory and a processor; the memory is used to store computer-executable instructions, and the processor is used to execute computer-executable instructions to implement the ultra-long list rendering method based on an embedded platform as proposed in the above embodiment.

[0091] The computer device may be a terminal, comprising a processor, a memory, a communication interface, a display screen and an input device connected via a system bus. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device comprises a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner may be achieved through WIFI, an operator network, NFC (near field communication) or other technologies. The display screen of the computer device may be a liquid crystal display or an electronic ink display screen, and the input device of the computer device may be a touch layer covering the display screen, or a button, trackball or touchpad provided on the housing of the computer device, or an external keyboard, touchpad or mouse.

[0092] This embodiment also provides a storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for rendering an extremely long list based on an embedded platform as proposed in the above embodiment; the storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, disk or optical disk.

[0093] In summary, by using the Duktape engine to run JavaScript on LVGL, efficient rendering and management of list controls are achieved, rendering only the list items in the currently visible area, significantly reducing memory usage. In addition, the visible area is dynamically calculated and updated to ensure smooth and lag-free list scrolling. By leveraging the flexibility of JavaScript and the efficiency of the Duktape engine, the implementation difficulty of long list rendering is simplified. A rich set of tunable parameters are also provided, allowing developers to balance memory usage and rendering efficiency according to specific needs. It is especially optimized for embedded systems, ensuring high performance even in resource-constrained environments, effectively filling the gap in existing technologies for rendering extremely long lists on embedded platforms.

[0094] Example 2

[0095] Referring to Table 1, which is the second embodiment of the present invention, in order to further verify the advancement of the present invention, experimental simulation data of the ultra-long list rendering method based on the embedded platform is provided.

[0096] The experiment selected two different list rendering technologies for comparison: the traditional list rendering method and the ultra-long list rendering method proposed in this invention. The experimental environment was set as an embedded device equipped with the LVGL graphics library and the Duktape JavaScript engine. The screen resolution was 720x1280, and the device had limited memory resources and computing power.

[0097] First, a virtual list containing 10,000 list items is created. Each list item contains a title and a descriptive text. In traditional methods, all list item data is loaded into memory at once during the initial loading. However, in the method of the present invention, only the pre-loaded number of items (P=10) and the list item data within the currently visible area are loaded.

[0098] Next, during the experiment, a custom performance monitoring tool was used to monitor and record key indicators such as list rendering speed and memory usage in real time. To ensure the accuracy of the test results, each method was tested three times independently, and the average value was taken as the final result.

[0099] Finally, we simulated the user's scrolling behavior at different speeds and recorded the list response time and memory consumption, as shown in Table 1:

[0100] Table 1 Experimental record table

[0101]

[0102]

[0103] As can be seen from the above table, the ultra-long list rendering method of the present invention is significantly superior to the traditional method in terms of list response time, memory consumption and average scrolling smoothness score. Specifically, the average list response time of the traditional method is 825ms, while the average response time of the method of the present invention is only 130ms, and the response speed is increased by about 6 times. In terms of memory consumption, the traditional method consumes an average of 12,500KB, while the method of the present invention consumes only 2,523KB, reducing memory usage by nearly 80%. In addition, in terms of the average scrolling smoothness score, the traditional method scored 6.2 points, while the method of the present invention scored 9.5 points, indicating that users can experience a smoother experience when scrolling the list.

[0104] Maximum delay is also an important indicator of list scrolling smoothness. Traditional methods have a maximum delay of 1200ms, meaning that in some cases, there's a noticeable delay between the user's scrolling action and the screen's response. In contrast, the method we propose has a maximum delay of only 210ms, significantly reducing the perceived delay and improving the user experience.

[0105] It should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical solutions of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical solutions of the present invention, which should all be included in the scope of the claims of the present invention.

Claims

1. A method for rendering an extremely long list based on an embedded platform, characterized by: include, Set the overall size and visible area size of the list control, and initialize the variables for the number of pre-loaded items and the size of the visible area; Calculate the index positions of the top and bottom list items in the visible area based on the current scroll position, the height of each list item, and the height of the visible area; Use the Duktape engine to run JavaScript, calculate the height of the visible area, load list items, update the list item array, dynamically create virtual list items, and replace the real list item content. The specific operations are as follows: In JavaScript, find the list item with an index between the start index and the end index to determine the current visible area; Load data for list items whose indexes are between the preload start index and the preload end index; In the Duktape engine, JavaScript is used to update the list item array. For list items that already exist in the array, their contents are updated. For newly added list items, DOM operations are used to dynamically create HTML elements. After the list item is created, the content of the list item is replaced with the actual list item. Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area; Initialize the placeholder element, calculate the virtual list elements on the first screen, and bind the scroll event to JavaScript to update the scrolling virtual list elements in real time; By listening to scroll events, the loaded list items are reused and the list items in the visible area are dynamically updated; Based on historical scrolling behavior and current scrolling speed, the user's scrolling direction and speed are predicted, and an intelligent prediction algorithm is used to preload the list items in the next visible area. The specific operations are as follows: When the user scrolls the virtual list, the scrolling direction, scrolling speed and duration data are collected and recorded, and time series analysis is used to identify the user's scrolling direction and speed distribution; Based on the collected data, a prediction algorithm is used to predict where the user might scroll next based on the current scrolling speed and direction; When a scroll event occurs, a prediction algorithm is used to estimate the start and end indexes of the next visible area, and the predicted range is dynamically adjusted according to the current scroll speed and direction; Once the next visible area is predicted, the data for that area is asynchronously loaded from the server, caching the most recent and most frequently accessed data segments.

2. The method for rendering an extremely long list based on an embedded platform according to claim 1, wherein: Set the overall size and visible area size of the list control, and initialize the variables for the number of preloaded items and the visible area size. The specific operations are as follows: Create a virtual list control on LVGL, get the screen size, and set the width W and height H of the virtual list control; Set the height VH and width VW of the visible area according to the screen resolution and user experience; During the initialization phase, the number of preloaded items is set to P. The preprocessor directive is used to fix the number of preloaded items. Based on the set visible area size, the padding is controlled by adjusting the style of the control, thereby indirectly setting the visible area size.

3. The method for rendering an extremely long list based on an embedded platform according to claim 2, wherein: Based on the current scroll position, the height of each list item, and the height of the visible area, calculate the index positions of the top and bottom list items in the visible area. The specific operations are as follows: Calculate the start and end indexes of the visible area by determining the current scroll position S, the height I of each list item, and the height VH of the visible area; Based on the start index and end index positions of the visible area, the preload start index and preload end index are calculated.

4. The method for rendering an extremely long list based on an embedded platform according to claim 3, wherein: Use placeholder elements to maintain the list structure and move the current virtual list elements to the real visible area. The specific operations are as follows: Based on the current scroll position, the start and end indexes of the virtual list are calculated to determine the visible area of ​​the virtual list. Placeholder elements are used to map each item in the virtual list. When the user scrolls the list, the position of the placeholder elements is updated in real time. According to the latest start index and end index, the data of the corresponding list item is loaded, and the corresponding DOM element is updated for the list item data changes between the start index and the end index. The updated virtual list item is mapped to the real list item to replace the original content.

5. The method for rendering an extremely long list based on an embedded platform according to claim 4, wherein: Initialize the placeholder element, calculate the virtual list elements on the first screen, bind the scroll event to JavaScript, and update the scrolling virtual list elements in real time. The specific operations are as follows: After initializing the list, create a placeholder element for each item and calculate the range of the list items within the first screen based on the screen size and the height of the list items; Register a scroll event listener on the virtual list container, listen to the event type in the LVGL system to detect the scroll action, and trigger the scroll update logic in JavaScript in the event callback function to calculate the new start index and end index and update the list item data; Update the data of the list item according to the index, and use the update data function to update the data in the local storage.

6. The method for rendering an extremely long list based on an embedded platform according to claim 5, wherein: By listening to scroll events, reusing loaded list items, and dynamically updating list items in the visible area, the specific operations are as follows: Based on the current scroll position, calculate the new start index and end index, create a reusable list item pool, identify the status of each list item, and determine whether it is currently in the visible area and has been recycled into the pool; For list items that are now between the start index and the end index and were not in the visible area before, they are taken from the pool and their content and position are updated. For list items that are now out of the range of the start index and the end index, they are marked as invisible and recycled into the list item pool. The user interface is updated synchronously using the request animation frame function.

7. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method for rendering an extremely long list based on an embedded platform according to any one of claims 1 to 6 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for rendering an extremely long list based on an embedded platform according to any one of claims 1 to 6 are implemented.

Images