CN111857715A - H5-based linkage pull-down component selection method, device, equipment and storage medium - Google Patents
H5-based linkage pull-down component selection method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN111857715A CN111857715A CN202010712847.8A CN202010712847A CN111857715A CN 111857715 A CN111857715 A CN 111857715A CN 202010712847 A CN202010712847 A CN 202010712847A CN 111857715 A CN111857715 A CN 111857715A
- Authority
- CN
- China
- Prior art keywords
- pull
- component
- display
- data
- calling
- 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.)
- Granted
Links
Images
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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to artificial intelligence, and provides a linkage pull-down component selection method based on H5, which is applied to an electronic device and comprises triggering a calling component based on acquired business data, wherein the calling component is used for calling display data of the pull-down component; performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component; judging whether a default value exists in the display bullet layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and drop-down box; and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer. The invention also relates to a block chain technology, and the service data can be stored in the block chain. The linkage pull-down component selection method 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 linkage pull-down component selection method, a linkage pull-down component selection device, linkage pull-down component selection equipment and a computer readable storage medium based on H5.
Background
At present, most of linkage pull-down selection components (such as address selection) are difficult to be used universally 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 are different, and the data hierarchy is different. It can be seen that the common effect cannot be achieved when only one kind of data is applied to one linkage assembly.
2. At most, 3-level drop-down can be realized by linkage drop-down of the current popular frame, and for more levels, perfect display cannot be performed, so that the user experience is deteriorated.
3. The linkage pull-down of most VUE rendering frameworks requires writing a section of template codes on html, and if the components are nested, the problem that iOS cannot completely cover the templates can be caused. Meanwhile, under the condition that a plurality of pages are used, a plurality of sets of template codes need to be written, and code maintenance is not facilitated.
Disclosure of Invention
The invention provides a linkage pull-down component selection method based on H5, an electronic device, equipment and a computer readable storage medium, and mainly aims to realize display of a pull-down component by calling the component, so that the linkage pull-down component selection method is simple to use, wide in application scene and friendly to multiple levels.
In order to achieve the above object, the present invention provides a method for selecting a pull-down assembly based on H5, which is applied to an electronic device, and 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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether a default value exists in the display bullet layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
Preferably, matching the corresponding selective operation based on the presence of the default value includes:
when the display bullet layer has no default value, displaying the first page as a display page, setting the breadcrumbs to be empty, and not selecting any parameter in the drop-down frame;
and when the default value exists in the display bullet layer, displaying the page indicated by the default value as a display page, filling the breadcrumb data into the corresponding default value, and selecting the corresponding default value in the drop-down box.
Preferably, the pull-down function of the pull-down assembly comprises:
displaying the pull-down floating layer, closing the pull-down floating layer, clicking page turning, sliding page turning, selecting an effect, executing a callback and/or selecting breadcrumbs.
Preferably, the sliding page turning comprises gesture left-right sliding page turning and gesture up-down sliding page turning; wherein the content of the first and second substances,
when the gesture sliding distance is smaller than a first preset pixel distance or the gesture sliding time is smaller than preset time, controlling the gesture to slide left and right to 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 to turn pages and triggering.
Preferably, before triggering the calling component, the method further comprises:
preprocessing the service data according to a preset rule to form normative service data, meanwhile, packaging an inheritance function in the service assembly, and storing the service data and the normative service data in a block chain;
inheriting the specific service of the service component based on the normative service data to form a service component example;
event monitoring is carried out on the business component instance, so that the calling component is triggered when the time is monitored.
Preferably, the preset rule comprises a preset data format and a custom variable; the preprocessing includes data sorting and data modification.
Preferably, the inheritance function is implemented based on a class template and an extended template in the front language.
Further, to achieve the above object, the present invention also provides a computer apparatus comprising: the linkage pull-down component selection program based on H5 is stored in the memory, and when being executed by the processor, the linkage pull-down component selection program based on H5 realizes 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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether a default value exists in the display bullet layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
In addition, in order to achieve the above object, the present invention further provides an electronic device, including a calling component triggering module, configured to trigger a calling component based on the obtained service data, where the calling component is configured to call display data of a pull-down component; the display bullet layer display module is used for displaying the pull-down component based on the display data so as to display the display bullet layer corresponding to the calling component; the judging module is used for judging whether the display bullet layer has a default value or not and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box; and the function display module is used for matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet 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 linkage pull-down component selection program, and when the H5-based linkage pull-down component selection program is executed by a processor, any step in the above H5-based linkage pull-down component selection method is implemented.
According to the linkage pull-down component selection method based on H5, the electronic device, the computer equipment and the computer readable storage medium, pull-down component display is carried out based on the triggered calling component, so that the corresponding display bullet layer is displayed, the corresponding pull-down function is matched according to the selective operation of a user on the display bullet 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 characteristic of most linkage pull-down at present.
Drawings
FIG. 1 is a flow chart of a linkage pull-down component selection method based on H5 according to the present invention;
FIG. 2 is a flowchart of a preferred embodiment of a method for selecting drop-down linkage components based on H5;
FIG. 3 is a schematic diagram of an application environment of a preferred embodiment of a method for selecting drop-down link components based on H5;
FIG. 4 is a block diagram of a preferred embodiment of the computer apparatus selected from the drop-down linkage component based on H5 of FIG. 3.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The invention further provides a linkage pull-down component selection method based on H5. Referring to fig. 1, a flow chart of a linkage pull-down component selection method based on H5 is shown. The method may be performed by an apparatus, which may be implemented by software and/or hardware.
In this embodiment, the linkage pull-down component selection method based on H5 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 performing pull-down component display based on the display data to display the display bullet layer corresponding to the calling component.
Before step S10, a data processing procedure is also included, which further includes:
1. preprocessing the service data according to a preset rule to form normative service data, meanwhile, packaging an inheritance function in the service assembly, and storing the service data and the normative service data in a block chain;
2. forming a service component example based on normative service data and specific service of the inherited service component;
3. event monitoring is carried out on the service component instance, and the calling component is triggered when the event is monitored.
It should be emphasized that, in order to ensure the privacy and security of the service data and the normative service data, the service data and the normative service data may also be stored in the nodes of the block chain.
The preprocessing of the service data mainly includes data sorting and data modification, and the preset rule includes a preset data format, a custom variable, and the like, in other words, the business data is subjected to normative sorting and modification and can also be understood as a data specification, and the data specification mainly refers to that a developer performs data sorting and modification according to a certain data format, and includes a variable for the developer to customize. For example, value in the data structure of the service data of the present invention represents data returned by the callback function, and when the content shown in the drop-down list is different from the data that needs to be returned, the setting can be performed by the value. Ckld represents the field that defines the comparison by which an item of the drop down list is compared when clicked, and date. Savlue is used for the content presented by the drop down list options. Child is the data of the next stage, and when the secondary data is the last stage, the value is null.
In addition, based on personalized development of different services, the linkage pull-down component selection method based on H5 only provides one class, and in the actual use process, a new class is required to be used for inheritance. The inherited capability is realized based on a front-end language, such as a class module and an extended module in ecmascript6, then basic capability of linkage pull-down is encapsulated into the component, the basic capability of the component can be used only by inheriting the component, and the customized capability can be developed in the component. That is, basic functions are collected in a parent component, basic capabilities can be obtained by inheriting the parent component from the component, and meanwhile, other capabilities can be created by self-defining of sub-components.
After the data specification and inheritance processing, the specific service component has the function of use, only one instance, namely the service component instance, is formed on the basis of the specific service component, the linkage pull-down component selection method is bound on the monitoring event, the event monitoring is carried out on the service component instance, and the display and hiding capability of the pull-down frame and the like can be triggered as long as the event is monitored.
In a specific embodiment of the present invention, the basic functions of the linkage pull-down assembly include three modules, respectively selected. The selection.vue is mainly used for processing rendering updating of breadcrumbs, has the effects of clicking a breadcrumbs item list to turn pages and selecting, is used for displaying a drop-down list, realizing gesture recognition and page turning, and has the effect of selecting the drop-down item, and the distdocker.vue is used for contacting the selection.vue and the intermediate of the selection.vue, initializing each component, having display or hiding capability and executing callback.
In the three modules, the selectlest.vue returns new data to the distpacker.vue through event response, and the swap.vue updates own data through watch response, so that own update is triggered; and in the same way, the swap.vue responds to the dispatch.vue through an event, and the select.vue realizes the self update through the watch. In other words, if the breadcrumb clicks one of the items, the event notifies the distpicker data update, and the swap knows that the data is updated through the watch, and turns to a new page. The three modules interact with each other to provide various functions, and are concentrated to the dispicker to be output to the outside in a unified mode.
S30: judging whether a default value exists in the display bullet 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.
In step S30, when the default value does not exist in the display shell, the first page is displayed as the display page, meanwhile, the breadcrumbs are set to be empty, and no parameter is selected in the drop-down box; and when the default value exists in the display bullet layer, displaying the page indicated by the default value as a display page, filling the breadcrumb data into the corresponding default value, and selecting the corresponding default value in the drop-down box.
Specifically, when the default value exists in the display elastic layer, the breadcrumbs are filled into the default value, the pull-down frame pages are positioned to the content associated with the breadcrumbs in the last layer, and the default value is selected by the pull-down frame parameter default; otherwise, the breadcrumbs are empty, which may prompt "please select", the drop-down box is the first page, and no default selection is made. In this step, when the exhibition capability is called by the service, whether a default value exists is determined by using the incoming parameter as a standard. If the parameter is not null, a default value exists. When the basic function module is initialized, default values are passed to each module for initialization, vue (vue is one of the currently popular H5 development frameworks in China, and the DOM structure of the page can be automatically updated according to the change of component data) is automatically rendered on the page.
S40: and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
The selective operation of the display bullet layer mainly refers to the selective operation of a user on the display bullet layer, when the pull-down frame is displayed, the pull-down assembly can provide rich functions for the user to operate, and the user can be assisted to select in multiple modes. The operation of the user on the display bullet layer mainly comprises the following steps: a breadcrumb click, a drop down box click, a gesture slide left or right, a gesture slide up or down, etc. And each operation of the corresponding user is configured with a corresponding operation flow.
Wherein, the pull-down function of pull-down subassembly includes: displaying the pull-down floating layer, closing the pull-down floating layer, clicking page turning, sliding page turning, selecting an effect, executing a callback and/or selecting breadcrumbs.
In addition, the sliding page turning comprises gesture left-right sliding page turning and 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 preset time, controlling the gesture to slide left and right to turn pages and trigger; 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 to turn pages and triggering.
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 scene, for example, the first preset pixel distance can be set to be 5 pixels, the second preset pixel distance can be set to be 5 pixels and the like, the preset time can be set to be 300ms, and the preset multiple is 1.73 times and the like.
Specifically, the operation of clicking the breadcrumbs is performed, the drop-down box 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 a screen of a terminal (for example, a mobile phone) of a user, and meanwhile, the breadcrumbs are also adjusted, and the currently selected breadcrumbs are added to the end through addition and deletion and are highlighted. Clicking the drop-down box to judge whether the current page is the last page, if so, directly closing the popup layer and triggering callback; if not, the next page will be automatically turned over, and at the same time, the breadcrumbs will also add a level to point to the new page drop-down box. When the gesture slides left and right, the pull-down frame slides along with the sliding of the fingers, and when the fingers slide to a certain distance away from the screen, the fingers automatically turn over a page forwards or backwards; the bread crumb highlight will also follow the slide 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 the closing are triggered by touch and click events, a dom node is generated and is plugged into the body, the dom node is destroyed when the dom node is hidden, a segment of html segment is generated by using a render function of vue when the dom node is generated, and the destruction of the dom node is realized by destroying vue objects firstly and then deleting the dom node.
Because each page is horizontally placed, the position is not displayed when the page falls into the screen and is displayed outside the screen, the position of the next page or the previous page is dynamically calculated by js, the animation effect of turning one page to the other page is realized by the transition effect of transform 3d of transform of css, and meanwhile, the transform 3d triggers gpu acceleration to increase the rendering performance. The finger sliding is to realize that the screen slides along with the finger through a touchmove event in the touch event, the touchmove event triggers to acquire the current position, and the position of the last touchmove event is transited to the current position through the transition effect of translate3 d.
In the linkage pull-down component based on H5, the triggering judgment of touch event and click event is as follows: in the first case, when the gesture of the finger is not a vertical or horizontal swipe (a vertical swipe is scrolling a list, a horizontal swipe is flipping a page); in the second case, the sliding distance is how long to turn over one page.
Specifically, there are two specific examples of the basis for determining whether the event is a slide or a click event, where one is that the slide distance does not exceed 5px (pixels, the same applies hereinafter), or the slide time does not exceed 300ms, and the event is regarded as a tap event; whether the gesture is classified into horizontal sliding or vertical sliding is also judged according to two criteria, namely, whether the horizontal sliding is smaller than 5px, and whether the vertical sliding distance is larger than 1.73 times of the horizontal distance, the gesture is regarded as vertical sliding, and if the vertical sliding or the horizontal sliding is confirmed in the first few times, all the subsequent sliding is locked to be performed in the confirmed direction.
Therefore, the user experience can be improved, and the oblique sliding can be supported for page turning or scroll bar sliding. For example, a page is flipped when the distance of the lateral sliding is greater than or equal to one-quarter of the screen. The breadcrumb implementation is to monitor the change of the breadcrumb data by using a watch method of vue, so that the breadcrumb updating and the starting of the selected animation are realized by depending on the transition effect of translate3d, and the principle is that the bottom thick line of the last selected breadcrumb item slowly moves to the left or right to the bottom of the new selected breadcrumb item, and the bottom thick line adapts to the width of the new breadcrumb item and dynamically stretches or shortens.
In addition, the selecting effect is to utilize a click event to monitor the change of the trigger list item pattern and trigger a hook for turning down a page or ending the whole flow trigger callback. The callback is executed in the component (pull-down component or linkage pull-down component) by using the js function high-level application and taking the callback function as an incoming parameter.
As a specific example, FIG. 2 shows a detailed flowchart of a method for H5-based drop-down linkage component selection according to an embodiment of the present invention.
As shown in fig. 2, the method for selecting a linkage pull-down component based on H5 according to the embodiment of the present invention includes the following steps:
s201: starting or starting the linkage pull-down component selection method based on H5;
s202: standardizing specific service data; meanwhile, S203: inheriting the specific service data to acquire a corresponding service component, namely step S204;
s205: event monitoring is carried out on the service components;
s206: when monitoring that the event occurs, triggering and calling a component program;
s207: after the calling component is triggered, displaying the pull-down component, namely displaying the display bullet layer;
s208, judging whether a default value exists in the display bullet layer, and carrying out corresponding processing according to the existence condition of the default value;
s209: when the display elastic layer does not have a default value, displaying the first page by default, wherein the breadcrumbs are empty, and the pull-down frame is not selected by default;
s210: when the display bullet layer has a default value, the default display default value indicates the page, the breadcrumbs are filled as the default value, and the default value is selected by the pull-down box in a default mode;
s211: abundant user operations are configured in the pull-down assembly, and a user can selectively operate according to requirements;
s212: a user clicks on a breadcrumb clicking function;
s213: turning pages to a selected page according to the click of the user;
s214: after the selected page is turned, automatically clearing the breadcrumbs behind the current page;
s215: clicking or triggering a pull-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 to the next page;
s218: updating a layer of bread crumbs;
s219: if the current page is the last page, closing the popup layer, and then executing S220 to trigger callback and ending (step S221);
s222: the user slides the fingers left and right to trigger the gesture left and right sliding function;
s223: page turning is carried out on the corresponding pull-down frame left and right; s224: the breadcrumbs are focused and slide left and right;
s225: the user slides the finger up and down to trigger the up and down sliding function of the mobile phone; s226: and the pull-down frame rolls up and down.
By utilizing the linkage pull-down component selection method based on H5, the invention has the following advantages:
1. the unified data definition specification can be provided, great convenience is provided for future maintenance, and problems caused by data structure problems can be avoided; it also serves as a standard for future diverse scenario usage, all scenario usage should be implemented with this specification; meanwhile, the specification also provides a sufficient user-defined entrance, so that the personalized design of the scene is facilitated.
2. The method is used as a highly abstract component, does not contain the characteristics of a concrete scene, the concrete scene can directly use the functions of the component only by inheriting the specific scene, so that the application range of the component is wide, meanwhile, the concrete scene is extremely convenient to use, the development workload of the concrete scene is reduced, a pull-down component can be generated only by 2 steps, concrete scene data is converted into standard data in the first step, and the component is quoted in the second step.
3. From the design level, the breadcrumbs of the component can reach 10 levels theoretically, the reality is possibly not so much due to the limitation of the screen of the mobile phone and the requirement of displaying the file, and the style can be defined by self to display more levels.
4. From the structure of the Html code for generating the pull-down component, the component is always placed under the body, and is not nested in other containers, so that the problem that the mask is incomplete when the iOS occurs is solved, meanwhile, a label related to the component does not need to be added to an vue file, and a user only needs to maintain js without maintaining a template through calling of a method.
In addition, the linkage pull-down component selection method based on H5 is applied to the computer equipment 1. Referring to FIG. 3, a schematic diagram of an application environment of a preferred embodiment of the method for selecting a pull-down linkage component based on H5 is shown.
In the present embodiment, the computer device 1 may be a terminal device having an arithmetic function, such as a server, a smart phone, a tablet computer, a portable computer, and a desktop computer.
The computer device 1 includes: a processor 12, a memory 11, a network interface 14, and a 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-type memory 11, and the like. 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 (FlashCard), and the like, which are provided on the computer device 1.
In the present embodiment, the readable storage medium of the memory 11 is generally used for storing the H5-based linked pull-down component selection program 10 and the like installed in the computer apparatus 1. The memory 11 may also be used to temporarily store data that has been output or is to be output.
The network interface 14 may optionally comprise a standard wired interface, a wireless interface (e.g. WI-FI interface), typically used for establishing a communication connection between the computer device 1 and other electronic devices.
The communication bus 15 is used to realize connection communication between these components.
Fig. 3 shows only a computer device 1 with components 11-15, but it is to be understood that not all of the 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 speech input device such as a microphone (microphone) or other device with speech recognition functionality, a speech output device such as a sound, a headset or the like, and optionally a standard wired interface, a wireless interface.
Optionally, the computer device 1 may further comprise a display, which may also be referred to as a display screen or display unit. In some embodiments, the display device may be an LED display, a liquid crystal display, a touch-sensitive 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 touch operation is called a touch area. Further, the touch sensor described herein may be a resistive touch sensor, a capacitive touch sensor, or the like. The touch sensor may include not only a contact type touch sensor but also a proximity type touch sensor. Further, the touch sensor may be a single sensor, or may be a plurality of sensors arranged in an array, for example.
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 touch operation triggered by a user based on the touch display screen.
Optionally, the computer device 1 may further include a Radio Frequency (RF) circuit, a sensor, an audio circuit, and the like, which are not described herein again.
In the embodiment of the apparatus shown in FIG. 3, the memory 11, which is a kind of computer storage medium, may include therein an operating system, and a linkage pull-down component selection program 10 based on H5; the following steps are implemented by processor 12 when executing program 10 selected by the H5-based linked pull-down component stored in 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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether a default value exists in the display bullet layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
Specifically, matching corresponding selective operations based on the presence of default values includes:
when the display bullet layer has no default value, displaying the first page as a display page, setting the breadcrumbs to be empty, and not selecting any parameter in the drop-down frame;
and when the default value exists in the display bullet layer, displaying the page indicated by the default value as a display page, filling the breadcrumb data into the corresponding default value, and selecting the corresponding default value in the drop-down box.
In addition, the pull-down functionality of the pull-down component includes: displaying the pull-down floating layer, closing the pull-down floating layer, clicking page turning, sliding page turning, selecting an effect, executing a callback and/or selecting breadcrumbs.
Preferably, the sliding page turning comprises gesture left-right sliding page turning and gesture up-down sliding page turning; wherein the content of the first and second substances,
when the gesture sliding distance is smaller than a first preset pixel distance or the gesture sliding time is smaller than preset time, controlling the gesture to slide left and right to 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 to turn pages and triggering.
Further, before triggering the calling component, the method further comprises: firstly, preprocessing service data according to a preset rule to form normative service data, meanwhile, encapsulating an inheritance function in a service assembly, and storing the service data and the normative service data in a node of a block chain in order to ensure the privacy and the safety of the service data and the normative service data;
then, based on normative service data and specific service of the inherited service component, a service component example is formed; finally, event monitoring is carried out on the business component instance, so that the calling component is triggered when the event is monitored.
In another aspect, the present invention also provides an electronic device, which can also be understood as an H5-based linked pull-down component selection program provided in a computer device, and the program can 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 modules referred to herein are referred to as a series of computer program instruction segments capable of performing specified functions.
Referring now to FIG. 4, a block diagram of a preferred embodiment of the selected program 10 for the H5-based linked pull-down component of FIG. 3 is shown. The H5-based linked pull-down component selection program 10 can be divided into:
a calling component triggering module 110, configured to trigger a calling component based on the obtained service data, where the calling component is used to call display data of a pull-down component;
the display bullet layer display module 120 is configured to perform pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
the judging module 130 is configured to judge whether a default value exists in the display bullet layer, and match corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box;
and 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 bullet layer.
In addition, an embodiment of the present invention further provides a computer-readable storage medium, where the computer-readable storage medium includes an H5-based linkage pull-down component selection program, and when executed by a processor, the H5-based linkage pull-down component selection program implements the following operations:
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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether a default value exists in the display bullet layer or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
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 for selecting a pull-down linkage component based on H5 and the electronic apparatus, and are not repeated herein. It should be emphasized that, in order to further ensure the privacy and security of the service data, the service data may also be stored in a node of a block chain.
The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service 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 an … …" does not exclude the presence of other like elements in a process, apparatus, article, or method that includes the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments. Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. An H5-based linkage pull-down component 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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether the display bullet layer has a default value or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs, and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
2. The H5-based ganged pull-down component selection method of claim 1, wherein the matching of corresponding selective operations based on the presence of the default value comprises:
when the display bullet layer does not have a default value, displaying a first page as a display page, setting the breadcrumbs to be empty, and not selecting any parameter in the pull-down frame;
and when the display bullet layer has a default value, displaying the page indicated by the default value as a display page, filling the breadcrumbs data into the corresponding default value, and selecting the corresponding default value in the drop-down box.
3. The H5-based linkage pull-down component selection method according to claim 1, wherein the pull-down function of the pull-down component includes:
displaying the pull-down floating layer, closing the pull-down floating layer, clicking page turning, sliding page turning, selecting an effect, executing a callback and/or selecting breadcrumbs.
4. The H5-based linkage pull-down component selection method according to claim 3, wherein the sliding page turning includes gesture left-right sliding page turning and gesture up-down sliding page turning; wherein the content of the first and second substances,
when the gesture sliding distance is smaller than a first preset pixel distance or the gesture sliding time is smaller than preset time, controlling the gesture to slide left and right to turn pages to be triggered;
and when the gesture sliding distance is smaller than a second preset pixel distance and the vertical sliding distance of the gesture sliding is larger than a preset multiple of the horizontal sliding distance, controlling the gesture to slide up and down to turn pages to be triggered.
5. The H5-based linkage pull-down component selection method according to claim 1, further comprising, before triggering the invocation component:
preprocessing the service data according to a preset rule to form normative service data, meanwhile, packaging an inheritance function in a service assembly, and storing the service data and the normative service data in a block chain;
inheriting the specific service of the service component based on the normative service data to form a service component example;
and carrying out event monitoring on the service component instance so as to trigger the calling component when an event is monitored.
6. The H5-based linkage pull-down component selection method of claim 5,
the preset rule comprises a preset data format and a user-defined variable;
the preprocessing includes data sorting and data modification.
7. The H5-based linkage pull-down component selection method of claim 5,
the inheritance function is realized based on a class template and an extended template in the front-end language.
8. A computer device, characterized in that the computer device comprises: the storage is stored with an H5-based linkage pull-down component selection program, and when the H5-based linkage pull-down component selection program is executed by the processor, the following steps are realized:
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;
performing pull-down component display based on the display data to display a display bullet layer corresponding to the calling component;
judging whether the display bullet layer has a default value or not, and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs, and a drop-down box;
and matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
9. 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;
the display bullet layer display module is used for displaying the pull-down component based on the display data so as to display a display bullet layer corresponding to the calling component;
the judging module is used for judging whether a default value exists in the display bullet layer or not and matching corresponding selective operation based on the existence condition of the default value; wherein the selective operation comprises selection of parameters of a presentation page, breadcrumbs, and a drop-down box;
and the function display module is used for matching and displaying the pull-down function of the pull-down component corresponding to the selective operation based on the selective operation of the display bullet layer.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium includes an H5-based ganged pull-down component selection program, and the H5-based ganged pull-down component selection program, when executed by a processor, implements the steps of the H5-based ganged pull-down component selection method according to any one of claims 1 to 7.
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 true CN111857715A (en) | 2020-10-30 |
| CN111857715B 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) |
Cited By (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 (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130232128A1 (en) * | 2012-03-05 | 2013-09-05 | Microsoft Corporation | Application of breadcrumbs in ranking and search experiences |
| US20130275921A1 (en) * | 2012-04-13 | 2013-10-17 | Jongwoo LEE | Accordion style bread crumbing for mobile applications |
| US20170075542A1 (en) * | 2015-09-10 | 2017-03-16 | Adp, Llc | Pinable and actionable navigation breadcrumbs |
| 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 |
-
2020
- 2020-07-22 CN CN202010712847.8A patent/CN111857715B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130232128A1 (en) * | 2012-03-05 | 2013-09-05 | Microsoft Corporation | Application of breadcrumbs in ranking and search experiences |
| US20130275921A1 (en) * | 2012-04-13 | 2013-10-17 | Jongwoo LEE | Accordion style bread crumbing for mobile applications |
| US20170075542A1 (en) * | 2015-09-10 | 2017-03-16 | Adp, Llc | Pinable and actionable navigation breadcrumbs |
| 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 (2)
| Title |
|---|
| 包志炎 等: "基于ASP.Net的动态下拉菜单导航条的快速实现", 电脑知识与技术(学术交流), no. 20, pages 174 - 175 * |
| 杨一平;: "电商网站面包屑导航设计技巧和方法", 计算机与网络, no. 10, pages 49 * |
Cited By (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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111857715B (en) | 2023-08-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8645849B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
| US10643023B2 (en) | Programmatic native rendering of structured content | |
| US10949381B2 (en) | Reusable transformation mechanism to allow mappings between incompatible data types | |
| US20050138567A1 (en) | Method of realistically displaying and interacting with electronic files | |
| US10402470B2 (en) | Effecting multi-step operations in an application in response to direct manipulation of a selected object | |
| CN107479892B (en) | Popup frame view creating method and device and electronic equipment | |
| US20140143763A1 (en) | Method and System to develop operating system agnostic software applications for mobile devices using a virtual machine | |
| KR20080021081A (en) | Fine-grained control of z-order elements in a xml presentation | |
| WO2023093414A1 (en) | Micro-application development method and apparatus, and device, storage medium and program product | |
| KR102350540B1 (en) | digital component background rendering | |
| CN114385940A (en) | Data visualization method, device, equipment and medium | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN113391808A (en) | Page configuration method and device and electronic equipment | |
| WO2013109858A1 (en) | Design canvas | |
| CN111857715B (en) | H5-based linked pull-down component selection method, device, equipment and storage medium | |
| CN111626021B (en) | Presentation generation method and device | |
| CN116719456A (en) | Icon style switching method and device, electronic equipment and storage medium | |
| CN106383705B (en) | Method and device for setting mouse display state in application thin client | |
| CN111198830B (en) | Identification method and device of mobile storage equipment, electronic equipment and storage medium | |
| CN111176770B (en) | Method and device for preventing control from repeatedly clicking and computer readable storage medium | |
| CN114594948A (en) | Method, device, system, equipment and medium for generating dynamic drop-down box control | |
| CN109614160B (en) | Prompting method and device and electronic equipment | |
| CN114217877A (en) | Operation processing method, device, equipment and medium based on page interaction component | |
| CN113157355A (en) | Method for customizing user interface of upper computer, electronic device and storage medium | |
| Randhawa | User Interaction Optimization |
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 |