Rendering method and device, electronic equipment, computer readable storage medium and computer program product

Abstract

The invention provides a rendering method and device, electronic equipment, a computer program product and a computer readable storage medium. The method is applied to a pull-down selection assembly, the pull-down selection assembly comprises a pull-down selection plug-in and a virtual scrolling plug-in, the pull-down selection plug-in is a plug-in in a human-computer interaction interface frame, and the virtual scrolling plug-in is a plug-in in a virtual scrolling library; the method comprises the steps of determining a first option list and a position index of a selected item in the first option list in response to a content loading operation for a pull-down menu; under the condition that the virtual scrolling mechanism is started, calling the virtual scrolling plug-in by pulling down the selection plug-in; and rendering the pull-down menu through the virtual scrolling plug-in based on the first option list and the position index. According to the invention, the display performance of the pull-down menu can be improved.

Description

Technical Field

[0001] This application relates to computer technology, and more particularly to a rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product. Background Technology

[0002] Rendering long lists directly can significantly degrade page performance and negatively impact user experience. While virtual scrolling can solve this problem, in human-computer interaction frameworks, loading long option lists via dropdown menus typically involves rendering all options directly, resulting in low rendering efficiency and severely affecting display performance. Summary of the Invention

[0003] This application provides a rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product that can improve the display performance of drop-down menus.

[0004] The technical solution of this application embodiment is implemented as follows:

[0005] This application provides a rendering method applied to a dropdown selection component, the dropdown selection component including a dropdown selection plugin and a virtual scrolling plugin, the dropdown selection plugin being a plugin in a human-computer interaction interface framework, and the virtual scrolling plugin being a plugin in a virtual scrolling library; the method includes:

[0006] In response to a content loading operation for a drop-down menu, determine a first list of options and the position index of the selected item in the first list of options;

[0007] When the virtual scrolling mechanism is enabled, the virtual scrolling plugin is invoked via the dropdown selection plugin;

[0008] Based on the first option list and the position index, the drop-down menu is rendered using the virtual scrolling plugin.

[0009] This application embodiment provides a rendering device configured with a drop-down selection component. The drop-down selection component includes: an operation response unit, a drop-down selection plugin, and a virtual scrolling plugin. The drop-down selection plugin is a plugin in a human-computer interaction interface framework, and the virtual scrolling plugin is a plugin in a virtual scrolling library. The device includes:

[0010] The operation response unit is used to respond to a content loading operation for a drop-down menu by determining a first option list and the position index of the selected item in the first option list;

[0011] The dropdown selection plugin is used to invoke the virtual scrolling plugin when the virtual scrolling mechanism is enabled;

[0012] The virtual scrolling plugin is used to render the drop-down menu based on the first option list and the position index.

[0013] This application provides an electronic device, the electronic device comprising:

[0014] Memory is used to store executable instructions or computer programs.

[0015] The processor, when executing computer-executable instructions or computer programs stored in the memory, implements the rendering method provided in the embodiments of this application.

[0016] This application provides a computer-readable storage medium storing a computer program or computer-executable instructions for implementing the rendering method provided in this application when executed by a processor.

[0017] This application provides a computer program product, including a computer program or computer executable instructions, which, when executed by a processor, implements the rendering method provided in this application.

[0018] The embodiments of this application have the following beneficial effects: The dropdown selection component simultaneously encapsulates a dropdown selection plugin from the human-computer interaction interface framework and a virtual scrolling plugin from the virtual scrolling library. During the dropdown menu rendering process, the necessary data for rendering the dropdown menu can be determined based on the user's content loading operation. Then, the dropdown selection plugin determines whether the virtual scrolling mechanism is enabled. When the virtual scrolling mechanism is enabled, the virtual scrolling plugin from the virtual scrolling library is called to render the dropdown menu using the obtained data. This ensures that the virtual scrolling mechanism can be applied normally when building dropdown menus based on the human-computer interaction interface framework, thereby improving the rendering efficiency of the dropdown menu when loading option lists, especially long option lists, and ultimately improving the display performance of the dropdown menu. Attached Figure Description

[0019] Figure 1 This is a schematic diagram of an application environment for the rendering method provided in this application embodiment;

[0020] Figure 2 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 1 ;

[0021] Figure 3 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 2 ;

[0022] Figure 4 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 3 ;

[0023] Figure 5 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 4 ;

[0024] Figure 6 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 5 ;

[0025] Figure 7 This is a schematic diagram of a drop-down selection component provided in an embodiment of this application;

[0026] Figure 8 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0027] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0028] In the following description, references are made to “some embodiments,” which describe a subset of all possible embodiments. However, it is understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0029] In the following description, the terms "first, second, third" are used merely to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first, second, third" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0030] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0031] Unless otherwise defined, all technical and scientific terms used in the embodiments of this application have the same meaning as commonly understood by one of ordinary skill in the art. The terminology used in the embodiments of this application is for the purpose of describing the embodiments of this application only and is not intended to limit this application.

[0032] In the implementation of this application, the collection and processing of relevant data should strictly comply with the requirements of relevant laws and regulations, obtain the informed consent or separate consent of the personal information subject, and carry out subsequent data use and processing within the scope of laws and regulations and the authorization of the personal information subject.

[0033] Before providing a further detailed description of the embodiments of this application, the nouns and terms involved in the embodiments of this application will be explained, and the nouns and terms involved in the embodiments of this application shall be interpreted as follows.

[0034] 1) A drop-down menu is an interface element used for user interaction. It usually loads a list of options with multiple options for the user to choose from.

[0035] 2) The dropdown selection component is the basic building block for implementing dropdown menu functionality. It contains all the logic and code needed to create a dropdown menu. In other words, a dropdown menu can be viewed as an instance or entity of the dropdown selection component, applying its basic functionality to a specific scenario.

[0036] 3) Virtual scrolling is a mechanism used to optimize the rendering performance of long option lists (lists with more than a threshold of options). This mechanism allows only the options within the user's field of view to be rendered, thus significantly reducing the number of options that need to be rendered.

[0037] As web applications become increasingly complex, there is a growing need to display long list options in user interfaces. Directly rendering such long lists can significantly degrade page performance and negatively impact user experience. This issue can be addressed by using a virtual scrolling mechanism. Virtual scrolling only renders options within the user's visible area, greatly reducing the number of options that need to be rendered, improving the rendering efficiency of the list, and ultimately ensuring page performance.

[0038] Although various virtual scrolling libraries exist in front-end development frameworks such as Veu.js to implement virtual scrolling mechanisms, these libraries often cannot be seamlessly integrated with human-computer interaction interface frameworks (i.e., UI frameworks), such as Element UI framework. This is especially true for dropdown selection components commonly used in digital form design, such as the Select component. As a result, when building dropdown menus based on UI frameworks, the virtual scrolling mechanism cannot be applied. Consequently, when loading long option lists through dropdown menus, the rendering efficiency of dropdown menus is low, resulting in slow response speed, poor smoothness, and severely impacting the display performance of dropdown menus.

[0039] To address at least one of the aforementioned problems in related technologies, embodiments of this application provide a rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product. The rendering method is applied to a dropdown selection component, which includes a dropdown selection plugin for a human-computer interaction interface framework (e.g., the Element UI library) and a virtual scrolling library, specifically the virtual scrolling plugin in the vue-virtual-scroller library. In response to a user's operation to load content from a dropdown menu, a first list of options to be loaded and the position index of the selected item in the first list are determined. Then, the dropdown selection plugin determines whether the virtual scrolling mechanism is enabled. If enabled, the virtual scrolling plugin is invoked. Finally, the virtual scrolling plugin renders the dropdown menu based on the determined first list of options and position index. This allows the application of a virtual scrolling mechanism in a dropdown menu within a human-computer interaction framework, reducing the number of options that need to be rendered when loading a long list of options from a dropdown menu. This improves the rendering efficiency of the dropdown menu, speeds up response time, enhances smoothness, and ultimately improves the display performance of the dropdown menu.

[0040] To better understand the rendering method, apparatus, electronic device, computer-readable storage medium, and computer program product provided in the embodiments of this application, the application environment applicable to the embodiments of this application is described below.

[0041] Please see Figure 1 , Figure 1 This is a schematic diagram illustrating an application environment for the rendering method provided in this application embodiment. As one implementation method, the rendering method provided in this application embodiment can be applied to an electronic device, wherein the electronic device can be as follows: Figure 1 The terminal 120 shown can be connected to the server 110 via the network 130. The network 130 is used as a medium to provide a communication link between the server 110 and the terminal 120. The network 130 may include various connection types, such as priority communication links, wireless communication links, etc. The embodiments of this application do not limit this.

[0042] It should be understood that Figure 1 The server 110, terminal 120, and network 130 shown are merely illustrative. Depending on the implementation requirements, the server, network, and terminal can be any type of data server. For example, server 110 can be a physical server or a server cluster consisting of multiple servers, and terminal 120 can be a smartphone, tablet, desktop computer, laptop, smartwatch, or other device. It is understood that in this embodiment, multiple terminals 120 can be allowed to access server 110 simultaneously.

[0043] In some embodiments, the terminal 120 may, in response to a content loading operation for a drop-down menu, determine a first option list and the position index of the selected item in the first option list; if the virtual scrolling mechanism is enabled, invoke the virtual scrolling plugin through the drop-down selection plugin; and render the drop-down menu through the virtual scrolling plugin based on the first option list and the position index.

[0044] Before introducing the rendering method provided in the embodiments of this application, the drop-down selection component of the embodiments of this application will be described first.

[0045] The drop-down selection component provided in this application embodiment includes: a drop-down selection plugin and a virtual scrolling plugin; wherein, the drop-down selection plugin is used to call the virtual scrolling plugin when it is determined from the rendering control parameters that the virtual scrolling mechanism is enabled;

[0046] A virtual scrolling plugin used to render dropdown menus based on a first list of options and a position index.

[0047] It should be noted that the dropdown selection plugin is a plugin within a human-computer interaction interface framework, such as the el-select component in the Ellement UI framework. The virtual scrolling plugin is a plugin within a virtual scrolling library, which can be a virtual scrolling library applicable to front-end development frameworks, such as the vue-virtual-scroller library. Therefore, the virtual scrolling plugin in this embodiment can be the RecycleScroller plugin.

[0048] In some embodiments of this application, the drop-down selection component may further include: an operation response unit, configured to determine a first option list and the position index of the selected item in the first option list in response to a content loading operation for the drop-down menu.

[0049] In this embodiment, the activation of the virtual scrolling mechanism can be determined by rendering control parameters. These parameters define the data and methods required for rendering, such as scrolling control parameters and option size control parameters, thereby enabling control over the rendering of the dropdown menu. In some embodiments, the rendering control parameters can also be integrated within the dropdown selection component.

[0050] The operation response unit contains sub-units for determining the data needed for rendering the dropdown menu, as well as various sub-units for processing the operation. These include, for example, a state storage sub-unit, a data determination sub-unit, and an event response sub-unit.

[0051] In some embodiments of this application, the operation response unit may include: a state storage subunit, a data determination subunit, and an event response subunit. The state storage subunit records the state data of the dropdown selection component; the data determination subunit determines the data needed to render the dropdown menu based on the current state data of the dropdown selection component; and the event response subunit performs preliminary processing of the dropdown menu operations, which can be understood as a callback function when the user interacts with the dropdown menu. It should be noted that the subunits here can be understood as functions or containers used to implement corresponding functions. For example, the state storage subunit can be understood as a container for storing state data, the data determination subunit can be understood as a function that determines the data needed for rendering the dropdown menu, and the response processing subunit can be understood as a callback function triggered when searching in the dropdown menu, or a callback function triggered when the visibility state of the dropdown menu changes, such as when the dropdown menu is shown or hidden.

[0052] In some embodiments, the status data of the dropdown selection component may include at least: a status search identifier and a third option list determined from the second option list based on a key string. The second option list is the original option list, and the third option list is the option list obtained after filtering out some options; the status search identifier is used to indicate whether the search status is enabled.

[0053] The data required to render the dropdown menu includes at least: the index of the selected item in the first option list, and the first option list passed to the virtual scrolling plugin.

[0054] In some embodiments of this application, the rendering control parameters in the dropdown selection component include: scrolling control parameters, dropdown list source parameters, size control parameters, identifier field parameters, option record parameters, display field parameters, and binding field parameters.

[0055] The scrolling control parameter indicates the enabled status of the virtual scrolling mechanism, i.e., it controls whether the virtual scrolling mechanism is enabled. When the virtual scrolling mechanism is enabled, the dropdown selection plugin will invoke the virtual scrolling plugin to implement the virtual scrolling mechanism.

[0056] The dropdown list source parameter is used to store the options in the second option list, which is the original list of options. In other words, this type is the option data source for the dropdown selection plugin, and it should be an array of objects, each representing an option.

[0057] Size control parameters are used to provide the size of the options when displayed, such as specifying a fixed height (in pixels) for each option. Values ​​of this type are used to help calculate the position of each option in the view.

[0058] The identifier field parameter specifies the field that uniquely identifies the option. In other words, the uniqueness of each option can be determined by a value of this type.

[0059] The option record parameter is used to record the value of the selected item. This type supports both single-selection and multi-selection modes. In single-selection mode, the value of this type can be a string or a number; in multi-selection mode, the value of this type can be an array containing the selected values.

[0060] The display field parameter indicates the field used when the option is displayed. In other words, when the user needs to view the option, this type of value will be used to display as the "name" of the option.

[0061] The `bindField` parameter specifies the field to which the dropdown selection component should bind to the actual value of the option. The actual value here refers to the data value that the dropdown selection component should reflect and pass when the user selects an option from the dropdown menu. For example, in a product list, the user can select a product by name, and the dropdown selection component processes the selection based on the product's ID; this ID can be used as the actual value. Additionally, when an option is selected, this type of value can be passed to the parent component as the value of the option's record type.

[0062] This concludes the explanation of the dropdown selection component.

[0063] The rendering method provided in the embodiments of this application will be described below. This method is applied to the drop-down selection component mentioned above. It should be noted that the drop-down selection component in this application can be configured in an electronic device, which can be a terminal.

[0064] See Figure 2 , Figure 2 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 1 . will combine Figure 2The steps shown are explained below.

[0065] Step 101: In response to the content loading operation for the drop-down menu, determine the first option list and the position index of the selected item in the first option list.

[0066] This embodiment of the application is implemented in a scenario where a user loads an option list in a drop-down menu for viewing or operation. First, the electronic device detects whether the user has performed a content loading operation on the drop-down menu, such as opening the drop-down menu by clicking its expand icon or scrolling through it to refresh the displayed content. When the electronic device detects a user's content loading operation on the drop-down menu, it can invoke the operation response unit in the drop-down selection component to determine a first option list and the position index of the selected item in the first option list based on the user's content loading operation.

[0067] It should be noted that the first option list here refers to the list of options to be loaded into the drop-down menu; that is, the drop-down menu is the display medium for the first option list. In this embodiment, the first option list can be composed of the original option list, i.e., the second option list, or it can be a list composed of options filtered from the second option list. The specific implementation of the first option list is affected by whether the search state is enabled.

[0068] Determining the position index of the selected item in the first option list can be understood as determining the order in which the selected item appears in the first option list. Based on this order of appearance and the fixed size of the option when it is displayed, the position of the selected item in the first option list can be determined.

[0069] The selected item can be determined based on the user's action of loading content into the dropdown menu. When the content loading action is to open the dropdown menu, the selected item can be the default item, such as the first item in the first option list. However, when the content loading action is to scroll through the dropdown menu, the selected item can be determined based on the scroll offset of the scroll bar, the options displayed within the visible area, and the size of the options.

[0070] See Figure 3 , Figure 3 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 2 In some embodiments of this application, Figure 2 Step 101, which is to determine the first option list and the position index of the selected item in the first option list in response to the content loading operation for the drop-down menu, can be achieved through the following processing:

[0071] Step 1011: In response to the content loading operation for the drop-down menu, read the value of the search status field.

[0072] The dropdown selection component can determine whether the user has performed a content loading operation on the dropdown menu through the event response subunit of the action response unit. Once the event response subunit determines that the user has performed a content loading operation, it reads the value of the search state field stored in the state storage subunit, calls the data determination subunit, and then retrieves the read search state field value.

[0073] It should be noted that the value of the search status field can be used to indicate whether the user has enabled search status. For example, the search status field can be denoted as isSearch. If the value of isSearch is 1 or true, it indicates that search status is enabled; if the value of isSearch is 0 or false, it indicates that search status is not enabled.

[0074] Step 1012: Based on the value of the search status field, determine the first option list from the second option list and the third option list.

[0075] The data determination sub-unit in the dropdown selection component can determine whether the user has enabled search status based on the value of the obtained search status field, and thus determine which option list from the second and third option lists should be displayed in the dropdown menu.

[0076] It should be noted that the second option list is the original option list, while the third option list is a list composed of a subset of options selected from the second option list. In other words, the third option list is the list of options the user receives after the option search; therefore, the number of options in the third option list is less than or equal to the number of options in the second option list. The process of determining the third option list will be explained below.

[0077] Therefore, in some embodiments, Figure 3 Step 1012, namely determining the sub-unit through data, and determining the first option list from the second and third option lists based on the value of the search status field, can be achieved through the following processing: determining the sub-unit through data and performing the following operations: if the value of the search status field indicates that the search status is enabled, the third option list is determined as the first option list; if the value of the search status field indicates that the search status is not enabled, the second option list is determined as the first option list.

[0078] In other words, if the user has enabled search mode, the data determination subunit will use the filtered third option list as the final first option list displayed to the user. If the user has not enabled search mode, the data determination subunit will use the original second option list as the final first option list displayed to the user. In this way, the list of options displayed to the user can be determined according to the user's needs.

[0079] Step 1013: Determine the position index of the selected item in the first option list.

[0080] After determining the first option list, the data determination subunit also needs to determine the position index of the user's selected item within the first option list. At this point, the data determination subunit can use the actual values ​​of each option in the first option list, as well as the value of the selected item, to determine the position index of the selected item.

[0081] See Figure 4 , Figure 4 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 3 In some embodiments of this application, Figure 3 Step 1013, which involves determining the index of the selected item in the first option list, can be achieved through the following process:

[0082] Step 10131: For each option in the first option list, determine the first actual value.

[0083] For each option in the first option list, the data determination subunit reads the value of the binding field type in the rendering control parameters. This binding field type is used to specify the field that is bound to the actual value of the option. Thus, the value of the binding field type is the first actual value of each option.

[0084] For example, when the bound field type is valueField, the data determination sub-unit can obtain its value through item[this.valueField], which is the first actual value.

[0085] Step 10132: Determine the first actual value that is the same as the value of the selected item in the first actual value as the second actual value.

[0086] After obtaining multiple first actual values ​​that correspond one-to-one with the multiple options in the first option list, the data determination subunit compares each actual value with the value of the selected item, and determines the first actual value that is the same as the value of the selected item from the multiple first actual values, and uses these first actual values ​​as the second actual values.

[0087] It's important to note that the value of the selected item is actually determined based on the value of the bound field type. More specifically, if an option is selected, that is, when an option is determined to be a selected item, the value of the bound field type of that option will be determined as the value of the option record type to record the user's selection.

[0088] Step 10133: Determine the index of the second actual value in the first option list as the position index of the selected item in the first option list.

[0089] The data determination subunit retrieves the index of the option corresponding to the second actual value in the first option list and uses the retrieved index as the position index of the selected item. This completes the determination of the selected item's position index, facilitating the subsequent rendering of the dropdown menu based on the first option list and the position index.

[0090] It is understood that in this embodiment of the application, the user can be automatically determined to have enabled the search state based on the value of the search state field. When the user has enabled the search state, the list of options determined by the key string entered by the user during the search will be used as the final list of options displayed to the user. This enables the user to be provided with only options that match the key string, which not only further reduces the number of options rendered, but also brings convenience to the user's operation.

[0091] Step 102: With the virtual scrolling mechanism enabled, select the virtual scrolling plugin from the drop-down menu.

[0092] The dropdown selection plugin reads the scroll control type value from the rendering control parameters and determines whether the virtual scrolling mechanism is enabled based on this value. If the scroll control type value indicates that the virtual scrolling mechanism is enabled, the dropdown plugin will invoke the virtual scrolling plugin to render the dropdown menu subsequently. If the scroll control type value indicates that the virtual scrolling mechanism is disabled, the dropdown plugin will render the dropdown menu automatically.

[0093] In this embodiment, the virtual scrolling plugin can be invoked by setting a calling interface in the drop-down selection plugin and using this calling interface, or by setting an access relationship between the drop-down selection plugin and the virtual scrolling plugin and using this access relationship to invoke it.

[0094] In some embodiments, the dropdown selection plugin can be a pre-packaged plugin. To avoid altering its internal structure, when encapsulating the dropdown selection plugin and the virtual scrolling plugin into a dropdown selection component, the dropdown selection plugin can be treated as the parent component, and the virtual scrolling plugin as the child component. This can be achieved by setting component reference attributes, such as the `$refs` attribute, on the child component. The parent component can then call the child component through these reference attributes. Similarly, the dropdown selection plugin can call the virtual scrolling plugin through the reference attributes added to the virtual scrolling plugin.

[0095] Step 103: Render the drop-down menu using a virtual scrolling plugin based on the first option list and position index.

[0096] The virtual scrolling plugin renders the options to be displayed in the drop-down menu based on the rendering control parameters, the determined first option list, and the position index. It also automatically moves the scroll bar of the drop-down menu to the position of the selected item, thus completing the rendering of the drop-down menu so that users can see the selected item and its nearby options in the drop-down menu.

[0097] In some embodiments of this application, Figure 2 Step 103, namely rendering the dropdown menu using a virtual scrolling plugin based on the first option list and position index, can be achieved through the following processing: using the virtual scrolling plugin, perform the following operations: read the size of the option when displayed from the rendering control parameters; calculate the position of the selected item based on the size and position index of the option when displayed; calculate the index range of the option displayed within the visible range of the dropdown menu based on the position index and the size of the option when displayed; and render the dropdown menu based on the index range.

[0098] Here, the virtual scrolling plugin reads the size control type value from the rendering control parameters. The obtained value is the size of the option when displayed, which can include at least one of height and width. Based on the read size and position index, the virtual scrolling plugin calculates the position of the selected item. Then, based on the size of the visible area and the size of the option when displayed, it determines the number of options that can be displayed within the visible area. Next, based on this number and the position index of the selected item, it filters out some options near the selected item and includes them, along with the selected item, as options to be displayed. Using the indices of these options, it determines an index range. Finally, the virtual scrolling plugin renders the options to be displayed in the dropdown menu based on this index range and moves the scroll bar to the position of the selected item after rendering is complete.

[0099] Understandably, compared to related technologies, virtual scrolling libraries often cannot be seamlessly integrated with human-computer interaction (HCI) frameworks. This results in the inability to apply virtual scrolling mechanisms when building dropdown menus based on HCI frameworks, leading to low rendering efficiency of dropdown menus when loading long option lists, severely impacting display performance. The dropdown selection component in this embodiment encapsulates both a dropdown selection plugin from the HCI framework and a virtual scrolling plugin from the virtual scrolling library. During dropdown menu rendering, the necessary data for rendering can be determined based on the user's content loading operation. Then, the dropdown selection plugin determines whether the virtual scrolling mechanism is enabled. If enabled, the virtual scrolling plugin from the virtual scrolling library is called to render the dropdown menu using the obtained data. This ensures that the virtual scrolling mechanism can be applied correctly when building dropdown menus based on the HCI framework, thereby improving rendering efficiency, especially for long option lists, and ultimately enhancing dropdown menu display performance.

[0100] The process of determining the third option list will be explained below.

[0101] In some embodiments of this application, in Figure 2 In step 101, prior to determining the first option list and the position index of the selected item in the first option list in response to the content loading operation for the drop-down menu, the method further includes the following processing: in response to the information input operation for the search area, obtaining the key string from the search area through the drop-down selection plugin; determining the options in the second option list containing the key string as matching options for the key string; and generating a third option list based on the matching options.

[0102] In this embodiment, the event response subunit in the operation response unit can read the value of the display field parameter from the rendering control parameters for each option in the second option list; the event response subunit can determine the options in the second option list whose display field parameter values ​​contain the key string as the key string matching options; finally, the event response subunit can integrate the matching options into a third option list and modify the value of the search status field in the status storage subunit to indicate that the search status is enabled.

[0103] In other words, when a user enters a keyword string in the search area, the dropdown selection plugin retrieves the keyword string and passes it to the event response subunit. Then, for each option in the original second option list, the event response subunit retrieves the value of the display field parameter in the rendering control parameters and compares it with the keyword string to determine if it contains the keyword string. If the display field parameter value of an option contains the keyword string, the event response subunit will treat that option as a matching option. Next, the event response subunit uses all matching options to generate a third option list. This third option list only contains options related to the keyword string. Simultaneously, the event response subunit modifies the search status flag in the state storage subunit to determine if the user has enabled search functionality. This completes the process of determining the third option list.

[0104] It should be noted that if the user closes the drop-down menu when search mode is enabled, the third option list needs to be cleared so that the user can return to the original second option list the next time the drop-down menu is triggered.

[0105] In other words, in some embodiments of this application, Figure 2 After step 103, that is, after rendering the drop-down menu using a virtual scrolling plugin based on the first option list and the position index, the method may further include the following processing: clearing the third option list in response to a menu hide operation on the drop-down menu.

[0106] When a user closes the dropdown menu by clicking the close button or by using a close command, the event response subfield will reset the third option list to an empty list. At the same time, it will reset the value of the search status field in the state storage sub-unit from indicating search status enabled to search status disabled, so that when the dropdown menu is reopened, the original second option list can be identified as the first option list displayed to the user.

[0107] In some embodiments of this application, the data determining subunit determines the second option list as the first option list, thereby the first option list may include the second option list. In this case, based on Figure 2 See Figure 5 , Figure 5 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 4 . Figure 2 After step 103, that is, after rendering the dropdown menu using the virtual scrolling plugin based on the first option list and position index, the method may further include the following processing:

[0108] Step 104: Using the virtual scrolling plugin, record the position index of the selected item in the second option list to obtain memory data.

[0109] The virtual scrolling plugin records the index of the selected item's position in the second option list, thus obtaining memory data.

[0110] Step 105: In response to the menu hide operation for the drop-down menu, hide the drop-down menu.

[0111] If the user hides the dropdown menu, that is, when the user needs to close the dropdown menu, the event response subunit can change the dropdown menu from a visible state to a hidden state through the callback function triggered when the dropdown menu is hidden, so that the dropdown menu will no longer be displayed.

[0112] Step 106: In response to the reload operation for the drop-down menu, invoke the virtual scrolling plugin via the drop-down selection plugin.

[0113] After the dropdown menu is closed, the dropdown selection component will detect whether the user has reloaded the dropdown menu. This reload operation can be determined through the event response subunit. If the dropdown menu has been reloaded, the event response subunit can call the dropdown selection plugin to build the dropdown menu, and further call the virtual scroll plugin to re-render the dropdown menu.

[0114] It should be noted that the following situations can be considered as a reload operation for the drop-down menu: when the user reopens the drop-down menu within a preset time after closing it, or when the user clicks the reload flag set for the drop-down menu, such as the "Reload last content" flag, the event response subunit can determine that the user has performed a reload operation on the drop-down menu.

[0115] Step 107: Using the virtual scrolling plugin, determine the position index of the selected item in the second option list from the memory data, and re-render the drop-down menu based on the second option list and the position index using the virtual scrolling plugin.

[0116] The virtual scrolling plugin reads the memory data to determine the position index of the selected item in the second option list, in order to render the drop-down menu. The rendering process of the drop-down menu by the virtual scrolling plugin is similar to that in step 103, and will not be repeated here.

[0117] It is understood that, in this embodiment of the application, by memorizing the position index of the selected item, the scroll bar can be restored to its original position and the options previously viewed by the user can be displayed directly when the drop-down menu is reopened, thereby realizing the scroll position memory function and further improving the user experience.

[0118] based on Figure 2 See Figure 6 , Figure 6 This is a flowchart illustrating the rendering method provided in the embodiments of this application. Figure 5 In some embodiments of this application, in Figure 2 Following step 101, i.e., in response to the content loading operation for the dropdown menu, after determining the first option list and the position index of the selected item in the first option list, the method may further include the following processing:

[0119] Step 108: If the virtual scrolling mechanism is not enabled, render the drop-down menu using the drop-down selection plugin based on the first option list and position index.

[0120] In other words, if the virtual scrolling mechanism is not enabled, the dropdown selection plugin will be used as the default rendering method. The dropdown menu options will be rendered using the determined first option list and the position index of the selected item, and the scroll bar will be moved to the position of the selected item.

[0121] The following will describe an exemplary application of the embodiments of this application in a real-world application scenario.

[0122] This application embodiment is implemented in a scenario where a dropdown menu is rendered using a Select component (referred to as a dropdown selection plugin) that combines a UI framework (referred to as a human-computer interaction interface framework) with a dropdown selection component using virtual scrolling technology. It should be noted that the dropdown selection component in this application embodiment is developed based on Vue.js, utilizes the RecycleScroller plugin (referred to as a virtual scrolling plugin) from the vue-virtual-scroller library (referred to as a virtual scrolling library) to implement virtual scrolling functionality, and is deeply integrated with the Select component of Element UI.

[0123] The drop-down selection component in the embodiments of this application will be described below. Figure 7 This is a schematic diagram of a drop-down selection component provided in an embodiment of this application. See also... Figure 7The dropdown selection component 7-1 can include the component's receiveable properties 7-11 (called rendering control parameters), namely the props property; the method property 7-12, namely the methods property; the data property 7-13, namely the data property; the computed property 7-14, namely the computed property (the methods property, the data property, and the computed property are collectively called the action response unit), and the component 7-15. The component's receiveable properties 7-11 can include the isVritual parameter 7-111 (called scroll control parameter), the options parameter 7-112 (called dropdown list source parameter), the itemSize parameter 7-113 (called size control parameter), the keyField parameter 7-114 (called identifier field parameter), the value parameter 7-115 (called option record parameter), the labelField parameter 7-116 (called display field parameter), and the valueField parameter 7-117 (called binding field parameter).

[0124] The `isVritual` parameter (7-111) controls whether virtual scrolling is enabled. It is a boolean value and defaults to `false`. If set to `true`, the dropdown selection component (7-1) will use virtual scrolling to optimize the rendering of long option lists and improve performance. If set to `false`, the default rendering method will be used.

[0125] The `options` parameter (7-112) is the data source for the options in the `Select` component. It is an array, with a default value of `() => []` (i.e., a function that returns an empty array). In other words, this parameter is an array of objects, each representing an option. Each object contains at least two properties, such as a name for display and a value for value binding. The name of each property can be configured through other parameters, such as `labelField` (7-116) and `valueField` (7-117).

[0126] The `itemSize` parameter (7-113) specifies the fixed height (called the size) of each option. It is a numeric type with a default value of 34. This parameter helps calculate the position of each option in the view, ensuring that options within the visible area are rendered accurately when scrolling.

[0127] The keyField parameter (7-114) specifies the name of the field in the option object that serves as a unique identifier. It is of string type and defaults to value. In virtual scrolling technology, this parameter helps determine the uniqueness of each option.

[0128] The `value` parameter (7-115) is used to identify the currently selected value or array of values, and its type is [string, number, array]. The dropdown selection component in this embodiment supports both single-selection and multi-selection modes. In single-selection mode, the value of `value` parameter (7-115) is a string or number; in multi-selection mode, the value of `value` parameter (7-115) is a number containing the selected value. This parameter is typically used for two-way data binding and synchronization with the parent component's state.

[0129] The `labelField` parameter (7-116) specifies the name of the text field used for display in the option object; that is, the name displayed. Its type is string, and the default value is `label`. The content of this parameter is displayed to the user when the option is viewed.

[0130] The `valueField` parameter (7-117) specifies the name of the field in the option object used to bind the actual value. It is of string type and defaults to `value`. If the option is selected, the value of this parameter will be passed to the parent component as the component's `value`.

[0131] The method property 7-12 contains the filterMethod method 7-121 and the visibleChange callback function 7-122.

[0132] Data attribute 7-13 includes the searchList attribute 7-131 and the isSearch attribute 7-132. The searchList attribute 7-131 is used to record the filtered data (i.e., the third option list), and the isSearch attribute 7-132 is used to record whether the current state is searched; its value is true if it is, and false otherwise.

[0133] Computed properties 7-14 include the items property 7-141 and the currentIndex property 7-142. The items property 7-141 is used to record the data passed to the RecycleScroller. When the isSearch property 7-132 is true, it returns searchList; when it is false, it returns options. The currentIndex property 7-142 is used to record the position of the currently selected item (called the selected item) in the list.

[0134] Components 7-15 include Select component 7-151 and RecycleScroller component 7-152.

[0135] The rendering process of this application embodiment will now be described with reference to the drop-down selection component provided in the embodiments of this application.

[0136] In this embodiment of the application, a RecycleScroller component is introduced to implement virtual scrolling. It requires configuring itemSize, specifying a unique representation field for each option through keyField, and providing an array of items containing options.

[0137] First, check the value of `this.isSearch`. If it is true, it means the user is searching, and return `searchList`, which is the list of options filtered based on the keywords entered by the user (called the keyword string) (called the third option list). If it is false, it means the user is not searching, and return the original list of options (called the second option list).

[0138] When the drop-down menu is displayed, calculate the index currentIndex of the selected item (called the position index) and use the scrollToPosition method to scroll to that position to ensure that the user sees the selected item and the items nearby.

[0139] More specifically, when the dropdown menu becomes visible, it checks if `currentIndex` is equal to -1. If `currentIndex` is -1, it means no item is selected or the corresponding index is not found. If `currentIndex` is not -1, the scroll positioning operation is delayed using the `$nextTick` method. `$nextTick` ensures that the callback is executed only after the DOM update is complete. That is, when rendering the dropdown menu, the page rendering of the dropdown menu is completed first, and then the scrollbar is scrolled to the specified position. In the `$nextTick` callback, `this.$recycleScroller.scrollToPosition(this.currentIndex*this.itemSize)` is used to scroll to the position of the currently selected item. Here, `this.currentIndex*this.itemSize` is the calculated position to which the scrollbar needs to scroll, i.e., the position of the currently selected item. In this way, when the user opens the dropdown menu, the view can automatically position itself to the currently selected item.

[0140] The index of the selected item, `currentIndex`, is found using the following logic: First, the type of `value` is checked. If it is an array (in the case of multiple selections), the first element of the array is taken as the current value. If it is not an array, its value is used directly. Next, the `findIndex` method is used to traverse the `items` list. Here, the `items` list may be the original list of options or the list after the search, depending on the value of `isSearch`. For each item (called an option) in the `items` list, its value field (called the first actual value) is obtained and compared with `value`. If a match is found, `findIndex` returns the index of that match in the list. If no match is found, -1 is returned.

[0141] The following explains the process of determining the searchList when search is enabled. The filterMethod(words) method mentioned above is called when the user enters search keywords. Its function is to filter matching options based on the user's input keywords. Here, words are the keywords the user enters in the search box (called the search area), and this parameter is passed in by the Select component when the user enters the information.

[0142] During filtering, the `filterMethod()` method filters the `options` array, which is passed from the parent component and contains all the option data. For each item in `options`, the label for each option is obtained based on the `labelField`, which is the text displayed to the user. Then, it is determined whether the label contains the keyword entered by the user. If it does, it means that the option matches the search keyword, and thus the option is kept in the filtered list.

[0143] After filtering, the matching options are collected in `searchList`, and `isSearch=true` is set to indicate that the dropdown selection component is in search mode. It's important to note that the determined `searchList` is cleared when the dropdown menu is closed. This ensures that when the user closes and reopens the dropdown menu, they are returned to the original list of options, rather than continuing to see the search results.

[0144] In this embodiment of the application, when the virtual scrolling mechanism is enabled, the API of the RecycleScroller component can be used to record the index of the user-selected item. When the drop-down menu is reopened, the user's previous viewing position is restored based on the remembered index (called memory data) and the preset option height.

[0145] The structure of the electronic device according to the embodiments of this application will be described below.

[0146] See Figure 8 , Figure 8 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Figure 8 The illustrated electronic device 400 includes at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in the electronic device 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to implement communication between these components. In addition to a data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for clarity, ... Figure 8 The general labeled all buses as Bus System 440.

[0147] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor, etc.

[0148] User interface 430 includes one or more output devices 431 that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0149] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state storage, hard disk drives, optical disk drives, etc. The memory 450 may optionally include one or more storage devices physically located away from the processor 410.

[0150] The memory 450 may include volatile memory or non-volatile memory, or both. The non-volatile memory may be read-only memory (ROM), and the volatile memory may be random access memory (RAM). The memory 450 described in this application embodiment is intended to include any suitable type of memory.

[0151] In some embodiments, memory 450 is capable of storing data to support various operations, examples of which include programs, modules, and data structures or subsets or supersets thereof, as illustrated below.

[0152] Operating system 451 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, driver layer, etc., for implementing various basic business functions and handling hardware-based tasks;

[0153] The network communication module 452 is used to reach other electronic devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 including: Bluetooth, WiFi, and Universal Serial Bus (USB), etc.

[0154] Presentation module 453 is configured to enable the presentation of information (e.g., a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 (e.g., a display screen, a speaker, etc.) associated with user interface 430;

[0155] The input processing module 454 is used to detect and translate one or more user inputs or interactions from one or more input devices 432.

[0156] In some embodiments, the rendering apparatus provided in this application can be implemented in software. Figure 8 A rendering device 455 stored in memory 450 is shown. This device can be software in the form of programs and plugins, including the following software modules: an operation response unit 4551, a dropdown selection plugin 4552, and a virtual scrolling plugin 4553. These modules are logically linked and can therefore be arbitrarily combined or further separated according to their implemented functions. The functions of each module will be described below.

[0157] In other embodiments, the rendering apparatus provided in this application can be implemented in hardware. As an example, the rendering apparatus provided in this application can be a processor in the form of a hardware decoding processor, which is programmed to execute the rendering method provided in this application. For example, the processor in the form of a hardware decoding processor can be one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field-programmable gate arrays (FPGAs), or other electronic components.

[0158] In some embodiments, an electronic device can implement the rendering method provided in this application by running various computer-executable instructions or computer programs. For example, computer-executable instructions can be microprogram-level commands, machine instructions, or software instructions. Computer programs can be native programs or software modules in an operating system; they can be native applications (APPs), i.e., programs that need to be installed in the operating system to run, such as spreadsheet apps; or they can be applets that can be embedded in any APP, i.e., programs that only need to be downloaded to a browser environment to run. In summary, the aforementioned computer-executable instructions can be any form of instruction, and the aforementioned computer programs can be any form of application, module, or plugin.

[0159] It is understood that in the embodiments of this application, user information, such as selected items and related data, is involved. When the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with relevant laws, regulations and standards.

[0160] The following description continues to illustrate the exemplary structure of the rendering apparatus 455 provided in the embodiments of this application as a software module. In some embodiments, such as Figure 8 As shown, a drop-down selection component is configured in the rendering device 455 stored in the memory 450. The drop-down selection component includes an operation response unit 4551, a drop-down selection plugin 4552, and a virtual scrolling plugin 4553. The drop-down selection plugin 4552 is a plugin in the human-computer interaction interface framework, and the virtual scrolling plugin 4553 is a plugin in the virtual scrolling library.

[0161] The operation response unit 4551 is used to respond to the content loading operation of the drop-down menu, determine the first option list, and the position index of the selected item in the first option list;

[0162] The dropdown selection plugin 4552 is used to call the virtual scrolling plugin when the virtual scrolling mechanism is enabled;

[0163] The virtual scrolling plugin 4553 is used to render the drop-down menu based on the first option list and the position index.

[0164] In the above scheme, the operation response unit 4551 is further configured to, in response to the content loading operation for the drop-down menu, read the value of the search status field; determine the first option list from the second option list and the third option list based on the value of the search status field; wherein the third option list is a list composed of some options filtered from the second option list; and determine the position index of the selected item in the first option list.

[0165] In the above scheme, the operation response unit 4551 is further configured to determine the third option list as the first option list when the value of the search status field indicates that the search status is enabled; and to determine the second option list as the first option list when the value of the search status field indicates that the search status is not enabled.

[0166] In the above scheme, the operation response unit 4551 is further configured to determine a first actual value for each option in the first option list; determine the first actual value that is the same as the value of the selected item in the first actual value as a second actual value; and determine the index corresponding to the second actual value in the first option list as the position index of the selected item in the first option list.

[0167] In the above solution, the drop-down selection plugin 4552 is also used to retrieve key strings from the search area in response to information input operations in the search area;

[0168] The operation response unit 4551 is further configured to determine the options in the second option list that contain the key string as matching options of the key string; and generate the third option list based on the matching options.

[0169] In the above scheme, the operation response unit 4551 is also used to clear the third option list in response to the menu hiding operation of the drop-down menu.

[0170] In the above scheme, the first option list includes: a second option list;

[0171] The virtual scrolling plugin 4553 is also used to record the position index of the selected item in the second option list to obtain memory data;

[0172] The dropdown selection plugin 4552 is also used to hide the dropdown menu in response to a menu hiding operation for the dropdown menu; and to invoke the virtual scrolling plugin in response to a reload operation for the dropdown menu.

[0173] The virtual scrolling plugin 4553 is further configured to determine the position index of the selected item in the second option list from the memory data, and re-render the drop-down menu based on the second option list and the position index.

[0174] In the above scheme, the virtual scrolling plugin 4553 is further configured to read the size of the option when it is displayed from the rendering control parameters; calculate the position of the selected item based on the size of the option when it is displayed and the position index; calculate the index range of the option displayed within the visible range of the drop-down menu based on the position index and the size of the option when it is displayed; and render the drop-down menu based on the index range.

[0175] In the above scheme, the drop-down selection plugin 4552 is also used to render the drop-down menu based on the first option list and the position index when the virtual scrolling mechanism is not enabled.

[0176] This application provides a computer program product, which includes a computer program or computer-executable instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer-executable instructions or computer program from the computer-readable storage medium and executes the computer-executable instructions or computer program, causing the electronic device to perform the rendering method described above in this application.

[0177] This application provides a computer-readable storage medium storing computer-executable instructions or a computer program. When the computer-executable instructions or the computer program are executed by a processor, the processor will execute the rendering method provided in this application. For example, ... Figure 2 The rendering method shown.

[0178] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or it may be a variety of devices including one or any combination of the above-mentioned memories.

[0179] In some embodiments, computer-executable instructions may take the form of programs, software, software modules, scripts, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as stand-alone programs or as modules, components, subroutines, or other units suitable for use in a computing environment.

[0180] As an example, computer-executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts in a Hyper Text Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple co-located files (e.g., files that store one or more modules, subroutines, or code sections).

[0181] As an example, computer-executable instructions can be deployed to execute on a single electronic device, or on multiple electronic devices located in one location, or on multiple electronic devices distributed across multiple locations and interconnected via a communication network.

[0182] In summary, in this embodiment, the dropdown selection component encapsulates both a dropdown selection plugin from the human-computer interaction interface framework and a virtual scrolling plugin from the virtual scrolling library. During the dropdown menu rendering process, the necessary data for rendering can be determined based on the user's content loading operation. Then, the dropdown selection plugin determines whether the virtual scrolling mechanism is enabled. If the virtual scrolling mechanism is enabled, the virtual scrolling plugin from the virtual scrolling library is called to render the dropdown menu using the obtained data. This ensures that the virtual scrolling mechanism can be applied correctly when building a dropdown menu based on the human-computer interaction interface framework, thereby improving the rendering efficiency of the dropdown menu, especially when loading long option lists, and ultimately enhancing the display performance of the dropdown menu.

[0183] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of this application are included within the scope of protection of this application.

Claims

1. A rendering method, characterized by, The method is applied to a dropdown selection component, which includes a dropdown selection plugin and a virtual scrolling plugin. The dropdown selection plugin is a plugin within a human-computer interaction interface framework, and the virtual scrolling plugin is a plugin within a virtual scrolling library. In response to a content loading operation for a drop-down menu, determine a first list of options and the position index of the selected item in the first list of options; When the virtual scrolling mechanism is enabled, the virtual scrolling plugin is invoked via the dropdown selection plugin; Based on the first option list and the position index, the drop-down menu is rendered using the virtual scrolling plugin.

2. The method of claim 1, wherein, The step of determining a first option list and the position index of the selected item in the first option list in response to a content loading operation for a drop-down menu includes: In response to the content loading operation for the drop-down menu, read the value of the search status field; Based on the value of the search status field, the first option list is determined from the second option list and the third option list; wherein the third option list is a list composed of a portion of the options filtered from the second option list; Determine the position index of the selected item in the first option list.

3. The method of claim 2, wherein, Determining the first option list from the second and third option lists based on the value of the search status field includes: When the value of the search status field indicates that the search status is enabled, the third option list is determined to be the first option list; If the value of the search status field indicates that the search status is not enabled, the second option list is determined to be the first option list.

4. The method of claim 2, wherein, Determining the position index of the selected item in the first option list includes: For each of the options in the first option list, determine a first actual value; The first actual value that is the same as the value of the selected item in the first actual value is determined as the second actual value; The index corresponding to the second actual value in the first option list is determined as the position index of the selected item in the first option list.

5. The method of claim 2, wherein, Before determining the first option list and the position index of the selected item in the first option list in response to a content loading operation for the drop-down menu, the method further includes: In response to an input operation for information in the search area, the key string is retrieved from the search area via the drop-down selection plugin; The options in the second option list that contain the key string are determined as the matching options for the key string; The third option list is generated based on the matching options.

6. The method of claim 5, wherein, After rendering the dropdown menu using the virtual scrolling plugin based on the first option list and the position index, the method further includes: In response to the menu hide operation for the drop-down menu, the third option list is cleared.

7. The method according to any one of claims 1 to 5, characterized in that, The first option list includes: a second option list; after rendering the drop-down menu based on the first option list and the position index using the virtual scrolling plugin, the method further includes: The virtual scrolling plugin is used to record the position index of the selected item in the second option list to obtain memory data; In response to a menu hide operation on the drop-down menu, the drop-down menu is hidden; In response to a reload operation for the dropdown menu, the virtual scrolling plugin is invoked through the dropdown selection plugin; The virtual scrolling plugin determines the position index of the selected item in the second option list from the memory data, and re-renders the drop-down menu based on the second option list and the position index.

8. The method according to any one of claims 1 to 5, characterized in that, The step of rendering the dropdown menu using the virtual scrolling plugin based on the first option list and the position index includes: Using the virtual scrolling plugin, perform the following operations: The size of the option when displayed is read from the rendering control parameters; The position of the selected item is calculated based on the size of the option when it is displayed and the position index. Based on the location index and the size of the option when it is displayed, the index range of the option displayed within the visible range of the drop-down menu is calculated; The drop-down menu is rendered based on the index range.

9. The method of claim 1, wherein, After determining the first option list and the position index of the selected item in the first option list in response to the content loading operation for the drop-down menu, the method further includes: When the virtual scrolling mechanism is not enabled, the drop-down menu is rendered using the drop-down selection plugin based on the first option list and the position index.

10. A rendering device, characterized in that The device is configured with a dropdown selection component, which includes an operation response unit, a dropdown selection plugin, and a virtual scrolling plugin. The dropdown selection plugin is a plugin within the human-computer interaction interface framework, and the virtual scrolling plugin is a plugin within a virtual scrolling library. The operation response unit is used to respond to a content loading operation for a drop-down menu by determining a first option list and the position index of the selected item in the first option list; The dropdown selection plugin is used to invoke the virtual scrolling plugin when the virtual scrolling mechanism is enabled; The virtual scrolling plugin is used to render the drop-down menu based on the first option list and the position index.

11. An electronic device, comprising: The electronic device includes: Memory is used to store executable instructions or computer programs. A processor, when executing computer-executable instructions or computer programs stored in the memory, implements the method according to any one of claims 1 to 9.

12. A computer-readable storage medium storing computer-executable instructions or a computer program, characterized in that, When the computer-executable instructions or computer program are executed by a processor, they implement the method described in any one of claims 1 to 9.

13. A computer program product comprising computer-executable instructions or a computer program, characterized in that, When the computer-executable instructions or computer program are executed by a processor, they implement the method according to any one of claims 1 to 9.

Images