Processing method of button in vehicle display page, storage medium and electronic equipment

Abstract

According to the processing method for the button in the vehicle display page, the action obtained by the button is judged through a monitoring program; responding to the judgment that the operation is the dragging operation; cancelling the global monitoring event; adding a bubbling event for the button; modifying the default width and height of a parent component of the button into the width and height of a mobile phone screen; entering a page, and obtaining X and Y coordinates of a button; synchronizing the X and Y coordinates of the button with the dragging track; and obtaining the current operation of the user on the button, and rebinding the cancelled global monitoring event when capturing that the user loosens the button. The problems of linkage between the list and the button and linkage between the scroll bar and the button are solved. Under the condition that the same page is provided with the button, the scroll bar and the list, the button, the scroll bar and the list can normally work according to respective settings, and therefore the method provided by the embodiment of the invention provides a more humanized interaction mode.

Description

Technical Field

[0001] The invention relates to the field of computer front ends, and in particular to a method for processing buttons in a vehicle display page, a storage medium and an electronic device. Background Art

[0002] In the prior art, when there are buttons, scroll bars, and lists driven by scroll bars in an H5 page, dragging the H5 button will cause the scroll list to be linked, and dragging the scroll list will also cause the button to be linked. Therefore, when there are both buttons and scroll lists in a page, the buttons that originally have navigation functions and the scroll lists that originally interact with page display items cannot function normally. Summary of the invention

[0003] In view of this, an object of the present invention is to provide a method for processing buttons in a vehicle display page, a storage medium and an electronic device.

[0004] In a first aspect, the present invention provides a method for processing a button in a vehicle display page, comprising: A method for processing buttons in a vehicle display page, characterized in that the method comprises: Judge the action obtained by the button through the listening program; In response to determining that the drag operation is performed; Cancel the global monitoring event; Add a bubbling event to the button; Change the default width and height of the button's parent component to the width and height of the mobile phone screen; Enter the page and get the X and Y coordinates of the button; Synchronize the button's X and Y coordinates with the drag trajectory; Get the user's current operation on the button. When the user releases the button, rebind the canceled global listening event.

[0005] Furthermore, the method further comprises: Listen to the button click operation through the listening program; Jump to a new page.

[0006] Furthermore, monitoring the dragging operation of the button through the monitoring program includes: Get the action event of the button; Determine whether the action event is a drag event.

[0007] Further, determining whether the action event is a drag event includes: Get the values ​​of touch end and touch duration; When the value of the touch end value minus the touch duration is greater than a predetermined value, the user operation is determined to be a drag; Otherwise, it is considered a click.

[0008] Furthermore, the method further comprises: When the user's dragging action on the scroll bar is monitored through the monitoring program, the button is fixed at a fixed position in the visible area.

[0009] Further, fixing the button at a fixed position in the visible area includes: Modify the CSS positioning property of the button, give the button a relative positioning, and make the button fixed relative to the current display area.

[0010] A second aspect of the present invention provides a computer-readable storage medium for storing computer program instructions, wherein the computer program instructions implement any of the above-mentioned methods when executed by a processor.

[0011] The third aspect of the present invention provides an electronic device, comprising a memory and a processor, characterized in that the memory is used to store one or more computer program instructions, wherein the one or more computer program instructions are executed by the processor to communicate with a server to implement any of the methods described above.

[0012] The technical solution of the embodiment of the present invention monitors the drag operation of the button through the monitoring program; cancels the global monitoring event; adds a bubble event to the button; modifies the default width and height of the parent component of the button to the width and height of the mobile phone screen; enters the page, obtains the X and Y coordinates of the button, and synchronizes the X and Y coordinates of the button with the positioning; obtains the user's current operation on the button, and when the user releases the button, rebinds the above-mentioned canceled global monitoring event. When there are both buttons and scrolling lists on the same page, the scrolling list is not affected when the user drags the button, and the button is not affected when the user drags the scroll bar to view the scrolling list. Therefore, the embodiment of the present invention provides a more convenient interaction method. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] The above and other objects, features and advantages of the present invention will become more apparent through the following description of the embodiments of the present invention with reference to the accompanying drawings, in which: Figure 1 is a schematic diagram of a vehicle display page according to an embodiment of the present invention; Figure 2 is a user interaction diagram of an embodiment of the present invention; Figure 3 is a schematic diagram of a user dragging and scrolling a list according to an embodiment of the present invention; Figure 4is a schematic diagram of an electronic device according to some embodiments of the present invention. Implementation

[0014] The present invention is described below based on embodiments, but the present invention is not limited to these embodiments. In the detailed description of the present invention below, some specific details are described in detail. It is possible for a person skilled in the art to fully understand the present invention without the description of these details. In order to avoid confusing the essence of the present invention, known methods, processes, flows, components and circuits are not described in detail.

[0015] In addition, persons of ordinary skill in the art will appreciate that the drawings provided herein are for illustration purposes and are not necessarily drawn to scale.

[0016] Unless the context clearly requires otherwise, words such as “include”, “including” and the like in the specification should be interpreted as including rather than being exclusive or exhaustive; that is, as meaning “including but not limited to”.

[0017] In the description of the present invention, it should be understood that the terms "first", "second", etc. are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of the present invention, unless otherwise specified, "plurality" means two or more.

[0018] Figure 1 Schematic diagram of a vehicle display page according to an embodiment of the present invention.

[0019] Reference Figure 1 In the vehicle display page, in order to facilitate users to understand relevant information when selecting a vehicle, the present invention sets a button in the vehicle display page. The button can be a navigation button. For example, clicking the button jumps to a new page. By setting the button, a convenient navigation interaction method can be provided in the visible area of ​​the mobile phone. This is because the mobile phone screen is usually small. If too many navigation buttons are set at a fixed position in the visible area of ​​the mobile phone screen, the vehicle display area will be reduced.

[0020] The benefit of setting a floating button is that it links the button to a new information display page, making it convenient for users to click the button and jump to the information display page corresponding to the button.

[0021] Since this is a floating button, it does not occupy a fixed position, so there will be more space on the page for vehicle display. However, the button is floating, which may block part of the vehicle information and affect the user's browsing of the vehicle.

[0022] To this end, a drag function is set for the button to facilitate users to drag the button to an appropriate position on the mobile phone screen, thereby not affecting the browsing of vehicle information.

[0023] However, in the prior art, when a button is dragged, the list will be linked; similarly, when a scroll bar is dragged to drive the list, the buttons will also be linked.

[0024] The linkage between the list and the button is due to the following reasons: the button and the list are in the same page, they share the same parent, and the list corresponds to the scroll bar. Thus, when the user drags the button to the appropriate position on the screen, the X and Y values ​​of the page will change, and the X and Y values ​​will drive the scroll bar and its list. When the user drags the scroll bar, X and Y will also change, and the X and Y values ​​will also drive the button to move. In order to solve the problem of linkage between the list and the button, an embodiment of the present invention proposes a method for processing buttons in a vehicle display page, so that the dragging of the button in the embodiment of the present invention does not affect the scrolling list, and the dragging of the scroll bar does not affect the button.

[0025] Figure 2 It is a user interaction diagram of an embodiment of the present invention.

[0026] Reference Figure 2 , the monitoring program monitors the user's operation screen action 1, and determines the user's operation screen action 1 to determine whether the user's operation screen action 1 is dragging or clicking. That is, step 100 of the embodiment of the present invention: the action obtained by the button is determined by the monitoring program.

[0027] Step 100 further includes three sub-steps, namely step 110 , step 120 and step 130 .

[0028] Step 110: Get the values ​​of touch end and touch duration; Step 120: when the value of the touch end value minus the touch duration is greater than a predetermined value, the user operation is determined to be a drag; Step 130: Otherwise, determine it as a click.

[0029] The embodiment of the present invention can distinguish the dragging action and the clicking action as much as possible through the method of step 110 to step 130, so as to avoid the situation where the user just touches the mobile phone screen and it is judged as a clicking operation, and then step 900 is executed.

[0030] Step 101: In response to determining that it is a drag operation, execute steps 200-600; in steps 200-600, the button of the embodiment of the present invention is processed so that the button of the embodiment of the present invention does not affect the scrolling list or scroll bar when it moves according to the user's drag instruction.

[0031] Step 102: In response to determining that it is a click operation, execute step 900; that is, when the user clicks the button, jump directly to a new page.

[0032] Next, steps 200 to 600 of the embodiment of the present invention are described in detail.

[0033] Step 200: In response to determining that the operation is a drag operation, cancel the global monitoring event. The purpose of canceling the global monitoring event is to prevent the drag action on the button from affecting the scroll bar and the scroll list.

[0034] Step 300: Add a bubble event to the button. The main purpose of adding a bubble event when dragging is to achieve cross-element dragging and releasing. Specifically, when a user drags an element, if the drag event is only bound to the element, the mouse cannot be moved out of the range of the element to drag during the dragging process. That is to say, without adding a bubble event, since the global listening event is canceled in the previous step 200, the button cannot be moved when it is dragged; therefore, the embodiment of the present invention adds a bubble event to the button, so that when the global listening event is canceled, combined with step 300 of adding a bubble event to the button, the button of the embodiment of the present invention can be dragged by the user.

[0035] Step 400: modify the default width and height of the button's parent component to the width and height of the mobile phone screen. Step 400 prevents the user from dragging the button out of the visible area.

[0036] Step 500: Enter the page and obtain the X and Y coordinates of the button; Step 600: Synchronize the X and Y coordinates of the button with the dragging trajectory. Through steps 500 and 600, the button of the embodiment of the present invention can move according to the user's dragging trajectory. The dragging trajectory is a collection of positioning information generated by the user touching the touch screen of the mobile phone.

[0037] Steps 200 to 600 of the embodiment of the present invention will not affect the scroll bar when operating the button.

[0038] Please continue to refer to Figure 2 , when the user's screen operation action 1 is finished, that is, at this time the user has dragged the button to a suitable position, the user releases the button after dragging it, and the action is listed as the user's screen operation action 2. The monitoring program identifies the action of dragging the button and releasing it, and then executes step 700. Step 700: Get the user's current operation on the button, and when the user releases the button, rebind the above-mentioned canceled global monitoring event. If there is no step 700, since the global monitoring event is canceled in the aforementioned step 200, when the user releases the button after dragging it, other elements in the button page cannot be operated. In this embodiment of the present invention, by setting step 700, when the user operates the screen action 3, since the global monitoring is rebound, the user can operate the scroll bar in the page.

[0039] Preferably, after step 700, step 701 is further included. Step 701: When the user's dragging action on the scroll bar is monitored by the monitoring program, the button is fixed at a fixed position in the visible area. Figure 3 When the user drags the scroll bar, the list is presented in accordance with the user's dragging, and the vehicle information displayed in the visible area corresponds to the presentation. The button is fixed at a fixed position in the visible area, such as the center of the screen (those skilled in the art should understand that the button can also be fixed at any position such as the top, bottom, edge, etc.). Specifically, fixing the button at a fixed position in the visible area includes: modifying the CSS positioning attribute of the button, giving the button a relative positioning, so that the button is fixed relative to the current display area. By adopting the relative positioning method for the button, the position change data generated when the scroll bar is dragged only drives the list, and does not drive the button. As a result, the button of the embodiment of the present invention is similar to being stuck to a certain position on the screen, and does not change position as the scroll bar is dragged.

[0040] In summary, the button processing method of the embodiment of the present invention solves the problem of linkage between list and button, and linkage between scroll bar and button. When there are both buttons, scroll bar and list on the same page, the buttons, scroll bar and list can work normally according to their respective settings, so the method of the embodiment of the present invention provides a more humane interaction method.

[0041] Figure 4 is a schematic diagram of an electronic device according to some embodiments of the present invention.

[0042] like Figure 4 The electronic device 4 shown includes a general hardware structure to execute the button processing method according to some embodiments of the present invention, which includes at least a processor 41 and a memory 42. The processor 41 and the memory 42 are connected via a bus 43. The memory 42 is suitable for instructions or programs executable by the interactive method 4 of some embodiments of the present invention. The processor 41 can be an independent microprocessor or a collection of one or more microprocessors. Thus, the processor 41 executes the button processing method according to some embodiments of the present invention by executing the instructions stored in the memory 42. The bus 43 connects the above-mentioned multiple components together, and at the same time connects the above-mentioned components to the display controller 44 and the display device and the input / output (I / O) device 45. The input / output (I / O) device 45 can be a mouse, a keyboard, a modem, a network interface (for example, connected to the network interface for communication with a server), a touch input device, a somatosensory input device, a printer, and other devices known in the art.

[0043] It should be understood by those skilled in the art that the embodiments of the present application may provide methods, devices (equipment) or computer program products. Therefore, the present application may take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present application may take the form of a computer program product implemented on one or more computer-readable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0044] The present application is described with reference to flowcharts of methods, apparatuses (devices) and computer program products according to embodiments of the present application. It should be understood that each process in the flowchart can be implemented by computer program instructions.

[0045] These computer program instructions may be stored in a computer readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture including an instruction device that implements the process Figure 1 A function specified in a process or multiple processes.

[0046] These computer program instructions may also be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce the instructions for implementing the process Figure 1 A device that specifies functions in a process or multiple processes.

[0047] Another embodiment of the present invention relates to a non-volatile readable storage medium for storing a computer-readable program, wherein the computer-readable program is used to enable a computer to execute some or all of the above method embodiments.

[0048] That is, those skilled in the art can understand that all or part of the steps in the method for implementing the above embodiments can be completed by specifying relevant hardware through a program, and the program is stored in a readable storage medium, including several instructions for enabling a device (which can be a single-chip microcomputer, chip, etc.) or a processor to execute all or part of the steps of the method described in each embodiment of the present application. The aforementioned readable storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0049] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for processing buttons in a vehicle display page, characterized in that: The method comprises: Judge the action obtained by the button through the listening program; In response to determining that the drag operation is performed; Cancel the global monitoring event; Add a bubbling event to the button; Change the default width and height of the button's parent component to the width and height of the mobile phone screen; Enter the page and get the X and Y coordinates of the button; Synchronize the button's X and Y coordinates with the drag trajectory; Get the user's current operation on the button. When the user releases the button, rebind the canceled global listening event.

2. The method according to claim 1, characterized in that The method further comprises: Listen to the button click operation through the listening program; Jump to a new page.

3. The method according to claim 1, characterized in that The step of monitoring the dragging operation of the button through the monitoring program includes: Get the action event of the button; Determine whether the action event is a drag event.

4. The method according to claim 3, characterized in that The actions obtained by the button through the listening program include: Get the values ​​of touch end and touch duration; When the value of the touch end value minus the touch duration is greater than a predetermined value, the user operation is determined to be a drag; Otherwise, it is considered a click.

5. The method according to claim 1, characterized in that The method further comprises: When the user's dragging action on the scroll bar is monitored through the monitoring program, the button is fixed at a fixed position in the visible area.

6. The method according to claim 5, characterized in that Fixing the button at a fixed position in the visual area includes: Modify the CSS positioning property of the button, give the button a relative positioning, and make the button fixed relative to the current display area.

7. A computer-readable storage medium for storing computer program instructions, characterized in that: The computer program instructions implement the method according to any one of claims 1 to 6 when executed by a processor.

8. An electronic device, comprising a memory and a processor, characterized in that: The memory is used to store one or more computer program instructions, wherein the one or more computer program instructions are executed by the processor to communicate with the server to implement the method according to any one of claims 1-6.

Images