CN111104114B - Method, system and equipment for realizing self-belt-state controllable carousel graph component - Google Patents
Method, system and equipment for realizing self-belt-state controllable carousel graph component Download PDFInfo
- Publication number
- CN111104114B CN111104114B CN201911266143.6A CN201911266143A CN111104114B CN 111104114 B CN111104114 B CN 111104114B CN 201911266143 A CN201911266143 A CN 201911266143A CN 111104114 B CN111104114 B CN 111104114B
- Authority
- CN
- China
- Prior art keywords
- carousel
- component
- icon
- state
- automatic
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000010586 diagram Methods 0.000 claims abstract description 50
- 238000004590 computer program Methods 0.000 claims description 12
- 238000004806 packaging method and process Methods 0.000 claims description 2
- 230000000694 effects Effects 0.000 description 7
- 230000004048 modification Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 239000000463 material Substances 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000037361 pathway Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application relates to a method and a system for realizing a self-belt-state controllable carousel diagram component and computer equipment, wherein the method comprises the following steps: adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to an automatic carousel state or not, and whether the carousel map needs to be manually switched or not; adding a mouse trigger event to control whether the carousel icon is automatic or not; configuring a carousel graph according to various attributes in the configuration file; presenting the carousel graphics according to the configured carousel graphics component, and displaying the carousel state in real time through the state icon; and when a mouse trigger event occurs, controlling the carousel graph component to perform corresponding carousel switching. According to the application, the status icon is added to the carousel map to identify whether the carousel map belongs to the automatic carousel status or not, and whether the carousel map needs to be manually switched or not is convenient for a user to clearly see the carousel status, and whether the carousel map is automatic or not is controlled by adding the mouse trigger event, so that the problem that the interface is too complicated due to the control of adding the button is solved.
Description
Technical Field
The present application relates to the field of front-end interface processing technologies, and in particular, to a method and a system for implementing a self-belt-state controllable carousel graphics component, a computer device, and a readable storage medium.
Background
Along with the development of technology, the requirements on the front-end interface effect are higher and higher, and the open-source or non-open-source carousel graph components disclosed in the prior art are all automatically carousel, or manually switched, or a button is added to control carousel.
The interface of the carousel graph component in the prior art is too complicated, and if the carousel time interval is too long, whether the carousel graph is an automatic carousel cannot be judged.
Accordingly, the prior art is in need of improvement.
Disclosure of Invention
The application aims to solve the technical problem of providing a method and a system for realizing a self-state controllable carousel graph component, computer equipment and a readable storage medium. In addition, whether the carousel image is automatic or not is controlled by adding a mouse trigger event, so that the problem that an interface is too complicated by adding button control is solved.
A method for implementing a self-banded controllable carousel graph component, wherein the method comprises:
adopting vue frame to refer to the packaged carousel graph component;
adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to an automatic carousel state or not, and whether the carousel map needs to be manually switched or not;
adding a mouse trigger event on the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically carousel;
whether the carousel graphs automatically play the carousel, switch the time interval automatically, the number of items displayed by the current container and the carousel direction are configured according to various attributes in the configuration file; configuring carousel map data;
presenting the carousel graphics according to the configured carousel graphics component, and displaying the carousel state in real time through the state icon;
and when a mouse trigger event occurs, controlling the carousel graph component to perform corresponding carousel switching.
The implementation method of the self-contained state controllable carousel graph component, wherein before the step of adopting the vue framework to refer to the packaged carousel graph component, further comprises the following steps:
and setting a configuration file, setting attributes to be configured and notes of the attributes, and transmitting parameters to the carousel graph component by using a vue component mode through a father component.
The implementation method of the self-contained state controllable carousel graph component, wherein the step of adopting vue frames to refer to the packaged carousel graph component comprises the following steps:
adopting a vue frame to package the carousel graph component;
the encapsulated carousel graph component is referenced using a vue framework.
The method for realizing the self-contained state controllable carousel graph component, wherein the steps of configuring whether the carousel graph is automatically carousel, automatically carousel switching time intervals, the number of items displayed by the current container and carousel direction according to various attributes in a configuration file comprise the following steps:
whether the carousel is automatically played or not is configured according to various attributes in the configuration file;
configuring an automatic multicast time interval;
configuring the number of items which can be displayed by the current carousel graph component;
and configuring the carousel direction.
The method for realizing the self-contained state controllable carousel graph component, wherein a state icon is added on a carousel graph of the carousel graph component and used for identifying whether the carousel graph belongs to an automatic carousel state or not, and the step of whether the carousel graph needs to be manually switched comprises the following steps:
stopping the automatic wheel broadcasting when the mouse is set to be selected, wherein the state is marked as gray in the upper right corner, which represents stopping the automatic wheel broadcasting and can be manually switched; when the mouse is set to be deselected, the state is a white animation with the upper right corner marked as flashing.
The implementation method of the self-contained state controllable carousel graph component, wherein the step of adding a mouse trigger event on a carousel graph of the carousel graph component to control whether the carousel graph is automatic or not comprises the following steps of:
and stopping automatic multicasting when the mouse clicks to select is set, and clicking the mouse again to cancel the selection.
A self-banded controllable carousel graphics component implementation system, wherein the system comprises:
the packaging module is used for referencing the packaged carousel graph component by adopting a vue framework;
the status icon adding module is used for adding a status icon on the carousel icon of the carousel icon assembly and identifying whether the carousel icon belongs to an automatic carousel state or not and whether the carousel icon needs to be manually switched or not;
the mouse trigger event adding module is used for adding a mouse trigger event to the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically played or not;
the configuration module is used for configuring whether the carousel graphs are automatic carousel, automatic carousel switching time intervals, the number of items displayed by the current container and carousel directions according to various attributes in the configuration file; configuring carousel map data;
the carousel diagram presenting module is used for presenting a carousel diagram according to the configured carousel diagram component and displaying the carousel state through the state icon in real time;
and the carousel switching module is used for controlling the carousel graph component to perform corresponding carousel switching when a mouse trigger event occurs.
The self-belt-state controllable carousel diagram component implementation system further comprises:
the configuration file setting module is used for setting a configuration file, setting attributes to be configured and notes of the attributes, and transmitting parameters to the carousel graph component by using a vue component mode through the father component.
A computer device comprising a memory and a processor, the memory storing a computer program, wherein the processor, when executing the computer program, implements the steps of any of the self-contained controllable carousel graphics component implementing methods.
A computer readable storage medium having stored thereon a computer program, wherein the computer program when executed by a processor implements the steps of the controllable carousel graphics component implementation method of any of the self-contained states.
Compared with the prior art, the embodiment of the application has the following advantages:
the embodiment of the application provides a method and a system for realizing a controllable carousel graph component with a state, computer equipment and a readable storage medium; and vue frames are adopted to package the carousel graph components, carousel graph component codes of third-party open sources are collected, the representation of carousel graphs is realized, and the basic carousel functions are met. Whether the carousel map is automatic carousel (automatic), automatic carousel switching time interval (delay), a current container can display several items (slide PerView), carousel direction (direction) and the like can be configured according to various attributes in the configuration file; on one hand, the configuration file satisfies the requirements of different personnel and modification of the attribute of the carousel map, and on the other hand, the configuration file is convenient for some non-developers to carry out configuration modification of the carousel map style. The application has the attribute to be configured and the annotation of the attribute in the configuration file. Using the vue component approach, data is passed parameters by the parent component to the carousel graph component. The automatic carousel of the carousel graph is controlled by clicking an event with a mouse to replace the original mode of adding a button to control carousel of the carousel graph, so that the interface is simplified, and the operation of a user is facilitated; meanwhile, a status icon is added at the upper right corner of the carousel chart, so that a user is directly and clearly informed of the carousel status of the current carousel chart, unnecessary operation by the user is avoided, time is wasted, and operation efficiency is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments described in the present application, and other drawings may be obtained according to the drawings without inventive effort to those skilled in the art.
Fig. 1 is a flow chart of a method for implementing a self-belt-like controllable carousel graphics component according to an embodiment of the present application.
Fig. 2 is a configuration file and an explanatory diagram of a method for implementing a self-tape controllable carousel graphics component according to an embodiment of the present application.
Fig. 3 is a schematic diagram of a manual switching state structure of a mouse trigger event of a method for implementing a self-tape-like controllable carousel icon assembly according to an embodiment of the present application.
Fig. 4 is a schematic diagram of an automatic carousel state structure of a mouse trigger event of a method for implementing a self-banded controllable carousel graph component according to an embodiment of the present application.
Fig. 5 is a flowchart of an embodiment of a method for implementing a self-belt-state controllable carousel graphics component according to the present application.
Fig. 6 is a schematic structural diagram of a system for implementing a self-belt-like controllable carousel graphics component according to an embodiment of the present application.
Fig. 7 is an internal structural diagram of a computer device in an embodiment of the present application.
Detailed Description
In order to make the present application better understood by those skilled in the art, the following description will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings, and it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
The inventor finds that the realization difficulty of the dynamic road network in the prior art is high, and faces two problems, namely 1. The dynamic road network has no availability at all, and the running efficiency is extremely low by only relying on the dynamic road network developed by combining the weak performance of the CPU in the aspect of parallel computation and a third party library. To achieve this effect, the memory expansion and running frame rate are severely reduced, and the advantages of the graphics method and 3D accelerator GPU are not effectively utilized. 2. The system has certain availability and standard performance, but the implementation depends on a specific third party library, so that most of attributes can not be configured due to relatively dead implementation effects, and the system is difficult to combine with the existing system.
In order to solve the above problems, in an embodiment of the present application, a method for implementing a self-belt-like controllable carousel graphics component; dynamic data of all road networks are calculated in parallel by means of a graphics method and a 3D accelerator GPU, and the method is low in memory and efficient in operation. Meanwhile, various interfaces with the effect of rewriting the road network are completely written from the bottom glsl, so that the line color/length/width/sparseness/circulation movement speed can be controlled.
GPUs, also known as display cores, vision processors, display chips, are microprocessors that operate exclusively on personal computers, workstations, gaming machines, and some mobile devices (e.g., tablet computers, smartphones, etc.), similar to CPUs, except that GPUs are designed specifically for performing complex mathematical and geometric calculations that are necessary for graphics rendering.
Various non-limiting embodiments of the present application are described in detail below with reference to the attached drawing figures.
Referring to fig. 1, fig. 1 shows a method for implementing a self-contained state controllable carousel graphics component according to an embodiment of the present application, where, as shown in fig. 1, the method in an embodiment of the present application includes:
s10, adopting a vue frame to quote the packaged carousel graph component;
in the embodiment of the application, the self-belt-state controllable carousel diagram component firstly adopts a vue framework to encapsulate the carousel diagram component, integrates carousel diagram component codes of a third-party open source, realizes the presentation of carousel diagrams, and meets the basic carousel function. First, the encapsulated carousel graph component is referenced using the vue framework.
S20, adding a status icon on the carousel diagram of the carousel diagram component to identify whether the carousel diagram belongs to an automatic carousel state or not, and whether the carousel diagram needs to be manually switched or not.
In the embodiment of the application, a status icon is added on the carousel diagram of the carousel diagram component to identify whether the carousel diagram belongs to an automatic carousel state or not, and whether the carousel diagram needs to be manually switched or not is judged.
As shown in fig. 3 and fig. 4, when the mouse is set to select, stopping the automatic wheel broadcasting, wherein the state is shown in fig. 2, the mark on the upper right corner is gray, which represents stopping the automatic wheel broadcasting, and the manual switching can be performed; when the mouse is set to be deselected, the state is as shown in fig. 3 below, and the upper right corner is marked as a flashing white animation.
S30, adding a mouse trigger event on the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically carousel;
in the embodiment of the application; the automatic carousel of the carousel graph is controlled by adding a mouse click event, and the carousel graph carousel mode is controlled by replacing the original adding button. For example, stopping the automatic multicasting when the mouse clicks to select is set, and clicking the mouse again to cancel the selection.
S40, whether the carousel graphs are automatically carousel, automatic carousel switching time intervals, the number of items displayed by the current container and carousel directions are configured according to various attributes in the configuration file; configuring carousel map data;
in the embodiment of the application, whether the carousel diagram is automatic or not (automatic), the automatic carousel switching time interval (delay), the current container can display several items (glides PerView), the carousel direction (direction) and the like can be configured according to various attributes in the configuration file.
In the implementation of the application, a configuration file is required to be preset, the attribute to be configured and the annotation of the attribute are set, a vue component mode is used, the data is transmitted to the carousel graph component by the father component, and if the data is not transmitted, the default data is displayed to render the carousel graph.
Such as the configuration file of fig. 1, in which there are attributes to be configured and comments on the attributes.
According to the application, on one hand, different personnel and modification of the attribute of the carousel map are satisfied through the configuration file, and on the other hand, some non-developers can randomly perform configuration modification of the carousel map style. For example, in an item, a carousel graph component is used, the item is given to a client, and the client wants to have the carousel graph carousel slower, because a carousel too fast may cause a certain item to switch to the next item without being seen clearly. When such problems occur with reference to some of the currently existing open-source or non-open-source carousel graphs, a developer is required to make modifications to project source code. At this time, a series of processes are performed, such as the first step: the field technical support personnel learn the requirement record from the client side; and a second step of: a developer who developed the project is contacted by a series of pathways; and a third step of: the developer receives the request to modify the source code, and may modify the carousel time interval to 20s, 30s or the like, and the modified repackaged patch package is provided for technical support; fourth step: the technical support is demonstrated to the customer again, if the requirements of the customer are met, the process is required to be repeated once the requirements of the customer are not met; obviously, a great deal of time and manpower and material resources are wasted, and project acceptance, corporate reputation and the like are affected in severe cases. At this time, if the self-state controllable carousel diagram component is adopted, once a customer is not satisfied with an automatic carousel switching time interval (delay) of a carousel diagram, a current container can display a plurality of items (slide PerView), a carousel direction (direction) and the like, the carousel time interval can be directly modified in real time through a configuration file, so that the requirement of the customer is met, the method is convenient and quick, a large amount of time, manpower and material resources are saved, and the flexibility of projects is improved.
S50, carrying out the representation of the carousel graphs according to the configured carousel graph components, and displaying carousel states in real time through the state icons;
according to the application, the state icons are added in the upper right corner of the carousel chart, so that the user is directly and clearly informed of the carousel state of the current carousel chart, unnecessary operation by the user is avoided, and time waste is avoided. For example, in a certain project, a previously-opened or non-opened carousel graph component is used, one or two buttons are added to control automatic carousel of a carousel graph, when the buttons are clicked to switch, a client may click the buttons to switch to a state of the automatic carousel, but the time interval is 20s, the user can see the effect of carousel graph carousel only after waiting for 20s, so that 20s are wasted every time the state is changed, and a great amount of time is wasted after the state is accumulated to the end; in addition, the clients with no shortage have urgent characters, and continuously click the buttons to see whether to stop or start the automatic multicasting, so that the problem of program breakdown can occur if serious; even if a customer can mistakenly take the effect that the button does not switch the state, the problems are fed back to the on-site technical support personnel, and then the opening personnel are informed to perform a series of problem positioning operations, so that time and manpower and material resources are wasted more.
Therefore, the application adopts the self-belt-state controllable carousel graph component, the state icon at the upper right corner can directly and clearly inform the user of the state of the carousel graph automatic carousel at the moment, if the situation occurs, the user can directly see the state when clicking, the state can be changed in real time after clicking once, the state can not be continuously clicked again after seeing the state change, the effect of not switching the automatic carousel for the mouse click can not be mistakenly obtained, the problem of the undefined state of the previous carousel graph is solved, a great amount of time, manpower and material resources are saved, and the problem of the operation of a client is avoided.
The specific operation is as follows: stopping the automatic wheel broadcasting when the mouse is selected, wherein the state is shown in the following figure 3, the mark at the upper right corner is gray, and the state represents stopping the automatic wheel broadcasting and can be manually switched; when the mouse is deselected, the state is as follows in FIG. 4, with the upper right hand corner marked as a flashing white animation.
And S60, when a mouse trigger event occurs, controlling the carousel graph component to perform corresponding carousel switching.
The specific operation is as follows: as shown in fig. 3, the automatic wheel broadcasting is stopped when the mouse clicks to select, and the state is manually switched; the automatic wheel-play state is shown in fig. 4 when the mouse is clicked again to deselect.
According to the embodiment of the application, the automatic carousel mode of the carousel graph is controlled by the mouse clicking event, so that the interface is simplified on one hand, and the operation of a user is facilitated on the other hand. For example, in a certain project, a previously-opened or non-opened carousel graph component is used, one or two buttons are added to control automatic carousel of a carousel graph, customers are not lacked or the fact that the interface is added with a plurality of buttons is superfluous, the original one-eye previous and neat interface is added with a button, the fact that the interface is added with a plurality of buttons is odd is felt, and the appearance is also influenced. However, if the button is directly removed, the carousel of the carousel map cannot be controlled, so that the requirement that a client wants to stop the carousel to see a certain item cannot be met, and if the client seriously feels that the item is dead, the flexibility is not realized.
The application adopts the self-belt-like controllable carousel graphic assembly without adding too much complicated things such as buttons and the like. The interface is simplified, so that the customer can see the interface to be bright before the eyes, the problem that the interface is too complicated is avoided easily, and the requirements of the customer are met easily.
The process according to the application is described in further detail below by way of a specific application example:
as shown in fig. 5, a method for implementing a self-contained state controllable carousel graphics component according to an embodiment of the present application includes the following steps:
1) Starting;
2) Adopting vue frame to refer to the packaged carousel graph component;
3) Adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to an automatic carousel state or not, and whether the carousel map needs to be manually switched or not;
4) Adding a mouse trigger event on the carousel map of the carousel map component to control whether the carousel map is automatically carousel;
5) Configuring whether a carousel graphics component is automatic or not;
6) Configuring an automatic multicast time interval (delay);
7) Configuring the current carousel graph container to display several items (slides PerView);
8) Configuring a carousel direction (direction);
9) Configuring carousel map data;
10 Detecting whether the data is transmitted, rendering the transmitted data when the data is transmitted, and rendering the default data when the data is not transmitted;
11 Mouse click, triggering a mouse click event;
12 Is iscocked= wire? Judging whether the mouse is selected or not, if so, starting the automatic wheel broadcasting, and changing the state into the automatic wheel broadcasting state; and when the automatic carousel is stopped otherwise, changing the state into a carousel stopping state.
13 And (3) ending.
Therefore, the method is used for identifying whether the carousel map belongs to the automatic carousel state or not by adding a state icon to the carousel map, and whether the carousel map needs to be manually switched or not, so that a user can clearly see the carousel state. In addition, whether the carousel image is automatic or not is controlled by adding a mouse trigger event, so that the problem that an interface is too complicated by adding button control is solved.
In one embodiment, the present application provides a system for implementing a self-contained state controllable carousel graphics component, as shown in fig. 5, the system comprising:
the encapsulation module 41 is used for referencing the encapsulated carousel graph component by adopting a vue framework;
a status icon adding module 42, configured to add a status icon to the carousel icon of the carousel icon component, to identify whether the carousel icon belongs to an automatic carousel state, and whether a manual switch is required;
the mouse trigger event adding module 43 is configured to add a mouse trigger event to a carousel icon of the carousel icon assembly to control whether the carousel icon is automatically played;
a configuration module 44, configured to configure whether the carousel graphics is automatic, the automatic carousel switching time interval, the number of items displayed by the current container, and the carousel direction according to various attributes in the configuration file; configuring carousel map data;
the carousel diagram presenting module 45 is configured to present a carousel diagram according to the configured carousel diagram component, and display a carousel state in real time through the state icon;
and the carousel switching module 46 is configured to control the carousel graph component to perform corresponding carousel switching when a mouse trigger event occurs.
The configuration file setting module 47 is configured to set a configuration file, set an attribute to be configured and an annotation of the attribute, and transmit parameters to the carousel graph component by using vue component mode through the father component; as described in detail above.
In one embodiment, the present application provides a computer device, which may be a terminal, with an internal structure as shown in fig. 7. The computer device includes a processor, a memory, a network interface, a display screen, and an input system connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program, when executed by a processor, implements a method of generating a natural language model. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input system of the computer equipment can be a touch layer covered on the display screen, can also be keys, a track ball or a touch pad arranged on the shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by persons skilled in the art that the block diagram of FIG. 7 is merely a partial structure associated with the present inventive arrangements and is not limiting of the computer device to which the present inventive arrangements are applied, and that a particular computer device may include more or less components than those shown, or may combine some of the components, or have a different arrangement of components.
The embodiment of the application provides computer equipment, which comprises a memory and a processor, wherein the memory stores a computer program, and the processor realizes the following steps when executing the computer program:
adopting vue frame to refer to the packaged carousel graph component;
adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to an automatic carousel state or not, and whether the carousel map needs to be manually switched or not;
adding a mouse trigger event on the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically carousel;
whether the carousel graphs automatically play the carousel, switch the time interval automatically, the number of items displayed by the current container and the carousel direction are configured according to various attributes in the configuration file; configuring carousel map data;
presenting the carousel graphics according to the configured carousel graphics component, and displaying the carousel state in real time through the state icon;
when a mouse trigger event occurs, the carousel graph component is controlled to perform corresponding carousel switching, as described above.
In summary, compared with the prior art, the embodiment of the application has the following advantages:
the embodiment of the application provides a method for realizing a self-contained state controllable carousel graph component; the method comprises the following steps: adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to an automatic carousel state or not, and whether the carousel map needs to be manually switched or not; adding a mouse trigger event to control whether the carousel icon is automatic or not; configuring a carousel graph according to various attributes in the configuration file; presenting the carousel graphics according to the configured carousel graphics component, and displaying the carousel state in real time through the state icon; and when a mouse trigger event occurs, controlling the carousel graph component to perform corresponding carousel switching. According to the application, the status icon is added to the carousel map to identify whether the carousel map belongs to the automatic carousel status or not, and whether the carousel map needs to be manually switched or not is convenient for a user to clearly see the carousel status, and whether the carousel map is automatic or not is controlled by adding the mouse trigger event, so that the problem that the interface is too complicated due to the control of adding the button is solved.
The above examples illustrate only a few embodiments of the application, which are described in detail and are not to be construed as limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of protection of the present application is to be determined by the appended claims.
Claims (6)
1. A method for implementing a self-belt-like controllable carousel graphics component, the method comprising:
adopting vue frame to refer to the packaged carousel graph component;
adding a status icon on the carousel map of the carousel map component for identifying whether the carousel map belongs to the automatic carousel state;
adding a mouse trigger event on the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically carousel;
whether the carousel graphs automatically play the carousel, switch the time interval automatically, the number of items displayed by the current container and the carousel direction are configured according to various attributes in the configuration file; configuring carousel map data;
presenting the carousel graphics according to the configured carousel graphics component, and displaying the carousel state in real time through the state icon;
when a mouse trigger event occurs, controlling the carousel graph component to perform corresponding carousel switching;
the step of adding a status icon on the carousel icon of the carousel icon component to identify whether the carousel icon belongs to the automatic carousel status comprises the following steps:
stopping the automatic wheel broadcasting when the mouse is set to be selected, and marking a state icon as gray, wherein the state icon represents stopping the automatic wheel broadcasting; when the mouse is set to be deselected, the state icon mark is a flashing white animation;
the configuration file is preset, the attribute needing to be configured and the annotation of the attribute are set, the vue component mode is used, the data are transmitted to the carousel graph component through the father component, and if the data are not uploaded, default data are displayed to render the carousel graph.
2. The method for implementing the self-contained controllable carousel graphics component of claim 1, wherein the step of employing vue frames to reference the encapsulated carousel graphics component comprises:
adopting a vue frame to package the carousel graph component;
the encapsulated carousel graph component is referenced using a vue framework.
3. The method for implementing the self-stateful controllable carousel graphics component of claim 1, wherein the step of adding a mouse trigger event to a carousel graphics of the carousel graphics component to control whether the carousel graphics is self-carousel comprises:
and stopping automatic multicasting when the mouse clicks to select is set, and clicking the mouse again to cancel the selection.
4. A system for implementing a self-banded controllable carousel graphics component, the system comprising:
the packaging module is used for referencing the packaged carousel graph component by adopting a vue framework;
the status icon adding module is used for adding a status icon on the carousel icon of the carousel icon component and identifying whether the carousel icon belongs to an automatic carousel state or not;
the mouse trigger event adding module is used for adding a mouse trigger event to the carousel diagram of the carousel diagram component to control whether the carousel diagram is automatically played or not;
the configuration module is used for configuring whether the carousel graphs are automatic carousel, automatic carousel switching time intervals, the number of items displayed by the current container and carousel directions according to various attributes in the configuration file; configuring carousel map data; the system is also used for presetting a configuration file, setting attributes to be configured and notes of the attributes, transmitting parameters to the carousel graph component by using a vue component mode through a father component, and displaying default data to render the carousel graph if the data is not uploaded;
the carousel diagram presenting module is used for presenting a carousel diagram according to the configured carousel diagram component and displaying the carousel state through the state icon in real time; the method is also used for setting that the automatic wheel broadcasting is stopped when the mouse is selected, and the status icon is marked with gray and represents stopping the automatic wheel broadcasting; when the mouse is set to be deselected, the state icon mark is a flashing white animation;
and the carousel switching module is used for controlling the carousel graph component to perform corresponding carousel switching when a mouse trigger event occurs.
5. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method for implementing the self-stateful controllable carousel graphics component of any of claims 1 to 3.
6. A computer readable storage medium having stored thereon a computer program, which when executed by a processor, implements the steps of the method for implementing the self-contained state controllable carousel graphics component of any one of claims 1 to 3.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911266143.6A CN111104114B (en) | 2019-12-11 | 2019-12-11 | Method, system and equipment for realizing self-belt-state controllable carousel graph component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911266143.6A CN111104114B (en) | 2019-12-11 | 2019-12-11 | Method, system and equipment for realizing self-belt-state controllable carousel graph component |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111104114A CN111104114A (en) | 2020-05-05 |
| CN111104114B true CN111104114B (en) | 2023-11-07 |
Family
ID=70422229
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911266143.6A Active CN111104114B (en) | 2019-12-11 | 2019-12-11 | Method, system and equipment for realizing self-belt-state controllable carousel graph component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111104114B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114138391A (en) * | 2021-12-04 | 2022-03-04 | 杭州安恒信息技术股份有限公司 | Information list carousel method, system and computer storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321502A (en) * | 2019-05-30 | 2019-10-11 | 阿里巴巴集团控股有限公司 | Electronics promotes resource carousel control method, device, terminal and readable storage medium storing program for executing |
| CN110413355A (en) * | 2018-04-28 | 2019-11-05 | 北京京东尚科信息技术有限公司 | A kind of method and apparatus controlling carousel |
-
2019
- 2019-12-11 CN CN201911266143.6A patent/CN111104114B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110413355A (en) * | 2018-04-28 | 2019-11-05 | 北京京东尚科信息技术有限公司 | A kind of method and apparatus controlling carousel |
| CN110321502A (en) * | 2019-05-30 | 2019-10-11 | 阿里巴巴集团控股有限公司 | Electronics promotes resource carousel control method, device, terminal and readable storage medium storing program for executing |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111104114A (en) | 2020-05-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108279964B (en) | Method and device for realizing covering layer rendering, intelligent equipment and storage medium | |
| EP3111318B1 (en) | Cross-platform rendering engine | |
| US20210141523A1 (en) | Platform-independent user interface system | |
| US20110197165A1 (en) | Methods and apparatus for organizing a collection of widgets on a mobile device display | |
| US20230013601A1 (en) | Program trial method, system, apparatus, and device, and medium | |
| CN103365761A (en) | Progress bar | |
| CN105930467A (en) | Information processing method and electronic device | |
| CN110516179A (en) | Method for rendering graph, device, electronic equipment and storage medium | |
| CN111432264A (en) | Content display method, device and equipment based on media information stream and storage medium | |
| US9594469B2 (en) | Dynamic layering user interface | |
| CN108958630A (en) | Writing content display method and device and electronic equipment | |
| CN111124668A (en) | Memory release method and device, storage medium and terminal | |
| KR101431311B1 (en) | Performance analysis during visual creation of graphics images | |
| CN110471701A (en) | Method, apparatus, storage medium and the electronic equipment of image rendering | |
| CN111104114B (en) | Method, system and equipment for realizing self-belt-state controllable carousel graph component | |
| CN115469954A (en) | Canvas-based image annotation method and Canvas-based image annotation system | |
| CN111258701B (en) | State icon control method, intelligent terminal and storage medium | |
| WO2022237083A1 (en) | Information display method and apparatus, and terminal, storage medium and computer program product | |
| CN115509412A (en) | Method, device, equipment and storage medium for special effect interaction | |
| WO2018205390A1 (en) | Control layout display control method, system, and apparatus, and computer readable storage medium | |
| CN108390915A (en) | The rendering intent and terminal device at interface | |
| CN114202608A (en) | Method, apparatus, device, medium, and program product for image rendering | |
| CN114924837A (en) | Data processing method, electronic device and readable storage medium | |
| CN103207736A (en) | Method for displaying icons of components of android terminal | |
| CN111243069B (en) | Scene switching method and system of Unity3D engine |
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 |