CN108073339B

CN108073339B - Floating layer display method, client and electronic equipment

Info

Publication number: CN108073339B
Application number: CN201611025675.7A
Authority: CN
Inventors: 杨森森
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2016-11-16
Filing date: 2016-11-16
Publication date: 2021-07-23
Anticipated expiration: 2036-11-16
Also published as: CN108073339A

Abstract

The embodiment of the application provides a floating layer display method, a client and electronic equipment, wherein the method comprises the following steps: receiving a response returned by the server according to the floating layer request of the user; constructing a rendering tree according to the response, and carrying out layout and drawing on the rendering tree to display a floating layer; in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained; when the contact is sliding contact, acquiring the current position of the contact point, and determining the expansion amount of the specified boundary of the floating layer according to the initial position and the current position; and adjusting the specified boundary according to the expansion amount, and performing re-layout and drawing on the rendering tree to update the floating layer display. According to the embodiment of the application, the free adjustment of the boundary of the floating layer can be realized, so that a user can freely control the content display amount in each floating layer according to the personalized requirement, and the user experience is improved.

Description

Floating layer display method, client and electronic equipment

Technical Field

The application relates to the technical field of computer network communication, in particular to a floating layer display method, a client and electronic equipment.

Background

With the continuous development of computer network communication technology, the work and life of people are deeply influenced by the internet. Through a special client (such as a kyoto app, a travel-taking app and the like) or a general-purpose client (such as a browser), a user can online buy various goods and services, such as online clothes buying, online air ticket booking, online hotel booking and the like.

When searching for a target product or service through a client, a user generally uses a condition filtering function to obtain a more accurate search result. However, for some clients located on mobile terminals, when the user clicks on the filter button, the client exposes a filter page (which is typically an operable user interface, hereinafter referred to as a floating layer, that floats above the search page) that is typically fixed in size and covers only a portion of the screen, as shown in fig. 1. Under the condition of a lot of screening, the floating layer with fixed size and only covering a part of the screen is not beneficial to displaying information, and the user experience is poor.

Disclosure of Invention

The embodiment of the application aims to provide a floating layer display method, a client and electronic equipment so as to improve user experience.

In order to achieve the above object, in one aspect, an embodiment of the present application provides a floating layer display method, including the following steps:

receiving a response returned by the server according to the floating layer request of the user;

constructing a rendering tree according to the response, and carrying out layout and drawing on the rendering tree to display a floating layer;

in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained;

when the contact is sliding contact, acquiring the current position of the contact point, and determining the expansion amount of the specified boundary of the floating layer according to the initial position and the current position;

and adjusting the specified boundary according to the expansion amount, and performing re-layout and drawing on the rendering tree to update the floating layer display.

In another aspect, an embodiment of the present application provides a client, including:

the response receiving module is used for receiving a response returned by the server according to the floating layer request of the user;

the floating layer display module is used for constructing a rendering tree according to the response and carrying out layout and drawing on the rendering tree so as to display a floating layer;

the position acquisition module is used for acquiring the initial position of a contact point when detecting the contact corresponding to the specified area on the floating layer in the process of displaying the floating layer;

the telescopic quantity acquisition module is used for acquiring the current position of the contact point when the contact is sliding contact, and determining the telescopic quantity of the specified boundary of the floating layer according to the initial position and the current position;

and the floating layer updating module is used for adjusting the specified boundary according to the expansion amount and performing re-layout and drawing on the rendering tree.

In another aspect, an embodiment of the present application provides an electronic device, including:

a touch display;

a processor for controlling the touch display to display a floating layer; the control comprises the following steps:

and adjusting the specified boundary according to the expansion amount, and performing re-layout and drawing on the rendering tree.

In the embodiment of the application, after the response returned by the server according to the floating layer request of the user is received; constructing a rendering tree according to the response, and carrying out layout and drawing on the rendering tree to display the floating layer; in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained; and when the contact is sliding contact, acquiring the current position of the contact point, determining the expansion amount of the specified boundary of the floating layer according to the initial position and the current position, adjusting the specified boundary according to the expansion amount, and re-laying and drawing the rendering tree to update the floating layer display. Because the sliding contact operation can be controlled by a user at will, the embodiment of the application can realize the free adjustment of the boundary of the floating layer, so that the user can freely control the content display amount in each floating layer according to the personalized requirement.

Drawings

The accompanying drawings, which are included to provide a further understanding of the embodiments of the disclosure, are incorporated in and constitute a part of this disclosure. In the drawings:

FIG. 1 is a diagram of a client-side-displayed floating layer of the prior art;

FIG. 2 is a flow chart of a method for displaying a floating layer according to an embodiment of the present disclosure;

FIG. 3 is a schematic diagram illustrating a sliding distance calculation of a contact point in a floating layer displaying method according to an embodiment of the present disclosure;

FIGS. 4a-4c are schematic diagrams of a floating layer shown in an embodiment of the present application;

FIGS. 5a-5c are schematic diagrams of a floating layer shown in another embodiment of the present application;

FIGS. 6a-6c are schematic diagrams of a floating layer shown in another embodiment of the present application;

FIGS. 7a-7c are schematic diagrams of a floating layer shown in another embodiment of the present application;

FIGS. 8a-8c are schematic diagrams of a floating layer shown in another embodiment of the present application;

FIG. 9 is a block diagram of a client according to an embodiment of the present application;

fig. 10 is a block diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

Referring to fig. 2, a floating layer displaying method according to an embodiment of the present application includes the following steps:

s201, receiving a response returned by the server according to the floating layer request of the user.

In the embodiment of the application, when a user searches for a target commodity or service through a client, the user may use a condition screening function in order to obtain a more accurate search result. When a user clicks a screening button, a client initiates a floating layer request to a server, and the server processes the floating layer request and returns a corresponding response to the client after receiving the floating layer request; correspondingly, the client receives the response.

In one embodiment of the present application, the client may be a browser, such as an IE browser, chrome browser, 360 browser, etc.), and in another embodiment of the present application, the client may also be an app client, such as a kyoto client, a travel-taking client, a travel-with-travel client, etc.

In the embodiment of the application, a user may initiate a floating layer request through a client configured on an electronic device. Wherein the electronic device may be a portable electronic device with a touch display, such as a tablet, a smartphone, a digital assistant, a smart wearable device, and the like.

S202, building a rendering tree according to the response, and carrying out layout and drawing on the rendering tree to display the floating layer.

In the embodiment of the application, after receiving the response returned by the server, the client generally loads, analyzes and renders HTML (HyperText Markup Language) documents, style sheets (style sheets) and the like in the response in sequence; the rendering process is a process of constructing a render tree (render tree). The rendering tree is a tree structure composed of a plurality of visual elements according to a display order thereof, and each visual element constitutes one node (i.e., a rendering object) of the rendering tree. Wherein the visual element may be a rectangle with visual attributes (such as color, size, etc.). Thus, the entire render tree is a visual representation of the HTML document.

In the embodiment of the application, after the rendering tree is constructed, the rendering tree can be laid out and drawn. Wherein the layout refers to determining the exact display position of each node of the rendering tree on the screen. The drawing refers to traversing the rendering tree and calling a paint method of rendering objects (namely nodes of the rendering tree) after the rendering tree is laid out, and displaying the rendering objects of the rendering tree on a screen in sequence, namely displaying the floating layer to a user.

S203, in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained.

In this embodiment of the application, the designated area on the floating layer may be a preset UI (User Interface) control. The UI control defines touch events (touchstart, touchmove and touchend) and an execution method corresponding to the touch events. For example, when a touchstart event occurs, a method of acquiring an initial position of a contact point is performed; when a touchmove event occurs, executing a method for acquiring the current position of the contact point, determining the expansion amount of the specified boundary of the floating layer according to the initial position and the current position, adjusting the specified boundary according to the expansion amount, and performing re-layout and drawing on the rendering tree; and when the touchend event occurs, terminating the method executed when the touchmove event occurs.

In the embodiment of the present application, the touch may be a user touching the screen with a finger, a stylus, or any other suitable object.

In a specific embodiment of the present application, the designated area may be, for example, a designated boundary line of the float layer. Of course, in other embodiments of the present application, the designated area may also be set according to a user requirement, but needs to avoid a trigger conflict with an original UI control on the floating layer. Wherein, the triggering conflict is: under the same floating layer, when the same position is touched, two or more UI controls are triggered, and the system has difficulty in determining which control method should be executed.

In the embodiment of the application, in the process of displaying the floating layer, when a contact corresponding to the designated area on the floating layer is detected, it is indicated that a touchstart event occurs, and then a method corresponding to the touchstart event may be executed, for example, an initial position of a contact point is obtained.

S204, when the contact is sliding contact, acquiring the current position of the contact point, and determining the expansion and contraction amount of the specified boundary of the floating layer according to the initial position and the current position.

In the embodiment of the present application, the sliding contact may be a user continuously contacting and moving the screen by a finger, a stylus, or any other suitable object.

In this embodiment of the application, when the contact is a sliding contact, it is described that a touchmove event occurs, and then a method corresponding to the touchmove event may be executed, for example, a current position of the contact point is obtained, and a stretching amount of a specified boundary of a floating layer is determined according to the initial position and the current position.

In the embodiment of the application, the specified boundary of the floating layer is a predefined telescopic boundary, that is, the height attribute of the boundary is not a fixed value but a variable, and the variable is related to the sliding contact. For example, the height of the boundary is defined as W ═ a + b, where W is the height, a is the default height, and b is the amount of stretching of the boundary.

In the embodiment of the present application, which boundaries of the floating layer are designated boundaries can be defined according to actual needs, for example, when facing the problem shown in fig. 1, since the default lower boundary of the floating layer is farther from the lower boundary of the screen, in order to improve the screen utilization, the lower boundary of the floating layer can be defined as the designated boundary.

In this embodiment of the application, determining the amount of expansion and contraction of the specified boundary of the floating layer according to the initial position and the current position includes: and determining the expansion and contraction amount of the specified boundary of the floating layer according to the difference value of the initial position and the current position in the sliding direction. For example, as shown in fig. 3, a screen with a resolution of 1920 × 1080 has a coordinate origin at the upper left corner, and when the initial position point a (whose coordinates are (540, 1112)) slides down (i.e., in the positive y-axis direction) to the current position point a '(whose coordinates are (540, 1516)), the difference between the points a and a' in the positive y-axis direction is: 1516-.

S205, adjusting the designated boundary according to the expansion amount, and re-laying and drawing the rendering tree to update the floating layer display.

In this embodiment of the application, the adjusting the designated boundary according to the amount of expansion and contraction may be: and adjusting the specified boundary according to the expansion amount and the expansion direction thereof. As shown in fig. 3, the lower boundary of the floating layer is used as a designated boundary, and the height of the point a is the default height of the lower boundary of the floating layer; when the point a slides down to the point a ', the lower boundary of the floating layer is extended down to the height of the point a', i.e., the lower boundary of the floating layer is translated down by 404 pixels.

In the embodiment of the present application, after the designated boundary is adjusted, the size of the floating layer is changed, and therefore, the render tree needs to be rearranged and drawn according to the new size of the floating layer, so that the displayed content can be matched with the new size of the floating layer.

In an exemplary embodiment of the present application, the floating layers displayed after the re-layout and drawing of the render tree at different boundary heights may be as shown in fig. 4a-4 c.

In another embodiment of the present application, upon detection of the contact, a boundary operation cue of the floating layer is presented to suggest how to operate. In another exemplary embodiment of the present application, the boundary operation hint may be a graphical operation hint; such as shown in fig. 5a-5 c. In another exemplary embodiment of the present application, the boundary operation prompt may be a text operation prompt; such as shown in fig. 6a-6 c. In another exemplary embodiment of the present application, the boundary operation prompt may be a graphic and text operation prompt; such as shown in fig. 7a-7 c.

Correspondingly, in another embodiment of the application, in the contact process, whether the display of the boundary operation prompt meets a preset first condition or not can be judged; if yes, terminating the display of the boundary operation prompt; otherwise, continuing to display. In an exemplary embodiment of the application, the meeting of the preset first condition may be, for example, that the display duration of the boundary operation prompt reaches a preset duration (e.g., 2 seconds, 3 seconds, 5 seconds, etc.); in another exemplary embodiment of the present application, the satisfaction of the preset first condition may be, for example, that the contact is terminated; the contact is terminated, i.e., a touchend event occurs.

In another embodiment of the present application, in order to facilitate the user to know the contact point position, when the touchstart event occurs, the contact position mark may be displayed while acquiring the initial position of the contact point. In an exemplary embodiment of the present application, the contact position mark may be a small dot, as shown in fig. 8a to 8 c. In other exemplary embodiments of the present application, the contact position mark may have other shapes, such as a small circular ring.

Correspondingly, in another embodiment of the present application, in the contact process, it may be further determined whether the display of the contact position mark meets a preset second condition; if so, terminating presentation of the contact location indicia. In an exemplary embodiment of the present application, the satisfaction of the preset second condition may be, for example, that the contact is terminated. In other exemplary embodiments of the present application, the second condition that meets the preset condition may be that the display duration of the contact position mark reaches a preset duration, and the like.

While the process flows described above include operations that occur in a particular order, it should be appreciated that the processes may include more or less operations that are performed sequentially or in parallel (e.g., using parallel processors or a multi-threaded environment).

In the embodiment of the application, after the response returned by the server according to the floating layer request of the user is received; constructing a rendering tree according to the response, and carrying out layout and drawing on the rendering tree to display the floating layer; in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained; and when the contact is sliding contact, acquiring the current position of the contact point, determining the expansion amount of the specified boundary of the floating layer according to the initial position and the current position, adjusting the specified boundary according to the expansion amount, and re-laying and drawing the rendering tree to update the floating layer display. Because the sliding contact operation can be controlled by a user at will, the embodiment of the application can realize the free adjustment of the boundary of the floating layer, so that the user can freely control the content display amount in each floating layer according to the personalized requirement. In addition, the sliding contact operation of the embodiment of the application is easy to master, and the user does not need to increase the cognitive burden.

Referring to fig. 9, a client according to an embodiment of the present application includes:

a response receiving module 91, configured to receive a response returned by the server according to the user's floating layer request;

a floating layer display module 92, configured to construct a rendering tree according to the response, and perform layout and drawing on the rendering tree to display a floating layer;

a position obtaining module 93, configured to, in a process of displaying the floating layer, obtain an initial position of a contact point when contact corresponding to a designated area on the floating layer is detected;

a stretching amount obtaining module 94, configured to obtain a current position of the contact point when the contact is a sliding contact, and determine a stretching amount of the specified boundary of the floating layer according to the initial position and the current position;

and the floating layer updating module 95 is configured to adjust the specified boundary according to the expansion amount, and perform rearrangement and drawing on the rendering tree.

The client in the embodiment of the present application corresponds to the above floating layer display method, and therefore, for details about the client in the embodiment of the present application, please refer to the above floating layer display method, which is not described herein again.

Referring to fig. 10, the electronic device according to the embodiment of the present application includes a touch display, a processor, and the like, and may include hardware required for other services. The processor is used for controlling the touch display to display the floating layer, namely the processor reads a corresponding computer program from the memory to the memory and then runs the computer program, and a client is formed on a logic level. Wherein the client, when executed by the processor, performs the steps of:

The electronic device of the embodiment of the present application corresponds to the above floating layer displaying method, and therefore, for details about the electronic device of the embodiment of the present application, please refer to the above floating layer displaying method, which is not described herein again.

Of course, besides the software implementation, the present application does not exclude other implementations, such as logic devices or a combination of software and hardware, and the like, that is, the execution subject of the following processing flow is not limited to each logic unit, and may also be hardware or logic devices.

In the 90 s of the 20 th century, improvements in a technology could clearly distinguish between improvements in hardware (e.g., improvements in circuit structures such as diodes, transistors, switches, etc.) and improvements in software (improvements in process flow). However, as technology advances, many of today's process flow improvements have been seen as direct improvements in hardware circuit architecture. Designers almost always obtain the corresponding hardware circuit structure by programming an improved method flow into the hardware circuit. Thus, it cannot be said that an improvement in the process flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (PLD), such as a Field Programmable Gate Array (FPGA), is an integrated circuit whose Logic functions are determined by programming the Device by a user. A digital system is "integrated" on a PLD by the designer's own programming without requiring the chip manufacturer to design and fabricate application-specific integrated circuit chips. Furthermore, nowadays, instead of manually making an Integrated Circuit chip, such Programming is often implemented by "logic compiler" software, which is similar to a software compiler used in program development and writing, but the original code before compiling is also written by a specific Programming Language, which is called Hardware Description Language (HDL), and HDL is not only one but many, such as abel (advanced Boolean Expression Language), ahdl (alternate Hardware Description Language), traffic, pl (core universal Programming Language), HDCal (jhdware Description Language), lang, Lola, HDL, laspam, hardward Description Language (vhr Description Language), vhal (Hardware Description Language), and vhigh-Language, which are currently used in most common. It will also be apparent to those skilled in the art that hardware circuitry that implements the logical method flows can be readily obtained by merely slightly programming the method flows into an integrated circuit using the hardware description languages described above.

The controller may be implemented in any suitable manner, for example, the controller may take the form of, for example, a microprocessor or processor and a computer-readable medium storing computer-readable program code (e.g., software or firmware) executable by the (micro) processor, logic gates, switches, an Application Specific Integrated Circuit (ASIC), a programmable logic controller, and an embedded microcontroller, examples of which include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicone Labs C8051F320, the memory controller may also be implemented as part of the control logic for the memory. Those skilled in the art will also appreciate that, in addition to implementing the controller as pure computer readable program code, the same functionality can be implemented by logically programming method steps such that the controller is in the form of logic gates, switches, application specific integrated circuits, programmable logic controllers, embedded microcontrollers and the like. Such a controller may thus be considered a hardware component, and the means included therein for performing the various functions may also be considered as a structure within the hardware component. Or even means for performing the functions may be regarded as being both a software module for performing the method and a structure within a hardware component.

The client or module illustrated in the above embodiments may be implemented by a computer chip or an entity, or implemented by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

For convenience of description, the above clients are described as being divided into various modules by functions and described separately. Of course, the functionality of the various modules may be implemented in the same one or more software and/or hardware implementations as the present application.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, clients, and electronic devices according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include forms of volatile memory in a computer readable medium, Random Access Memory (RAM) and/or non-volatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of a computer-readable medium.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus 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, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A floating layer display method is characterized by comprising the following steps:

in the process of displaying the floating layer, when the contact corresponding to the designated area on the floating layer is detected, the initial position of the contact point is obtained; the designated area is a preset UI control; the UI control defines a touch event and an execution method corresponding to the touch event;

2. The floating layer displaying method according to claim 1, wherein the determining the amount of expansion and contraction of the specified boundary of the floating layer according to the initial position and the current position comprises:

and determining the expansion and contraction amount of the specified boundary of the floating layer according to the difference value of the initial position and the current position in the sliding direction.

3. The buoyant layer display method of claim 1, further comprising:

displaying a boundary operation cue of the floating layer when the contact is detected.

4. The floating layer displaying method according to claim 3, wherein the boundary operation prompt includes any one of the following:

a graphical operation prompt;

prompting by text operation;

and (5) carrying out graphic and text operation prompt.

5. The floating layer display method according to claim 3 or 4, further comprising:

in the contact process, judging whether the display of the boundary operation prompt meets a preset first condition or not;

and if so, terminating the display of the boundary operation prompt.

6. The floating layer displaying method according to claim 5, wherein the first condition is satisfied, and the first condition includes any one of the following:

the display duration of the boundary operation prompt reaches a preset duration;

the contact is terminated.

7. The buoyant layer display method of claim 1, further comprising:

upon detection of the contact, a contact location indicia is displayed.

8. The method of claim 7, wherein the contact location indicia comprises a graphical indication.

9. The floating layer display method according to claim 7 or 8, further comprising:

in the contact process, judging whether the display of the contact position mark meets a preset second condition;

if so, terminating presentation of the contact location indicia.

10. The method of claim 9, wherein the meeting a second predetermined condition comprises: the contact is terminated.

11. A client, comprising:

the position acquisition module is used for acquiring the initial position of a contact point when detecting the contact corresponding to the specified area on the floating layer in the process of displaying the floating layer; the designated area is a preset UI control; the UI control defines a touch event and an execution method corresponding to the touch event;

and the floating layer updating module is used for adjusting the specified boundary according to the expansion amount, and rearranging and drawing the rendering tree so as to update the floating layer display.

12. An electronic device, comprising:

a touch display;