Method, system and equipment for constructing NewCumCheckCard component based on VanUI and VueVirtualScroll

Abstract

The invention discloses a method, system and device for constructing a NewCumCheckCard component based on a VanUI and a VueVirtualScroll, and the method comprises the following steps: S1, receiving data returned by a background at a front end, processing the data into a foldable list structure by combining a VanUI framework with the VueVirtualScroll, and rendering an efficient virtual rolling list in an HTML (Hypertext Markup Language); s2, before the list is rendered, the appearance and interaction of list items are self-defined by using a slot mechanism of a VanUI and a dynamic rolling component of a VueVirtualScroll; and S3, in the rendered list structure, applying dynamic styles and event processing to optimize user interaction experience. According to the method, the Collapse component of the VanUI and the DynamicScroll of the VueVirtualScroll are deeply integrated, so that the contradiction between the performance and the interaction in a complex nested list scene is solved. Through a virtual rolling technology and componentized packaging, the rendering performance of a large-data-volume list is remarkably improved, and page jamming is avoided; high customizability is achieved through a slot mechanism and a dynamic style, interface flexibility and attractiveness are enhanced, and meanwhile a complete data interaction function is reserved.

Description

Technical Field

[0001] This invention relates to the field of front-end development technology, and specifically to a method, system, and device for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller. Background Technology

[0002] VanUI is a lightweight mobile UI framework based on Vue.js, providing efficient components such as collapsible lists, pull-to-refresh, and virtual scrolling, suitable for complex data display scenarios on mobile devices. VueVirtualScroller is a high-performance virtual scrolling library that significantly improves the rendering performance of large lists by rendering list items within the visible area on demand. In existing technologies, VanUI provides basic Collapse and List components, supporting dynamic data binding and interactive operations, while VueVirtualScroller optimizes the scrolling experience of long lists through the DynamicScroller component. However, when dealing with nested lists or large amounts of dynamic data, the rendering performance of the original components may be insufficient, layout complexity increases, and the flexibility of custom styles and interactive logic is limited, making it difficult to meet the personalized needs of complex business scenarios.

[0003] Patent CN113326036A discloses a method for implementing a big data tree-structured table component based on the AngularJS framework. This method encapsulates the component by defining front-end and back-end data formats and recursively processing tree-structured data. However, this technical solution suffers from rendering performance bottlenecks and excessive layout space consumption when handling large amounts of nested data. Furthermore, it lacks flexibility in customizing styles, making it difficult to achieve dynamic style adjustments and efficient interaction across different levels.

[0004] The above-mentioned patented technical solutions have the following drawbacks: In scenarios with large amounts of data, the rendering efficiency of the original list structure is low, which can easily lead to page lag; the customization capabilities of the components are limited, making it difficult to support efficient rendering and personalized interaction of complex nested structures; style adjustments require manual manipulation of class names, which lacks flexibility and maintainability. Summary of the Invention

[0005] This invention provides a method, system, and device for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller, in order to solve the problems of insufficient rendering performance, complex layout, and insufficient flexibility in custom styles and interactive logic of large data lists in the prior art.

[0006] To achieve the above objectives, the present invention adopts the following technical solution: A method for building a NewCustomCheckCard component based on VanUI and VueVirtualScroller includes the following steps: S1. Receive data returned from the backend on the front end, process the data into a collapsible list structure using the VanUI framework and VueVirtualScroller, and render an efficient virtual scrolling list in HTML. S2. Before rendering the list, use VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component to customize the appearance and interaction of the list items; S3. Apply dynamic styles and event handling to the rendered list structure to optimize the user interaction experience.

[0007] Furthermore, in step S1, the data is processed into a collapsible list structure using the VanUI framework combined with VueVirtualScroller, and an efficient virtual scrolling list is rendered in HTML. Specifically, this includes: S11. Receive data returned from the backend at the frontend; S12. Perform structured processing on the received data to generate a collapsible data model containing a main list and nested sub-lists; S13. Using VanUI's Collapse component in combination with VueVirtualScroller's DynamicScroller component, the processed data is rendered as a virtual scrolling list.

[0008] Furthermore, in step S2, the appearance and interaction of list items are customized using VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component, specifically including: S21. Define custom titles, subtitles, and content areas for list items using VanUI's slot mechanism; S22. Use the DynamicScroller component of VueVirtualScroller to set the minimum item height and buffer to optimize rendering performance; S23. When iterating through list data, dynamically add checkboxes, loading status, or disabled status based on data attributes. S24. Bind interactive events to each list item, such as click events and checkbox state change events; S25. Return the custom-rendered HTML structure through the slot, and combine it with dynamic style class names to achieve personalized display.

[0009] Furthermore, in step S3, dynamic styles and event handling are applied to the rendered list structure to optimize the user interaction experience, specifically including: S31. During the component mounting phase, obtain DOM elements through CSS scope styles or class names; S32. Apply dynamic styles to the retrieved DOM elements, including borders, spacing, and background color, to optimize the visual effect; S33. Achieve efficient event handling by binding click and selection events of list items through event delegation; S34. Add dynamic loading animations and prompts to collapsible lists and virtual scrolling areas to improve user interaction and feedback.

[0010] Furthermore, the list item interaction operations in step S33 also include: dynamic content rendering, selection box state management, disabled state control, loading more functions, and expansion and collapse operations of complex nested lists.

[0011] Furthermore, the specific methods for adding dynamic styles and interactive feedback to the list structure in step S34 include: T1. Apply rounded corners and shadow effects to the outermost container of the list to improve the overall aesthetics; T2. Dynamically adjust the shape and disabled state of the selection box based on the position and status of the list items to enhance interaction consistency; T3. Add click interaction and loading animation to the "Load More" area, and display corresponding prompt text ("No more" or "Click to load more") according to the data loading status. T4. Adjust the spacing and font style of list items, including font size, color, and alignment, to ensure the data is clear and readable.

[0012] A system for implementing the above method includes: The data receiving and processing module is used to receive data returned from the backend at the front end and perform structured processing. The list rendering module is used to render processed data into a virtual scrolling list using VanUI and VueVirtualScroller components; Custom modules are used to customize the appearance and interaction of list items through slot mechanisms and dynamic components; The Styles and Events module is used to apply dynamic styles and event handling to optimize the user experience.

[0013] An electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the method described above.

[0014] A computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the steps of the above-described method.

[0015] This invention resolves the performance-interaction conflict in complex nested list scenarios by deeply integrating VanUI's Collapse component with VueVirtualScroller's DynamicScroller. Through virtual scrolling technology and component-based encapsulation, it significantly improves the rendering performance of lists with large amounts of data, avoiding page lag. The slot mechanism and dynamic styles enable high customizability, enhancing interface flexibility and aesthetics while retaining complete data interaction functionality. This solution effectively overcomes the technical bottlenecks of traditional list components, such as rendering lag and customization difficulties with large amounts of data, providing a high-performance, highly customizable complete solution for displaying complex data on mobile devices. Attached Figure Description

[0016] Figure 1 This is a flowchart of the method of the present invention; Figure 2 This is the complete architecture diagram. Detailed Implementation

[0017] The following is in conjunction with the appendix Figures 1-2 The present invention provides a more detailed description of the specific implementation of a method, system, and device for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller. Example

[0018] like Figure 1 As shown, the present invention provides a method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller, comprising the following steps: S1. Receive data returned from the backend on the front end, process the data into a collapsible list structure using the VanUI framework and VueVirtualScroller, and render an efficient virtual scrolling list in HTML. S2. Before rendering the list, use VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component to customize the appearance and interaction of the list items; S3. Apply dynamic styles and event handling to the rendered list structure to optimize the user interaction experience.

[0019] In step S1, the specific method for processing the data into a collapsible list structure using the VanUI framework in conjunction with VueVirtualScroller is as follows: S11. Receive data returned from the backend via asynchronous requests on the frontend (usually in JSON format, including the original data of the main list and nested sub-lists). S12. Perform structured processing on the received data to generate a collapsible data model containing a main list and nested sub-lists; S13. Using VanUI's Collapse component in combination with VueVirtualScroller's DynamicScroller component, the processed data is rendered as a virtual scrolling list.

[0020] In step S2, the specific method for customizing the appearance and interaction of list items using VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component is as follows: S21. Define custom titles, subtitles, and content areas for list items using VanUI's slot mechanism; S22. Use the DynamicScroller component of VueVirtualScroller to set the minimum item height and buffer to optimize rendering performance; S23. When iterating through list data, dynamically add checkboxes, loading status, or disabled status based on data attributes. S24. Bind interactive events (such as click events and checkbox state change events) to each list item. S25. Return the custom-rendered HTML structure through the slot, and combine it with dynamic style class names to achieve personalized display.

[0021] In step S3, the specific methods for applying dynamic styles and event handling to optimize the user interaction experience are as follows: S31. During the component mounting phase, obtain DOM elements through CSS scope styles or class names; S32. Apply dynamic styles to the obtained DOM elements to optimize the visual effect; S33. Achieve efficient event handling by binding click and selection events of list items through event delegation; S34. Add dynamic loading animations and prompts to collapsible lists and virtual scrolling areas to improve user interaction and feedback.

[0022] The above method and steps dynamically adjust the styles and interaction logic of DOM elements to efficiently render complex nested lists into collapsible virtual scrolling structures. By adding loading animations and interactive feedback, the user experience is enhanced, making data display more intuitive and readable, while improving the interactivity and aesthetics of the interface.

[0023] In step S33, in addition to dynamic style processing, the interactive operations of list items also include: dynamic content rendering (such as rendering the InnerItem component through slots), selection box state management (such as checkedAll and innerItem.checked), disable state control (such as checkedDisabled or Is_Dis property), load more functionality (handleMore event), and expansion and collapse of complex nested lists (controlled by the activeNames of the Collapse component).

[0024] The methods described above help create highly interactive and engaging user interfaces while efficiently presenting large lists of data. Example

[0025] In this embodiment, the specific method for adding dynamic styles and interactive feedback to the list structure in step S34 is as follows: T1. Apply rounded corner borders (e.g., 16px) and shadow effects (e.g., box-shadow: 2px 0px 10px 2px rgba(0, 0, 0, 0.1)) to the outermost container of the list (e.g., cs-collapse-wrapper) to improve the overall aesthetics.

[0026] T2. Dynamically adjust the shape (e.g., round or square) and disabled state (e.g., disabled when checkedDisabled or Is_Dis is true) of the selection box based on the position and state of the list item, enhancing interaction consistency.

[0027] T3. Add click interaction (handleMore event) and loading animation (van-loading component) to the innerLoadingFinish area, and display "No more" or "Click to load more" based on the innerLoadingFinish status to provide intuitive loading feedback.

[0028] T4. Adjust the spacing of list items (e.g., padding: 32px) and font style (including font size such as 28px, color such as #333333, and alignment) to ensure that the data is clear, readable, and meets design requirements.

[0029] The above method enhances the effects of virtual scrolling and collapsible lists by adding appropriate styles and interactive feedback to the list structure. Simultaneously, it dynamically adjusts the display of selection boxes and loading states, making the list more visually readable and clear. This approach meets the design requirements of complex business scenarios and improves the user experience.

[0030] The above description is merely a preferred embodiment of the present invention. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be noted that for those skilled in the art, any improvements and modifications made without departing from the principles of the present invention should also be considered within the scope of protection of the present invention.

Claims

1. A method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller, characterized in that, Includes the following steps: S1. Receive data returned from the backend on the front end, process the data into a collapsible list structure using the VanUI framework and VueVirtualScroller, and render an efficient virtual scrolling list in HTML. S2. Before rendering the list, use VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component to customize the appearance and interaction of the list items; S3. Apply dynamic styles and event handling to the rendered list structure to optimize the user interaction experience.

2. The method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller according to claim 1, characterized in that, In step S1, the data is processed into a collapsible list structure using the VanUI framework and VueVirtualScroller, and then rendered as an efficient virtual scrolling list in HTML. Specifically, this includes: S11. Receive data returned from the backend at the frontend; S12. Perform structured processing on the received data to generate a collapsible data model containing a main list and nested sub-lists; S13. Using VanUI's Collapse component in combination with VueVirtualScroller's DynamicScroller component, the processed data is rendered as a virtual scrolling list.

3. The method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller according to claim 1, characterized in that, In step S2, the appearance and interaction of list items are customized using VanUI's slot mechanism and VueVirtualScroller's dynamic scrolling component, specifically including: S21. Define custom titles, subtitles, and content areas for list items using VanUI's slot mechanism; S22. Use the DynamicScroller component of VueVirtualScroller to set the minimum item height and buffer to optimize rendering performance; S23. When iterating through list data, dynamically add checkboxes, loading status, or disabled status based on data attributes. S24. Bind interactive events to each list item; S25. Return the custom-rendered HTML structure through the slot, and combine it with dynamic style class names to achieve personalized display.

4. The method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller according to claim 1, characterized in that, In step S3, dynamic styles and event handling are applied to the rendered list structure to optimize the user interaction experience, specifically including: S31. During the component mounting phase, obtain DOM elements through CSS scope styles or class names; S32. Apply dynamic styles to the retrieved DOM elements, including borders, spacing, and background color; S33. Bind click and select events for list items via event delegation; S34. Add dynamic loading animations and tooltips to the collapsible list and virtual scrolling area.

5. The method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller according to claim 4, characterized in that, The list item interaction operations in step S33 also include: dynamic content rendering, selection box state management, disabled state control, loading more functions, and expansion and collapse operations of complex nested lists.

6. The method for constructing a NewCustomCheckCard component based on VanUI and VueVirtualScroller according to claim 4, characterized in that, The specific methods for adding dynamic styles and interactive feedback to the list structure in step S34 include: T1. Apply rounded corners and a shadow effect to the outermost container of the list; T2. Dynamically adjust the shape and disabled state of the selection box based on the position and status of the list items; T3. Add click interaction and loading animation to load more areas, and display corresponding prompts based on the data loading status; T4. Adjust the spacing and font style of list items, including font size, color, and alignment.

7. A system for implementing the method as described in any one of claims 1-6, characterized in that, include: The data receiving and processing module is used to receive data returned from the backend at the front end and perform structured processing. The list rendering module is used to render processed data into a virtual scrolling list using VanUI and VueVirtualScroller components; Custom modules are used to customize the appearance and interaction of list items through slot mechanisms and dynamic components; The Styles and Events module is used to apply dynamic styles and event handling to optimize the user experience.

8. 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, it implements the steps of the method as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the steps of the method as described in any one of claims 1-6.

Images