Data virtual list rendering method in vue framework and related device

Abstract

The invention provides a method for rendering a data virtual list in a vue framework. The method comprises the following steps: creating a Vue component file about the virtual list; the method comprises the following steps: in an HTML (Hypertext Markup Language) of a Vue component file, creating a parent div with a fixed height, allowing a scroll bar to vertically scroll, creating a placeholder div for calculating rendering according to all data heights in the parent div to support the scroll bar, creating a container div at the same level, and absolutely positioning the container div in a parent window; and in js of the Vue component file, obtaining a window height and setting the window height to a fixed window div to render a display window height, calculating a container height according to the obtained data item height and the data total number, and setting the container height to a placeholder div to calculate a space to be rendered. Based on the vue framework, rendering of the virtual list can be achieved, the performance of a large number of data lists is remarkably improved, and better user experience and more efficient data presentation are provided.

Description

Technical Field

[0001] The present application belongs to the technical field of list rendering, and in particular, relates to a method and related device for rendering a virtual list of data in a Vue framework. Background Art

[0002] With the vigorous development of Internet technology, the functional requirements of products are becoming more and more refined. In front-end development, we often encounter business situations where list data cannot be loaded using paging. We call this kind of list a long list. For example, in data reporting and analysis applications, it is usually necessary to display a large amount of data, such as tables, charts, or graphs. Long lists can effectively display and browse large data. For example, some e-commerce websites also need to display a large number of product lists. Whether it is a product catalog, search results, or category browsing, it is necessary to be able to display a large amount of product information in the form of a long list.

[0003] When a list with a large number of elements needs to be displayed in the user interface, a common practice is to load the entire list at once. This approach is feasible for smaller data, but when the amount of data increases, it will cause performance problems and degraded user experience. To solve the performance problem, developers began to adopt paging loading, in which the list is divided into multiple pages, and the elements of the current page are loaded each time, and users can view different data by switching pages. Although this approach reduces the time and memory consumption required for the first load, paging is still a cumbersome operation for users. In order to provide a better user experience, a scroll-based infinite loading mechanism is introduced. When the user scrolls to the bottom of the list, the new data is asynchronously loaded and appended to the end of the existing list. This mechanism allows users to scroll the list infinitely, but when scrolling to a farther position, performance problems still exist because a large number of elements still need to be retained in memory. Summary of the invention

[0004] In view of this, the present application aims to propose a method and related device for rendering a virtual list of data in a Vue framework to solve the shortcomings of the above-mentioned problems.

[0005] To achieve the above purpose, the technical solution of this application is implemented as follows:

[0006] In a first aspect, the present application provides a method for rendering a virtual list of data in a Vue framework, comprising:

[0007] Create a Vue component file about virtual list;

[0008] In the HTML of the Vue component file, create a parent div with a fixed height and allow the scroll bar to scroll vertically. Create a placeholder div inside the parent div that is rendered based on the height of all data to support the scroll bar. Create a container div at the same level and absolutely position it in the parent window. The container div contains a div with the current scroll bar height and a div for expanding the visible data.

[0009] In the js of the Vue component file, the window height is obtained and set to the fixed window div to render the display window height. The container height is calculated based on the obtained data item height and the total number of data, and set to the placeholder div to calculate the space to be rendered. The scroll event of the fixed window div is listened to and the rendering range is calculated. The visual data items are dynamically rendered and the scroll height is updated.

[0010] In the second aspect, based on the same inventive concept, the present application also provides a data virtual list rendering device in a vue framework, comprising:

[0011] The file creation module is configured to create a Vue component file related to the virtual list;

[0012] The first writing module is configured to create a parent div with a fixed height in the HTML of the Vue component file and allow the scroll bar to scroll vertically, create a placeholder div inside the parent div that is rendered according to the height of all data to support the scroll bar, create a container div at the same level and absolutely position it in the parent window, wherein the container div contains a div of the current scroll bar height and a div for expanding visual data;

[0013] The second writing module is configured to obtain the window height and set it to the fixed window div in the js of the Vue component file to render the display window height, calculate the container height based on the obtained data item height and the total number of data, and set it to the placeholder div to calculate the space to be rendered, listen to the scroll event of the fixed window div and calculate the rendering range, dynamically render the visual data items and update the scroll height.

[0014] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.

[0015] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.

[0016] Compared with the prior art, the method and related device for rendering a virtual list of data in a Vue framework described in this application have the following beneficial effects:

[0017] The present application describes a method for rendering a virtual list of data in a vue framework and related devices. The method is based on the vue framework and can achieve virtual list rendering by passing in listData, viewportHeight, and itemHeight. It can significantly improve the performance of large data lists to provide a better user experience and more efficient data presentation. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0019] Figure 1 This is a flow chart of a method for rendering a data virtual list in a Vue framework according to an embodiment of the present application;

[0020] Figure 2 A schematic diagram of a specific implementation of a method for rendering a data virtual list in a Vue framework according to an embodiment of the present application;

[0021] Figure 3 This is a schematic diagram of the structure of a data virtual list rendering device in a Vue framework according to an embodiment of the present application;

[0022] Figure 4 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0024] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0025] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0026] In order to further optimize the performance of large lists of data, virtual lists are used. Virtual lists solve the problems mentioned in the background technology by rendering elements only in the visible area of ​​the screen. It takes advantage of the fact that only part of the area in the user interface is visible. When the user scrolls the list, the virtual list only loads, renders and displays the elements near the visible area, rather than the entire list. When the user scrolls to other parts of the list, the virtual list dynamically loads new elements, while unloading and recycling elements that are no longer visible to maintain efficient memory utilization and good performance.

[0027] See also Figure 1 and Figure 2 As shown, this embodiment provides a method for rendering a virtual list of data in a Vue framework, which specifically includes the following steps:

[0028] Step S101, create a Vue component file related to the virtual list.

[0029] Specifically, in this embodiment, first, a new Vue component file virtualList.vue needs to be created, which will contain a template (HTML), a script (JavaScript), and a style (CSS) part for realizing the function of the virtual list.

[0030] Step S102, in the HTML of the Vue component file, create a parent div with a fixed height and allow the scroll bar to scroll vertically, create a placeholder div inside the parent div that is rendered based on the height of all data to hold up the scroll bar, create a container div at the same level and absolutely position it in the parent window, where the container div contains a div of the current scroll bar height and a div for expanding visual data.

[0031] Specifically, in this embodiment, writing the HTML part includes:

[0032] 2.1. Create a div with a fixed height and allow a scroll bar to appear on the y-axis when the internal data is larger than the window height.

[0033] Furthermore, the purpose of this step is to limit the height of the visible area to ensure that a vertical scroll bar appears when the amount of data exceeds this height. Specifically, a div is created in the template (the div is used as a viewport and is responsible for displaying the data currently visible to the user. Since the amount of data may be very large, only the part currently seen by the user is rendered in the div), a fixed height is set (this embodiment uses CSS style settings to automatically display a scroll bar on the Y axis when the internal content exceeds the window height), and overflow-y:auto is set to enable vertical scrolling.

[0034] 2.2. Create a div inside it that is rendered based on the height of all the data to support the scroll bar.

[0035] Furthermore, a hidden div will be created in the viewport to support the scroll bar. The role of this div is to dynamically calculate the total height of all data so that the behavior of the scroll bar is consistent with the actual data height. Its height is the total height of all data items, which is calculated by listData.length*itemHeight. The purpose of this div is to give the scroll bar a reference height, but it will not actually display content and is only used to support the scroll bar.

[0036] 2.3. Create a container div at the same level that contains a div with the current scroll bar height and a div that displays visual data, and absolutely position it in the parent window.

[0037] Furthermore, the container div at the same level as the placeholder div is responsible for rendering the data items in the current visible area. The container div uses absolute positioning to maintain its dynamic position changes within the window. The container div needs to calculate the range of data items visible to the current user and only render the data within this range. The position of the container must follow the scrolling of the scroll bar, so it needs to be synchronized with the user's scrolling position through absolute positioning.

[0038] It should be noted that the elements in the container render the data items in the visible area according to the current scroll position, so that the list content is dynamically updated according to the position of the scroll bar.

[0039] Step S103, in the js of the Vue component file, obtain the window height and set it to the fixed window div to render and display the window height, calculate the container height based on the obtained data item height and the total number of data, and set it to the placeholder div to calculate the space to be rendered, listen to the scrolling event of the fixed window div and calculate the rendering range, dynamically render the visual data items and update the scrolling height.

[0040] Specifically, in this embodiment, the main logic implementation of the js part includes:

[0041] 3.1. Get viewportHeight and set it to the fixed viewport div to render the display window height.

[0042] To go further, you first need to get the height of the viewport (ie, viewportHeight) in order to determine the size of the user's current visible area.

[0043] In the mounted lifecycle hook of the component, use this.$refs to get the actual height of the parent div, assign the obtained viewportHeight to the component's state management (such as the variable in data), and dynamically set it to the height of the fixed window div.

[0044] 3.2. Get itemHeight and listData to calculate containerHeight and set it to the placeholder div to calculate the space required for rendering.

[0045] Furthermore, containerHeight determines the length of the scroll bar, so the performance of the scroll bar will be directly related to the amount of data. The placeholder div does not render actual content, but is only used to trigger the scroll bar.

[0046] Get the height itemHeight of a single data item (which can be obtained by measuring the first rendered data item), calculate the total height containerHeight = itemHeight * listData.length, and set containerHeight to the height of the placeholder div to ensure that the length of the scroll bar is consistent with the total amount of data.

[0047] Page Usage <virtual-list>tag and pass in the following parameters:

[0048] listData / / Resource data default value []

[0049] itemHeight / / element height default value 40px

[0050] viewportheight / / The default value of the window height is 400px

[0051] 3.3. Monitor the scrolling event of the window div, calculate the starting and ending positions to be rendered based on the current scrolling position, and calculate the number of elements to be rendered based on the current window size and element height.

[0052] Further, add a scroll event listener to the fixed viewport div. When the scroll event is triggered, get the current scroll position scrollTop, calculate the starting index of rendering startIndex = Math.floor (scrollTop / itemHeight), and calculate the number of elements to be rendered renderCount = Math.ceil (viewportHeight / itemHeight) + buffer according to the viewport height and data item height, where buffer is the buffer added to avoid blank spaces when scrolling quickly. It should be noted that when calculating, it is necessary to ensure that startIndex and renderCount do not exceed the total data range.

[0053] 3.4. Render the corresponding elements into the viewport based on the calculated starting position and the number of elements to be rendered. Unload the elements that leave the viewport and set the scroll bar height to the div that occupies the height in the container.

[0054] Use the calculated startIndex and renderCount to extract the data subset that needs to be rendered from listData, bind the extracted data subset to the div that displays the visual data for rendering in the template, update the position of the div that represents the current scroll height, and correctly position the visual data at the position corresponding to the scroll bar by setting the margin-top or transform attribute.

[0055] Unloading elements that leave the view can be achieved by destroying component instances that are not in the rendering range or using conditional rendering (such as v-if). Specifically, each time you scroll, the starting position and the number of elements to be rendered will be recalculated based on the new scrollTop. The old elements will be removed from the DOM and the new elements will enter the view. As the scroll bar changes, the data items in the container will be dynamically updated, and the placeholder div will maintain its original height to maintain the height of the scroll bar.

[0056] In some embodiments, it further comprises:

[0057] By analyzing the average height of most data items and setting an estimated height, the actual height of the acquired data item is compared with the estimated height, and dynamic adjustment is performed according to the comparison result. The dynamic adjustment includes:

[0058] Starting from the first data item, gradually accumulate the height of each data item until the total height exceeds the current scroll position, thereby determining the starting data item to be rendered;

[0059] Starting from the starting position, continue to accumulate the height of each data item until the height of the viewport is reached to determine the terminal data item to be rendered;

[0060] When the data items enter the view and are rendered, get the actual height of each data item and update the height cache.

[0061] Specifically, in this embodiment, first, an estimated height needs to be set for each data item, because the actual height of each data item cannot be immediately known during initial loading. Therefore, an estimated height is set, and this estimated height is used for calculation during initial rendering.

[0062] Estimated height: By analyzing the average height of most data items, you can set a reasonable estimated value. When the actual height of a data item is found to be inconsistent with the estimated height during actual rendering, it can be adjusted dynamically.

[0063] Dynamically calculate height: When a data item enters the view and is rendered, get the actual height of each data item through getBoundingClientRect() or offsetHeight, and update the height cache.

[0064] When the user scrolls, the scroll position is obtained through scrollTop, and then starting from the first data, the height of each data item is gradually accumulated until the total height exceeds the current scroll position, so that the starting data item to be rendered can be determined; then starting from the starting position, the height of each data item continues to be accumulated until the height of the window is reached, and the ending data item to be rendered is determined.

[0065] The purpose of setting dynamic adjustment is: each time you scroll, you need to dynamically calculate which items need to be rendered based on the actual height of each data item. Due to the initial estimated height and real-time adjustment mechanism, you will not feel any lag when using it.

[0066] The method described in this embodiment is based on the vue framework. By passing in listData, viewportHeight, and itemHeight, the rendering of the virtual list can be realized, which can significantly improve the performance of a large number of data lists to provide a better user experience and more efficient data presentation.

[0067] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0068] Based on the same inventive concept, corresponding to any of the above-mentioned embodiment methods, the embodiment of the present application also provides a data virtual list rendering device within a vue framework.

[0069] like Figure 3 As shown, the device for rendering a data virtual list in a vue framework includes:

[0070] The file creation module 11 is configured to create a Vue component file related to the virtual list;

[0071] The first writing module 12 is configured to create a parent div with a fixed height in the HTML of the Vue component file, and allow the scroll bar to scroll vertically, create a placeholder div inside the parent div that is rendered according to the height of all data to support the scroll bar, create a container div at the same level, and absolutely position it in the parent window, wherein the container div contains a div of the current scroll bar height and a div for expanding visual data;

[0072] The second writing module 13 is configured to obtain the window height and set it to the fixed window div in the js of the Vue component file to render the display window height, calculate the container height according to the obtained data item height and the total number of data, and set it to the placeholder div to calculate the space to be rendered, listen to the scrolling event of the fixed window div and calculate the rendering range, dynamically render the visual data items and update the scrolling height.

[0073] For the convenience of description, the above devices are described in terms of functions and are divided into various modules. Of course, when implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware.

[0074] The device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0075] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.

[0076] Figure 4 A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.

[0077] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0078] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.

[0079] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0080] The communication interface 1040 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0081] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040).

[0082] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.

[0083] The electronic device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0084] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in any of the above embodiments.

[0085] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0086] The computer instructions stored in the storage medium of the above embodiments are used to enable the computer to execute the method described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0087] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.

[0088] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power supply / ground connection with the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented in the embodiments of the present application (that is, these details should be fully within the scope of understanding of those skilled in the art). In the case of elaborating specific details (e.g., circuits) to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered to be illustrative rather than restrictive.

[0089] Although the present application has been described in conjunction with specific embodiments of the present application, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art based on the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

[0090] The embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of the present application.

Claims

1. A method for rendering a virtual list of data in a vue framework, characterized in that: include: Create a Vue component file about virtual list; In the HTML of the Vue component file, create a parent div with a fixed height and allow the scroll bar to scroll vertically. Create a placeholder div inside the parent div that is rendered based on the height of all data to support the scroll bar. Create a container div at the same level and absolutely position it in the parent window. The container div contains a div with the current scroll bar height and a div for expanding the visible data. In the js of the Vue component file, the window height is obtained and set to the fixed window div to render the display window height. The container height is calculated based on the obtained data item height and the total number of data, and set to the placeholder div to calculate the space to be rendered. The scroll event of the fixed window div is listened to and the rendering range is calculated. The visual data items are dynamically rendered and the scroll height is updated.

2. The method according to claim 1, characterized in that The above creates a placeholder div inside the parent div, which is rendered based on the height calculation of all data, including: A child placeholder div is created inside a parent div with a fixed height. The height of the child placeholder div is dynamically calculated as the height of a single data item multiplied by the total number of data items, wherein the height of the placeholder div is equal to the total height of all data items.

3. The method according to claim 1, characterized in that The method creates a container div at the same level and positions it absolutely in the parent window, wherein the container div contains a div of the current scroll bar height and a div for expanding visual data, including: The container is absolutely positioned in the parent window, placing the visualized list content at the specified position of the scroll bar. The elements in the container render the data items in the visible area according to the current scroll position, so that the list content is dynamically updated according to the position of the scroll bar.

4. The method according to claim 1, characterized in that The obtaining of the window height and setting it to the fixed window div to render and display the window height includes: In the mounted lifecycle hook of the Vue component, get the window height of the parent div; The acquired window height is assigned to the component state management, and dynamically set to the height of the fixed window div.

5. The method according to claim 4, characterized in that The monitoring of the scrolling event of the fixed window div and calculating the rendering range, dynamically rendering the visual data items and updating the scrolling height include: Add a scroll event listener to the fixed window div. When the scroll event is triggered, get the current scroll position, calculate the starting position and ending position to be rendered based on the current scroll position, and calculate the number of elements to be rendered based on the current window size and element height. According to the calculated starting position and the number of elements to be rendered, the corresponding elements are rendered into the window, the elements that leave the view are unloaded, and the scroll bar height is set to the div that occupies the height in the container.

6. The method according to claim 1, characterized in that Also includes: By analyzing the average height of most data items and setting an estimated height, the actual height of the acquired data items is compared with the estimated height, and dynamic adjustments are made based on the comparison results; When the data items enter the view and are rendered, get the actual height of each data item and update the height cache.

7. The method according to claim 6, characterized in that The dynamic adjustment includes: Starting from the first data item, gradually accumulate the height of each data item until the total height exceeds the current scroll position, thereby determining the starting data item to be rendered; Starting from the starting position, continue to accumulate the height of each data item until the height of the viewport is reached to determine the terminal data item to be rendered.

8. A data virtual list rendering device in a vue framework, characterized in that: include: The file creation module is configured to create a Vue component file related to the virtual list; The first writing module is configured to create a parent div with a fixed height in the HTML of the Vue component file and allow the scroll bar to scroll vertically, create a placeholder div inside the parent div that is rendered according to the height of all data to support the scroll bar, create a container div at the same level and absolutely position it in the parent window, wherein the container div contains a div of the current scroll bar height and a div for expanding visual data; The second writing module is configured to obtain the window height and set it to the fixed window div in the js of the Vue component file to render the display window height, calculate the container height based on the obtained data item height and the total number of data, and set it to the placeholder div to calculate the space to be rendered, listen to the scroll event of the fixed window div and calculate the rendering range, dynamically render the visual data items and update the scroll height.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 7 is implemented.

10. A non-transitory computer-readable storage medium, characterized in that: in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 7.

Images