CN111857715B - H5-based linked pull-down component selection method, device, equipment and storage medium - Google Patents
H5-based linked pull-down component selection method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN111857715B CN111857715B CN202010712847.8A CN202010712847A CN111857715B CN 111857715 B CN111857715 B CN 111857715B CN 202010712847 A CN202010712847 A CN 202010712847A CN 111857715 B CN111857715 B CN 111857715B
- Authority
- CN
- China
- Prior art keywords
- display
- pull
- vue
- component
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The invention relates to artificial intelligence, and provides a H5-based linkage pull-down assembly selection method which is applied to an electronic device, wherein the method comprises the steps of triggering a calling assembly based on acquired service data, wherein the calling assembly is used for calling display data of the pull-down assembly; carrying out drop-down component display based on display data to display a display elastic layer corresponding to the calling component; judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes; based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed. The invention also relates to a block chain technology, and business data can be stored in the block chain. The method for selecting the linkage pull-down assembly is simple to use, wide in application scene range, multiple in pull-down stages and good in user experience.
Description
Technical Field
The invention relates to artificial intelligence, in particular to a method, a device, equipment and a computer readable storage medium for selecting a H5-based linkage pull-down assembly.
Background
Most of the components (such as address selection) in the linkage pull-down process are difficult to be commonly used due to different use scenes, different data structures and different interaction logics. For example:
1. the original data structures of the address selection scene and the industry selection scene are different, the data returned to the service by the callback is also different, and the hierarchy of the data is also different. It is known that in the case where only one type of data is applied to one linkage assembly, the common effect cannot be achieved.
2. At most, 3-level pull-down can be realized by the current popular linkage pull-down of the frame, and if more levels are provided, perfect display cannot be performed, so that user experience is deteriorated.
3. The linkage pull-down of most VUE rendering frames is to write a section of template code on html, if components are nested, the problem that the iOS cannot be completely covered can be caused. Meanwhile, under the condition of using a plurality of pages, a plurality of sets of template codes are required to be written, and the code maintenance is not facilitated.
Disclosure of Invention
The invention provides a method, an electronic device, equipment and a computer readable storage medium for selecting a linked pull-down assembly based on H5, which mainly aim to realize the display of the pull-down assembly by calling the assembly, and have the advantages of simple use, wide application scene and being friendly to multiple layers.
In order to achieve the above object, the present invention provides a method for selecting a H5-based linked pull-down assembly, which is applied to an electronic device, and the method includes:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component;
carrying out drop-down component display based on display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes;
based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed.
Preferably, matching the corresponding selective operation based on the presence of the default value comprises:
when the display elastic layer does not have a default value, displaying the first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by the drop-down frame;
when the default value exists in the display elastic layer, the page indicated by the default value is displayed as the display page, meanwhile, the breadcrumbs data are filled into the corresponding default value, and the corresponding default value is selected by the drop-down frame.
Preferably, the pull-down function of the pull-down assembly includes:
displaying a pull-down floating layer, closing the pull-down floating layer, clicking to turn pages, sliding to turn pages, selecting effects, executing a callback, and/or selecting breadcrumbs.
Preferably, the sliding page turning comprises a gesture sliding page turning left and right and a gesture sliding page turning up and down; wherein, the liquid crystal display device comprises a liquid crystal display device,
when the gesture sliding distance is smaller than the first preset pixel distance or the gesture sliding time is smaller than the preset time, controlling the gesture to slide left and right and turn pages to be triggered;
when the gesture sliding distance is smaller than the second preset pixel distance and the vertical sliding distance of the gesture sliding is larger than the preset multiple of the horizontal sliding distance, controlling the gesture to slide up and down and turn pages to be triggered.
Preferably, before triggering the calling component, the method further comprises:
preprocessing service data according to a preset rule to form normative service data, meanwhile, packaging inheritance functions in a service assembly, and storing the service data and the normative service data in a block chain;
inheriting specific services of the service component based on the normative service data to form a service component instance;
and carrying out event monitoring on the business component instance to trigger the calling component under the condition of monitoring time.
Preferably, the preset rule comprises a preset data format and a custom variable; the preprocessing includes data sort and data modification.
Preferably, the inheritance function is implemented based on class templates and extended templates in the front-end language.
In addition, to achieve the above object, the present invention also provides a computer apparatus including: the device comprises a memory and a processor, wherein the memory stores a program selected by an H5-based linkage pull-down assembly, and the following steps are realized when the program selected by the H5-based linkage pull-down assembly is executed by the processor:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component;
carrying out drop-down component display based on display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes;
based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed.
In addition, in order to achieve the above purpose, the invention also provides an electronic device, which comprises a calling component triggering module, a calling component and a display module, wherein the calling component triggering module is used for triggering the calling component based on the acquired service data, and the calling component is used for calling the display data of the pull-down component; the display module of the display elastic layer is used for displaying the pull-down assembly based on the display data so as to display the display elastic layer corresponding to the calling assembly; the judging module is used for judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes; and the function display module is used for matching and displaying the pull-down function of the pull-down assembly corresponding to the selective operation based on the selective operation of the display elastic layer.
In addition, in order to achieve the above object, the present invention further provides a computer readable storage medium, where the computer readable storage medium includes an H5-based linked pull-down component selection program, and when the H5-based linked pull-down component selection program is executed by a processor, any step in the above H5-based linked pull-down component selection method is implemented.
According to the H5-based linkage pull-down component selection method, the electronic device, the computer equipment and the computer readable storage medium, pull-down component display is performed based on the triggered invoking component, the corresponding display elastic layer is displayed, the corresponding pull-down function is matched according to the selective operation of a user on the display elastic layer, and the pull-down component can be used in different scenes without repeated research and development; in addition, the operation is simple, the method is friendly to multi-level levels, and the method has the experience characteristics of most of linkage pull-down at present.
Drawings
FIG. 1 is a flow chart of a method for selecting a H5-based linked pull-down assembly of the present invention;
FIG. 2 is a flow chart of a preferred embodiment of a method for H5-based linked pull-down assembly selection in accordance with the present invention;
FIG. 3 is a schematic view of an application environment of a preferred embodiment of a H5-based linked pull-down assembly selection method of the present invention;
FIG. 4 is a block diagram of a preferred embodiment of the H5-based linked drop-down assembly of FIG. 3 in which a computer device is selected.
The achievement of the objects, functional features and advantages of the present invention will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
The invention also provides a H5-based linkage pull-down assembly selection method. Referring to FIG. 1, a flow chart of a method for H5-based linked pull-down assembly selection in accordance with the present invention is shown. The method may be performed by an apparatus, which may be implemented in software and/or hardware.
In this embodiment, the H5-based linkage pull-down component selection method includes:
s10: triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component;
s20: and carrying out drop-down component display based on the display data so as to display the display elastic layer corresponding to the calling component.
Before step S10, a data processing procedure is further included, the procedure further including:
1. preprocessing service data according to a preset rule to form normative service data, meanwhile, packaging inheritance functions in a service assembly, and storing the service data and the normative service data in a block chain;
2. forming a service component instance based on the normative service data and the specific service of the inherited service component;
3. and carrying out event monitoring on the service component instance, and triggering the calling component under the condition that the event is monitored.
It should be emphasized that, to ensure the privacy and security of the above-mentioned service data and normative service data, the service data and normative service data may also be stored in the nodes of the blockchain.
The preprocessing of the service data mainly comprises data arrangement and data modification, wherein the preset rule comprises preset data formats, custom variables and the like, in other words, the service data is subjected to normative arrangement and modification, which can be understood as data normative, and the data normative refers to data arrangement and modification by a developer according to a certain data format, wherein the variables for the developer to customize are also included. For example, in the data structure of the service data in the invention, value represents the data returned by the callback function, and when the content displayed by the drop-down list is different from the data required to be returned, the value can be set. Ckld represents a field defining a comparison through which a comparison is made when one of the items of the drop down list is clicked, date. Savlue is used for content presented by the drop down list option. Child is the next level of data, and when the secondary data is the last level, the value is null.
In addition, based on personalized development of different services, the H5-based linkage pull-down component selection method only provides one class, and in the actual use process, new classes are needed to be used for inheritance. The inherited capability is realized based on a front-end language, such as a class module and an extend module in ecmascript6, and then the basic capability of linkage pull-down is packaged into the component, and the basic capability can be used only by inheriting the component, and the custom capability can be developed in the component. That is, the basic functions are gathered into a parent component, the basic capability can be obtained by inheriting the parent component from the component, and meanwhile, the sub-component can also be customized to create other capabilities.
After the data specification and inheritance processing, the specific service component has the function of use, and only an instance is formed on the basis of the specific service component, namely the service component instance, the method for selecting the linked drop-down component is bound on a monitoring event, the event monitoring is carried out on the service component instance, and the display and hiding capabilities and the like of the drop-down frame can be triggered as long as the event is monitored.
In one embodiment of the present invention, the basic functionality of the ganged-down assembly includes three major modules, respectively, selist.vue, distpipe.vue, swipe.vue. The selecting list and the swipe and the vue are used for mainly processing rendering and updating of breadcrumbs, and have effects of clicking page turning and selecting of a breadcrumbs item list, wherein swipe and the vue are displayed in a drop-down list, gesture recognition and page turning are realized, and have effects of selecting the drop-down item, and the distpipe and the vue are intermediaries for connecting the selecting list and the swipe and the vue, initializing all components, having display or hiding capability and executing callback.
In the three modules, the selection list.vue returns new data to the distpipe.vue through event response, and the switch.vue updates own data through watch response, so that update of the own is triggered; similarly, the switch.vue responds to the dispicker.vue by an event, and the select list.vue implements its own update by a watch. In other words, the breadcrumbs click on one of the items, the event notification distpipe data updates, and the switch knows that the data has an update through the watch, and turns to a new page. The three modules interact to provide various functions and are concentrated to the dispicker to output outwards in a unified way.
S30: judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes.
In the step S30, when the display elastic layer has no default value, displaying the first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by the drop-down frame; when the default value exists in the display elastic layer, the page indicated by the default value is displayed as the display page, meanwhile, the breadcrumbs data are filled into the corresponding default value, and the corresponding default value is selected by the drop-down frame.
Specifically, when the default value exists in the display elastic layer, the breadcrumbs are filled to the default value, the page turning of the drop-down frame is positioned to the content associated with the last layer of breadcrumbs, and the default value is selected by default by the parameters of the drop-down frame; otherwise, breadcrumbs are empty, which may indicate "please select", drop-down box is first page, and not selected by default. In the step, when the capability is displayed through service call, whether a default value exists is judged by taking the transmitted parameters as the standard. If the parameter is not null, it represents that a default value exists. When the basic function module is initialized, default values are transferred to each module for initialization, and vue (vue is one of the popular H5 development frames in China, which can automatically update the DOM structure of the page according to the change of the component data) is automatically rendered on the page.
S40: based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed.
The selective operation of the display elastic layer mainly refers to the selective operation of a user on the display elastic layer, and when the drop-down frame is displayed, the drop-down assembly can provide rich functions for the user to operate and can assist the user in selecting in various modes. The operation of the user on the display elastic layer mainly comprises the following steps: breadcrumb clicks, drop down box clicks, slide left and right gestures, slide up and down gestures, etc. Each operation of the corresponding user is configured with a corresponding operation flow.
Wherein, the pull-down function of pull-down subassembly includes: displaying a pull-down floating layer, closing the pull-down floating layer, clicking to turn pages, sliding to turn pages, selecting effects, executing a callback, and/or selecting breadcrumbs.
In addition, the sliding page turning comprises a gesture left-right sliding page turning and a gesture up-down sliding page turning; when the gesture sliding distance is smaller than a first preset pixel distance or the gesture sliding time is smaller than a preset time, controlling the gesture to slide left and right and turn pages to be triggered; when the gesture sliding distance is smaller than the second preset pixel distance and the vertical sliding distance of the gesture sliding is larger than the preset multiple of the horizontal sliding distance, controlling the gesture to slide up and down and turn pages to be triggered.
The first preset pixel distance, the second preset pixel distance, the preset time, the preset multiple, and the like can be set according to a specific application scenario, for example, the first preset pixel distance can be set to 5 pixels, the second preset pixel distance can be set to 5 pixels, and the like, the preset time can be set to 300ms, the preset multiple is 1.73 times, and the like.
Specifically, the breadcrumbs click operation, the drop-down frame is directly moved to the left or right to the content associated with the breadcrumbs, so that the content associated with the breadcrumbs is directly displayed on the screen of the terminal (e.g. mobile phone) of the user, meanwhile, the breadcrumbs can be adjusted, the currently selected breadcrumbs are placed to the last through adding and deleting, and the currently selected breadcrumbs are highlighted. Clicking the drop-down frame, judging whether the current page is the last page, if so, directly closing the elastic layer, and triggering a callback; if the page is not the last page, the next page is automatically turned, and meanwhile, the breadcrumbs are added with a level to point to a new page drop-down frame. The gesture slides left and right, the drop-down frame slides along with the sliding of the finger, and when the finger slides to a certain distance, the finger automatically turns over one page forwards or backwards after leaving the screen; the highlighting index of breadcrumbs will also follow the sliding to the corresponding level. For example, the gesture slides up and down, and the drop-down frame slides up and down.
In the step, the display and closing are triggered by touch and click events, the dom node is generated and plugged into the body, the dom node is destroyed when hidden, the dom node is generated by generating an html fragment by using a render function of vue, and the object is destroyed vue firstly and then the dom node is deleted.
Because each page is horizontally placed, the position is not displayed when the page falls outside the display screen in the screen, the position of the next page or the position of the previous page is dynamically calculated by js, the animation effect of turning one page to the other page is realized through the transition effect of the transfer 3d of the transfer of css, and the transfer 3d triggers the gpu acceleration to increase the rendering performance. The finger sliding is realized by a touch event in touch events to realize that a screen follows the finger sliding, the touch event triggers to acquire the current position, and the position of the last touch event is transited to the current position through the transitional 3d transition effect.
In the selection of the H5-based linkage pull-down component, the triggering judgment of the touch event and the click event is as follows: first, when the gesture of the finger is not a vertical or horizontal swipe (vertical swipe is a scrolling list, horizontal swipe is a page flip); in the second case, the sliding distance is longer than the sliding distance, and only one page is turned over.
Specifically, the basis of judging whether to slide or click event is two specific examples, one is that the sliding distance is not more than 5px (pixels, the same applies below), or the sliding time is not more than 300ms, and then the sliding event is considered as a tap event; there are two bases for judging whether the gesture is classified as a horizontal slide or a vertical slide, one is that the horizontal slide is smaller than 5px, and the other is that the vertical slide distance is larger than 1.73 times of the horizontal distance, and the gesture is regarded as the vertical slide, and if the previous slide is once confirmed to be vertical or horizontal, all the slides behind the lock are slid according to the confirmed direction.
Therefore, the user experience can be improved, and oblique sliding can be supported to turn pages or slide the scroll bar. For example, a page is flipped over when the distance of the lateral sliding is greater than or equal to one-fourth of the screen. The breadcrumbs are realized by monitoring the change of the breadcrumbs data by using a watch method of vue, so that the breadcrumbs are updated and the animation is started, and the animation is realized by the transition effect of the transition 3d, wherein the principle is that the bottom thick line of the last selected breadcrumbs item slowly moves to the left or to the right to the bottom of a new selected breadcrumbs item, and the bottom thick line is adaptive to the width of the new breadcrumbs item and dynamically stretches or shortens.
In addition, the selected effect is to monitor the change of the trigger list item style by using the click event and to trigger the next page or end the hook of the whole flow trigger callback. The callback is implemented in the call-in component (pull-down component or linkage pull-down component) by using js function high-level application.
As a specific example, fig. 2 shows a detailed flowchart of a H5-based linked drop down component selection method according to an embodiment of the invention.
As shown in fig. 2, the H5-based linked pull-down assembly selection method according to the embodiment of the invention includes the following steps:
s201: starting or starting the H5-based linkage pull-down assembly selection method in the embodiment of the invention;
s202: normalizing specific service data; meanwhile, S203: carrying out inheritance processing on specific service data to acquire a corresponding service assembly, namely, step S204;
s205: monitoring the event of the service component;
s206: triggering and calling the component program when the event is monitored;
s207: when the calling component is triggered, carrying out the display of the pull-down component, namely, carrying out the display of the display elastic layer;
s208, judging whether a default value exists in the display elastic layer, and performing corresponding processing according to the existence condition of the default value;
s209: when the display elastic layer has no default value, displaying the first page by default, wherein breadcrumbs are empty, and the drop-down frame is not selected by default;
s210: when the display elastic layer has a default value, indicating the page by the default display default value, filling breadcrumbs as the default value, and selecting the default value by a drop-down frame by default;
s211: abundant user operations are configured in the drop-down component, and the user can perform selective operations according to requirements;
s212: the user clicks a breadcrumb clicking function;
s213: turning pages to the selected pages according to the clicking of the user;
s214: after turning pages to the selected page, automatically emptying breadcrumbs behind the current page;
s215: clicking or triggering a drop-down option function;
s216: judging whether the current page is the last page;
s217: if the current page is not the last page, updating the data of the next page and turning over to the next page;
s218: updating one more layer of breadcrumbs;
s219: if the current page is the last page, closing the elastic layer, and then executing S220 to trigger callback and ending (step S221);
s222: the user finger slides left and right to trigger a gesture sliding function;
s223: turning pages left and right of the corresponding pull-down frame; s224: breadcrumbs slide left and right in focus;
s225: the user fingers slide up and down to trigger the up and down sliding function of the mobile phone; s226: the drop-down frame scrolls up and down.
The H5-based linkage pull-down assembly selection method has the following advantages:
1. the unified data definition specification can be provided, great convenience is provided for future maintenance, and problems caused by the problem of the data structure are avoided; also used as a standard for future diversified scene usage, all scene usage should be realized with this specification; meanwhile, the specifications also provide a sufficient custom entry, so that the personalized design of scenes is facilitated.
2. The method is used as a high-abstraction component, does not contain the characteristic of a specific scene, and the specific scene can be directly used by the function of the component only by inheriting the specific scene, so that the application range of the component is wide, meanwhile, the specific scene is extremely convenient to use, the development workload of the specific scene is lightened, a pull-down component can be generated only by 2 steps, the specific scene data is converted into standard data in the first step, and the component is referenced in the second step.
3. From the design level, the breadcrumbs of the component can reach 10 levels theoretically, and due to the limitation of the screen of the mobile phone and the requirement of displaying the text, the reality is probably not that much, and the style can be defined by the user to display more levels.
4. From the Html code structure of the generated pull-down component, the component is always placed under the body, is not nested in other containers, solves the problem that the iOS can generate insufficient masking, and meanwhile, a label related to the component is not required to be added on a vue file, and a user only needs to maintain js without maintaining a template through the call of a method.
In addition, the H5-based linkage pull-down component selection method is applied to the computer equipment 1. Referring to fig. 3, an application environment diagram of a preferred embodiment of the H5-based coordinated pull-down component selection method of the present invention is shown.
In this embodiment, the computer device 1 may be a terminal device having an operation function, such as a server, a smart phone, a tablet computer, a portable computer, or a desktop computer.
The computer device 1 includes: processor 12, memory 11, network interface 14, and communication bus 15. The memory 11 includes at least one type of readable storage medium. The at least one type of readable storage medium may be a non-volatile storage medium such as a flash memory, a hard disk, a multimedia card, a card memory 11, etc. In some embodiments, the readable storage medium may be an internal storage unit of the computer device 1, such as a hard disk of the computer device 1. In other embodiments, the readable storage medium may also be an external memory 11 of the computer device 1, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 1.
In this embodiment, the readable storage medium of the memory 11 is generally used to store the H5-based linked pull-down component selection program 10 and the like installed in the computer device 1. The memory 11 may also be used for temporarily storing data that has been output or is to be output.
The processor 12 may in some embodiments be a central processing unit (Central Processing Unit, CPU), microprocessor or other data processing chip for running program code or processing data stored in the memory 11, such as executing the H5-based linked drop down component selection program 10, etc.
The network interface 14 may optionally comprise a standard wired interface, a wireless interface (e.g. WI-FI interface), typically used to establish a communication connection between the computer device 1 and other electronic devices.
The communication bus 15 is used to enable connection communication between these components.
Fig. 3 shows only the computer device 1 with components 11-15, but it is understood that not all shown components are required to be implemented, and that more or fewer components may alternatively be implemented.
Optionally, the computer device 1 may further comprise a user interface, which may comprise an input unit such as a Keyboard (Keyboard), a voice input means such as a microphone or the like with voice recognition function, a voice output means such as a sound box, a headset or the like, and optionally a standard wired interface, a wireless interface.
Optionally, the computer device 1 may also comprise a display, which may also be referred to as a display screen or display unit. In some embodiments, the display may be an LED display, a liquid crystal display, a touch-control liquid crystal display, an Organic Light-Emitting Diode (OLED) touch device, or the like. The display is used for displaying information processed in the computer device 1 and for displaying a visualized user interface.
Optionally, the computer device 1 further comprises a touch sensor. The area provided by the touch sensor for the user to perform a touch operation is referred to as a touch area. Further, the touch sensors described herein may be resistive touch sensors, capacitive touch sensors, and the like. The touch sensor may include not only a contact type touch sensor but also a proximity type touch sensor. Furthermore, the touch sensor may be a single sensor or may be a plurality of sensors arranged in an array, for example.
Further, the area of the display of the computer device 1 may be the same as or different from the area of the touch sensor. Optionally, a display is stacked with the touch sensor to form a touch display screen. The device detects a touch operation triggered by a user based on a touch display screen.
Optionally, the computer device 1 may further include Radio Frequency (RF) circuits, sensors, audio circuits, etc., which are not described herein.
In the embodiment of the apparatus shown in fig. 3, the memory 11, which is a computer storage medium, may include an operating system, and an H5-based linked drop-down component selection program 10; the processor 12 performs the following steps when executing the H5-based linked drop-down component selection program 10 stored in the memory 11:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component;
carrying out drop-down component display based on display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes;
based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed.
Specifically, matching corresponding selective operations based on presence of default values includes:
when the display elastic layer does not have a default value, displaying the first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by the drop-down frame;
when the default value exists in the display elastic layer, the page indicated by the default value is displayed as the display page, meanwhile, the breadcrumbs data are filled into the corresponding default value, and the corresponding default value is selected by the drop-down frame.
In addition, the pull-down function of the pull-down assembly includes: displaying a pull-down floating layer, closing the pull-down floating layer, clicking to turn pages, sliding to turn pages, selecting effects, executing a callback, and/or selecting breadcrumbs.
Preferably, the sliding page turning comprises a gesture sliding page turning left and right and a gesture sliding page turning up and down; wherein, the liquid crystal display device comprises a liquid crystal display device,
when the gesture sliding distance is smaller than the first preset pixel distance or the gesture sliding time is smaller than the preset time, controlling the gesture to slide left and right and turn pages to be triggered;
when the gesture sliding distance is smaller than the second preset pixel distance and the vertical sliding distance of the gesture sliding is larger than the preset multiple of the horizontal sliding distance, controlling the gesture to slide up and down and turn pages to be triggered.
Further, before triggering the calling component, the method further comprises: firstly, preprocessing service data according to preset rules to form normative service data, and meanwhile, encapsulating inheritance functions in a service component, wherein the service data and the normative service data can be stored in nodes of a blockchain in order to ensure the privacy and the safety of the service data and the normative service data;
then, forming a service component instance based on the normative service data and the specific service of the inherited service component; finally, the business component instance is subjected to event monitoring to trigger the calling component under the condition that the event is monitored.
In another aspect, the present invention also provides an electronic device, which may be understood as a program selected by an H5-based linkage drop-down component provided in a computer apparatus, and the program may be further divided into one or more modules, and the one or more modules are stored in the memory 11 and executed by the processor 12 to complete the present invention. The invention may refer to a series of computer program instruction segments capable of performing a specified function.
Referring to FIG. 4, a block diagram of a preferred embodiment of the H5-based linked drop-down component selection routine 10 of FIG. 3 is shown. The H5-based linked drop down component selection procedure 10 can be split into:
a calling component triggering module 110, configured to trigger a calling component based on the acquired service data, where the calling component is configured to call the presentation data of the drop-down component;
the display module 120 is configured to display the pull-down component based on the display data, so as to display a display elastic layer corresponding to the calling component;
the judging module 130 is configured to judge whether a default value exists in the display elastic layer, and match corresponding selective operations based on a existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes;
the function display module 140 is configured to match and display a pull-down function of the pull-down component corresponding to the selective operation based on the selective operation on the display elastic layer.
In addition, the embodiment of the invention also provides a computer readable storage medium, wherein the computer readable storage medium comprises an H5-based linkage pull-down assembly selection program, and the H5-based linkage pull-down assembly selection program realizes the following operations when being executed by a processor:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component;
carrying out drop-down component display based on display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of the presentation page, breadcrumbs, and drop down boxes;
based on the selective operation of the display spring layer, the pull-down function of the pull-down component corresponding to the selective operation is matched and displayed.
The embodiments of the computer readable storage medium and the computer device of the present invention are substantially the same as the embodiments of the method and the electronic device for selecting the H5-based linked pull-down assembly, and are not described herein. It should be emphasized that, to further ensure the privacy and security of the service data, the service data may also be stored in a node of a blockchain.
The blockchain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm and the like. The Blockchain (Blockchain), which is essentially a decentralised database, is a string of data blocks that are generated by cryptographic means in association, each data block containing a batch of information of network transactions for verifying the validity of the information (anti-counterfeiting) and generating the next block. The blockchain may include a blockchain underlying platform, a platform product services layer, an application services layer, and the like.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, apparatus, article, or method. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, apparatus, article or method that comprises the element.
The foregoing embodiment numbers of the present invention are merely for the purpose of description, and do not represent the advantages or disadvantages of the embodiments. From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) as described above, comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method according to the embodiments of the present invention.
The foregoing description is only of the preferred embodiments of the present invention, and is not intended to limit the scope of the invention, but rather is intended to cover any equivalents of the structures or equivalent processes disclosed herein or in the alternative, which may be employed directly or indirectly in other related arts.
Claims (7)
1. An H5-based linkage pull-down assembly selection method applied to an electronic device is characterized by comprising the following steps:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component; wherein, the liquid crystal display device comprises a liquid crystal display device,
preprocessing the service data according to a preset rule to form normative service data, and meanwhile, packaging inheritance functions in a service assembly, wherein the service data and the normative service data are stored in a block chain; the preset rules comprise preset data formats and custom variables, and the preprocessing comprises data arrangement and data modification;
inheriting specific services of the service component based on the normative service data to form a service component instance;
the service component instance is subjected to event monitoring so as to trigger the calling component under the condition of monitoring an event;
carrying out drop-down component display based on the display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of a presentation page, breadcrumbs, and drop-down box;
based on the selective operation of the display elastic layer, matching and displaying the pull-down function of the pull-down component corresponding to the selective operation; the matching of the corresponding selective operation based on the existence of the default value comprises:
when the display elastic layer does not have a default value, displaying a first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by a drop-down frame;
when the default value exists in the display elastic layer, displaying a page indicated by the default value as a display page, and meanwhile, filling the breadcrumbs data into corresponding default values, wherein the corresponding default values are selected by the drop-down frame;
the basic functions of the linkage pull-down assembly comprise three modules, namely a selection list, a distpipe, a swipe, a queue; the method comprises the steps of selecting a list.vue for processing rendering update of breadcrumbs, using a swipe.vue for showing a drop-down list, identifying gestures, turning pages, enabling a distpipe.vue to serve as an intermediary for connecting the list.vue and the swipe.vue, initializing each component, and executing callbacks;
the method comprises the steps that a selection list.vue returns new data to a distpipe.vue through event response, and a switch.vue updates own data through watch response, so that update of the own is triggered; the switch.vue responds to the dispicker.vue through an event, and the select list.vue realizes own update through a watch; the three modules are concentrated to the dispicker for unified output.
2. The H5-based linked pull-down assembly selection method of claim 1, wherein the pull-down function of the pull-down assembly comprises:
displaying a pull-down floating layer, closing the pull-down floating layer, clicking to turn pages, sliding to turn pages, selecting effects, executing a callback, and/or selecting breadcrumbs.
3. The H5-based linked drop down assembly selection method of claim 2, wherein the slide page turning comprises a gesture slide page turning left and right and a gesture slide page turning up and down; wherein, the liquid crystal display device comprises a liquid crystal display device,
when the gesture sliding distance is smaller than a first preset pixel distance or the gesture sliding time is smaller than a preset time, controlling the gesture to slide left and right and turn pages to be triggered;
and when the gesture sliding distance is smaller than the second preset pixel distance and the vertical sliding distance of the gesture sliding is larger than the preset multiple of the horizontal sliding distance, controlling the gesture to slide up and down and turn pages to be triggered.
4. The H5-based linked pull-down assembly selection method of claim 1, wherein,
the inheritance function is implemented based on class templates and extended templates in the front-end language.
5. A computer device, the computer device comprising: the device comprises a memory and a processor, wherein the memory stores a program selected by an H5-based linkage pull-down assembly, and the program selected by the H5-based linkage pull-down assembly realizes the following steps when being executed by the processor:
triggering a calling component based on the acquired service data, wherein the calling component is used for calling the display data of the pull-down component; wherein, the liquid crystal display device comprises a liquid crystal display device,
preprocessing the service data according to a preset rule to form normative service data, and meanwhile, packaging inheritance functions in a service assembly, wherein the service data and the normative service data are stored in a block chain; the preset rules comprise preset data formats and custom variables, and the preprocessing comprises data arrangement and data modification;
inheriting specific services of the service component based on the normative service data to form a service component instance;
the service component instance is subjected to event monitoring so as to trigger the calling component under the condition of monitoring an event;
carrying out drop-down component display based on the display data to display a display elastic layer corresponding to the calling component;
judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of a presentation page, breadcrumbs, and drop-down box;
based on the selective operation of the display elastic layer, matching and displaying the pull-down function of the pull-down component corresponding to the selective operation;
the matching of the corresponding selective operation based on the existence of the default value comprises:
when the display elastic layer does not have a default value, displaying a first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by a drop-down frame;
when the default value exists in the display elastic layer, displaying a page indicated by the default value as a display page, and meanwhile, filling the breadcrumbs data into corresponding default values, wherein the corresponding default values are selected by the drop-down frame;
the basic functions of the linkage pull-down assembly comprise three modules, namely a selection list, a distpipe, a swipe, a queue; the method comprises the steps of selecting a list.vue for processing rendering update of breadcrumbs, using a swipe.vue for showing a drop-down list, identifying gestures, turning pages, enabling a distpipe.vue to serve as an intermediary for connecting the list.vue and the swipe.vue, initializing each component, and executing callbacks;
the method comprises the steps that a selection list.vue returns new data to a distpipe.vue through event response, and a switch.vue updates own data through watch response, so that update of the own is triggered; the switch.vue responds to the dispicker.vue through an event, and the select list.vue realizes own update through a watch; the three modules are concentrated to the dispicker for unified output.
6. An electronic device, comprising:
the calling component triggering module is used for triggering a calling component based on the acquired service data, and the calling component is used for calling the display data of the pull-down component; wherein, the liquid crystal display device comprises a liquid crystal display device,
preprocessing the service data according to a preset rule to form normative service data, and meanwhile, packaging inheritance functions in a service assembly, wherein the service data and the normative service data are stored in a block chain; the preset rules comprise preset data formats and custom variables, and the preprocessing comprises data arrangement and data modification;
inheriting specific services of the service component based on the normative service data to form a service component instance;
the service component instance is subjected to event monitoring so as to trigger the calling component under the condition of monitoring an event;
the display module of the display elastic layer is used for displaying the pull-down assembly based on the display data so as to display the display elastic layer corresponding to the calling assembly;
the judging module is used for judging whether a default value exists in the display elastic layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation includes selection of parameters of a presentation page, breadcrumbs, and drop-down box;
the function display module is used for matching and displaying the pull-down function of the pull-down assembly corresponding to the selective operation based on the selective operation of the display elastic layer;
the matching of the corresponding selective operation based on the existence of the default value comprises:
when the display elastic layer does not have a default value, displaying a first page as a display page, and setting breadcrumbs to be empty, wherein any parameter is not selected by a drop-down frame;
when the default value exists in the display elastic layer, displaying a page indicated by the default value as a display page, and meanwhile, filling the breadcrumbs data into corresponding default values, wherein the corresponding default values are selected by the drop-down frame;
the basic functions of the linkage pull-down assembly comprise three modules, namely a selection list, a distpipe, a swipe, a queue; the method comprises the steps of selecting a list.vue for processing rendering update of breadcrumbs, using a swipe.vue for showing a drop-down list, identifying gestures, turning pages, enabling a distpipe.vue to serve as an intermediary for connecting the list.vue and the swipe.vue, initializing each component, and executing callbacks;
the method comprises the steps that a selection list.vue returns new data to a distpipe.vue through event response, and a switch.vue updates own data through watch response, so that update of the own is triggered; the switch.vue responds to the dispicker.vue through an event, and the select list.vue realizes own update through a watch; the three modules are concentrated to the dispicker for unified output.
7. A computer readable storage medium, wherein the computer readable storage medium includes an H5-based linked drop-down component selection program, and the H5-based linked drop-down component selection program, when executed by a processor, implements the steps of the H5-based linked drop-down component selection method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010712847.8A CN111857715B (en) | 2020-07-22 | 2020-07-22 | H5-based linked pull-down component selection method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010712847.8A CN111857715B (en) | 2020-07-22 | 2020-07-22 | H5-based linked pull-down component selection method, device, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111857715A CN111857715A (en) | 2020-10-30 |
| CN111857715B true CN111857715B (en) | 2023-08-22 |
Family
ID=72950612
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010712847.8A Active CN111857715B (en) | 2020-07-22 | 2020-07-22 | H5-based linked pull-down component selection method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111857715B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113721812A (en) * | 2021-08-05 | 2021-11-30 | 中核武汉核电运行技术股份有限公司 | Nuclear power plant data drop-down box component creation method and system based on acts |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109871500A (en) * | 2019-01-24 | 2019-06-11 | 平安科技（深圳）有限公司 | Page loading method, device, computer equipment and storage medium |
| CN109885226A (en) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | A method of secondary navigation menu is realized based on Vue.js |
| CN110321183A (en) * | 2018-03-29 | 2019-10-11 | 优酷网络技术（北京）有限公司 | A kind of configuration system and method at the interface common component UI |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8583622B2 (en) * | 2012-03-05 | 2013-11-12 | Microsoft Corporation | Application of breadcrumbs in ranking and search experiences |
| US8745540B2 (en) * | 2012-04-13 | 2014-06-03 | Apollo Education Group, Inc. | Accordion style bread crumbing for mobile applications |
| US10552029B2 (en) * | 2015-09-10 | 2020-02-04 | Adp, Llc | Pinable and actionable navigation breadcrumbs |
-
2020
- 2020-07-22 CN CN202010712847.8A patent/CN111857715B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321183A (en) * | 2018-03-29 | 2019-10-11 | 优酷网络技术（北京）有限公司 | A kind of configuration system and method at the interface common component UI |
| CN109871500A (en) * | 2019-01-24 | 2019-06-11 | 平安科技（深圳）有限公司 | Page loading method, device, computer equipment and storage medium |
| CN109885226A (en) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | A method of secondary navigation menu is realized based on Vue.js |
Non-Patent Citations (1)
| Title |
|---|
| 电商网站面包屑导航设计技巧和方法;杨一平;;计算机与网络(10);第49页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111857715A (en) | 2020-10-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10643023B2 (en) | Programmatic native rendering of structured content | |
| US10007933B2 (en) | Systems and methods for integrating dynamic content into electronic media | |
| CN101866299B (en) | Method and system for modifying the execution of a native application running on a portable electronic device | |
| US10949381B2 (en) | Reusable transformation mechanism to allow mappings between incompatible data types | |
| EP2425359A1 (en) | Method and apparatus for providing scraped web pages in a graphical user interface | |
| KR20080021081A (en) | Fine-grained control of z-order elements in a xml presentation | |
| KR102350540B1 (en) | digital component background rendering | |
| US20140143763A1 (en) | Method and System to develop operating system agnostic software applications for mobile devices using a virtual machine | |
| CN111523289B (en) | Text format generation method, device, equipment and readable medium | |
| CN113892082A (en) | Integrating learning models into software development systems | |
| US10938880B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
| CN109074375A (en) | Content selection in web document | |
| US20180004715A1 (en) | Optimizing view hierarchy by automatically removing layout-only views | |
| FR2980605A1 (en) | METHOD FOR RETRIEVING A REPRESENTATION OF A ANNOTATED WEB DOCUMENT, COMPUTER PROGRAM AND ELECTRONIC DEVICE THEREFOR | |
| CN114996619A (en) | Page display method and device, computer equipment and storage medium | |
| CN114385940A (en) | Data visualization method, device, equipment and medium | |
| CN111857715B (en) | H5-based linked pull-down component selection method, device, equipment and storage medium | |
| CN105786881A (en) | Self-adaptive electronic book and magazine file structure and corresponding methods and devices | |
| Cimino et al. | An efficient model-based methodology for developing device-independent mobile applications | |
| CN108021366B (en) | Interface animation realization method and device, electronic equipment and storage medium | |
| US11966957B2 (en) | Methods and systems for modular personalization center | |
| CN106383705B (en) | Method and device for setting mouse display state in application thin client | |
| Banavar et al. | Tooling and system support for authoring multi-device applications | |
| CN116108814B (en) | Gantt chart processing method and device, computer equipment and storage medium | |
| KR102131080B1 (en) | Method for analyzing detail page of web-application using document of model and apparatus thereof |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |