Display control method, device, electronic equipment and program product

Abstract

The display control method, apparatus, electronic device, and program product provided in this disclosure intercept user gesture events acting on a pop-up layer container, which includes a mask layer, a panel layer, and a content layer that are sequentially superimposed based on the same technology stack. According to the triggering start position and event type of the gesture event, different layers within the pop-up layer container are invoked for display control. Compared to existing technologies, this disclosure improves display effects and user experience by integrating all different layers within the pop-up layer container and combining user gesture events to control the display of the pop-up layer container.

Description

Technical Field

[0001] This disclosure relates to the field of computers, and more particularly to a display control method, apparatus, electronic device, and program product. Background Technology

[0002] With the development of smart terminal technology, users can use various applications (Apps) installed on smart terminals to achieve different functions. A pop-up layer is a technology that can cover the original display content of an application and display pop-up information. Existing pop-up layers generally include a mask layer, a panel layer, and a content layer. Among them, the mask layer constitutes the main structure of the pop-up layer and is used to cover the original display content of the application; while the panel layer and the content layer are used to display the pop-up information.

[0003] In existing technologies, the mask layer, panel layer, and content layer in a pop-up layer are generally implemented using different technology stacks. However, when performing touch control on the pop-up layer, the differences in these technology stacks can cause communication delays between the content layer, panel layer, and mask layer, resulting in stuttering touch display issues and affecting user experience. Summary of the Invention

[0004] To address the aforementioned issues, this disclosure presents a display control method, apparatus, electronic device, and program product that controls the display of a pop-up layer container by incorporating user gesture events, thereby improving the touch display effect of the pop-up layer.

[0005] In a first aspect, embodiments of this disclosure provide a display control method, including:

[0006] The user gesture event acting on the pop-up layer container is captured. The pop-up layer container includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack.

[0007] Based on the triggering start position and event type of the gesture event, different layers in the pop-up layer container are invoked for display control.

[0008] Secondly, embodiments of this disclosure provide a display control device, including:

[0009] The interception module is used to intercept user gesture events acting on the pop-up layer container, which includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack.

[0010] The control module is used to call different layers in the pop-up layer container for display control based on the triggering start position and event type of the gesture event.

[0011] Thirdly, embodiments of this disclosure provide an electronic device, including: at least one processor; and

[0012] Memory;

[0013] The memory stores computer-executed instructions;

[0014] The at least one processor executes computer execution instructions stored in the memory, causing the at least one processor to perform the method as described in any of the first aspects.

[0015] Fourthly, embodiments of this disclosure provide a computer-readable storage medium storing computer-executable instructions that, when executed by a processor, implement the method as described in any of the first aspects.

[0016] Fifthly, embodiments of this disclosure provide a computer program product including computer instructions that, when executed by a processor, implement the method described in any of the first aspects.

[0017] The display control method, apparatus, electronic device, and program product provided in this disclosure intercept user gesture events acting on a pop-up layer container, which includes a mask layer, a panel layer, and a content layer that are sequentially superimposed and implemented based on the same technology stack. According to the triggering start position and event type of the gesture event, different layers in the pop-up layer container are invoked for display control. Compared with the prior art, this disclosure improves the display effect and user experience by implementing different layers in the pop-up layer using the same technology stack and combining user gesture events to control the display of the pop-up layer container. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is a schematic diagram of a conventional pop-up layer structure in the prior art;

[0020] Figure 2 This is a schematic diagram of a network architecture on which this disclosure is based;

[0021] Figure 3 A flowchart illustrating a display control method provided in an embodiment of this disclosure;

[0022] Figure 4 A schematic diagram of the first interface of the display control method provided in this disclosure;

[0023] Figure 5 This is a schematic diagram of the structure of the pop-up layer container provided in this disclosure;

[0024] Figure 6 A schematic diagram of a second interface provided for the display control method of this disclosure;

[0025] Figure 7 A schematic diagram of a third interface provided for the display control method of this disclosure;

[0026] Figure 8 A schematic diagram of the fourth interface provided for the display control method of this disclosure;

[0027] Figure 9 A schematic diagram of the fifth interface provided for the display control method of this disclosure;

[0028] Figure 10 A schematic diagram of the sixth interface provided for the display control method of this disclosure;

[0029] Figure 11 A schematic diagram of the seventh interface provided for the display control method of this disclosure;

[0030] Figure 12 A schematic diagram of the eighth interface provided for the display control method of this disclosure;

[0031] Figure 13 A schematic diagram of the ninth interface provided for the display control method of this disclosure;

[0032] Figure 14 This is a structural block diagram of a display control device provided in an embodiment of the present disclosure;

[0033] Figure 15 A schematic diagram of the hardware structure of an electronic device provided in a disclosed embodiment. Detailed Implementation

[0034] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0035] With the development of smart terminal technology, users can use various applications (Apps) installed on smart terminals to achieve different functions.

[0036] A pop-up layer is a technology that displays content in an application (APP) in a pop-up manner. For example, Figure 1 This is a schematic diagram of a conventional pop-up layer structure in the prior art, such as... Figure 1 As shown, the terminal's application APP display page 100 displays a pop-up layer, which includes an overlay display layer 101, a panel layer 102, and a content layer 103; the different layers in the pop-up layer have different display sizes.

[0037] Specifically, the overlay 101 is integrated into the application (APP) and is invoked when the application (APP) starts displaying pop-up information. At this time, the overlay 101 blurs the information displayed on the current page 100 of the application (APP) to ensure that the pop-up information that needs to be displayed can be noticed and viewed by the user. In other words, the overlay 101 in the existing technology is often implemented by using a client-side technology stack, including native technology. Using such a client-side technology stack allows the overlay 101 to be quickly started or quickly closed when the user triggers the application (APP).

[0038] As for panel layer 102 and content layer 103, their structure is used to display pop-up information. When the overlay 101 is activated or deactivated, panel layer 102 and content layer 103 are activated or deactivated accordingly. In order to facilitate the updating of pop-up information, the panel layer 102 and content layer 103 in the prior art will adopt a front-end technology stack that is easier to update and maintain, including H5 technology.

[0039] Based on this technology stack, existing pop-up layers only support tap-to-close touch operations, and do not support dynamic touch operations, including gesture touch operations. The reason is that if the panel layer or content layer were to support dynamic touch operations, including gesture touch operations, the touch process for the panel layer or content layer would become:

[0040] The terminal application (APP) intercepts the user's gesture event and notifies the pop-up layer through the overlay 101 to respond to the gesture event. Since the overlay 101 is implemented using the client technology stack, it needs to convert the instructions corresponding to the gesture event from the client technology stack to the front-end technology stack and transmit them to the panel layer and content layer for execution by both layers.

[0041] This approach leads to new problems: because the translation of instructions between the front-end technology stack and the client technology stack requires a certain amount of communication time, this also reduces the response efficiency of the content layer and panel layer to gesture events. This means that users need to wait a certain amount of time after a gesture is triggered before they can see the gesture trigger effect on the terminal, resulting in a stuttering problem in the touch display of the pop-up layer and a poor user experience.

[0042] To address this issue, embodiments of this disclosure intercept user gesture events acting on a pop-up layer container, which includes a mask layer, a panel layer, and a content layer sequentially superimposed based on the same technology stack. Depending on the triggering position and event type of the gesture event, different layers within the pop-up layer container are invoked for display control. Compared to existing technologies, this disclosure integrates the mask layer, panel layer, and content layer of an existing pop-up layer into a single pop-up layer container using the same technology stack, and uses user gesture events to invoke different layers within the pop-up layer container for display control. This reduces communication costs between layers, avoids touch lag, and improves display quality and user experience.

[0043] refer to Figure 2 , Figure 2 This is a schematic diagram of a network architecture upon which this disclosure is based. Figure 2 The network architecture shown may specifically include terminal 1 and server 2.

[0044] Specifically, terminal 1 can be a smart device, including but not limited to smartphones, tablets, and other hardware devices capable of user touch control. This disclosure provides a display control method housed in a display control device, which is integrated into the application (APP) of terminal 1. When the application APP is running, the display control device monitors events triggered by the user's interaction with the application APP to achieve display control of the pop-up layer container.

[0045] Server 2 can be a standalone server or server cluster set up in the cloud. Server 2 is the server on which the application APP in terminal 1 is based, so as to provide users with services such as the display of application APP and pop-up layer container through communication and interaction with terminal 1.

[0046] Based on the aforementioned network architecture, firstly, referring to... Figure 3 , Figure 3 This is a flowchart illustrating a display control method provided in an embodiment of the present disclosure.

[0047] The display control method provided in this disclosure includes:

[0048] Step 301: Intercept user gesture events acting on the pop-up layer container, wherein the pop-up layer container includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack;

[0049] Step 302: Based on the triggering start position and event type of the gesture event, call different layers in the pop-up layer container for display control.

[0050] It should be noted that the execution entity of the display control method provided in this example is the display control device. Specifically, for the terminal, an application (APP) is installed, and the display control device can be integrated into this application and invoked by the application.

[0051] Figure 4 This is a schematic diagram of the first interface of the display control method provided in this disclosure, as shown below. Figure 4 As shown in the left-middle image, when the application (APP) on the terminal is running, the user can trigger the pop-up container by activating components or buttons provided by the application. At this time, as shown in the image... Figure 4 As shown in the middle right image, the app will launch a pop-up container, which will display pop-up information. At this time, the app's original interface will be covered or blurred.

[0052] The pop-up information will be displayed within the pop-up container provided in this disclosure. The pop-up container can be activated based on user triggering; alternatively, it can be activated automatically, such as when the application's display page changes.

[0053] Furthermore, the content of the pop-up information displayed within the pop-up container can be determined by the provider.

[0054] For example, such as Figure 4 As shown, if the app is a video application, when the user triggers the comment display button, a pop-up container is activated and displays pop-up information, including video comment information. In other examples, if the app is an online shopping application, when the user triggers the shopping cart display button, a pop-up container is activated and displays pop-up information, including information about the items currently selected by the user.

[0055] In this disclosure, when the pop-up layer container is started, the display control device can be used to acquire user gesture events acting on the pop-up layer container, and control different layers in the pop-up layer container based on the triggering start position and event type of the gesture in the gesture event, so as to realize the control and display of pop-up layer information in the pop-up layer container.

[0056] Unlike existing technologies, the pop-up layer container provided in this disclosure adopts the same technology stack, that is, it constructs a mask layer, a panel layer, and a content layer using the same technology stack to obtain the pop-up layer container. This technical implementation eliminates the need for translation processing when transmitting instructions between layers, thereby reducing communication time between layers and avoiding communication delays and touch lag when using gestures to control pop-up information.

[0057] The same technology stack used to build different layers in the pop-up container can specifically be a front-end technology stack. For example, the H5 technology stack can be used to implement the mask layer, panel layer and content layer. Implementing the pop-up container through the front-end technology stack makes the pop-up container easier to update and maintain.

[0058] It should be noted that since the pop-up container in this disclosure includes a mask, the application's display interface needs to be made transparent, full-screen, and static when the pop-up container is launched to facilitate its display. The specific configuration of the application can be achieved by defining parameters. For example, when the application loads, relevant parameters on the schema can be configured to provide a transparent, full-screen, and static display environment for the pop-up container.

[0059] Optionally, before executing the display control method, this disclosure also requires constructing a pop-up container, which can be created using container creation technologies including WebView containers and RN containers. Figure 5 This is a schematic diagram of the structure of the pop-up layer container provided in this disclosure. Figure 5 As shown, the application APP display page 500 on the terminal displays a pop-up layer container 501, which includes a mask layer 5011, a panel layer 5012, and a content layer 5013 displayed sequentially. The display size of the mask layer 5011 is larger than the display size of the panel layer 5012; the display size of the panel layer 5012 is larger than the display size of the content layer 5013. Further, the mask layer 5011 is used to display the background portion of the pop-up layer container; the panel layer 5012 is used to display the control components within the pop-up layer container; and the content layer 5013 is used to display the pop-up information within the pop-up layer container.

[0060] The background part can refer to the mask used to cover the original display information of the application, such as a blurred landscape image, a monochrome image, or a transparent image. The display size of a typical mask 5011 will cover the entire display area of ​​the application.

[0061] Panel layer 5012 typically displays control components, such as an "X" button that can be used to close the pop-up layer container. The specific implementation of the control components is similar to existing technologies and will not be elaborated further.

[0062] Pop-up information can generally consist of multiple components, such as... Figure 4 As shown in the example, in a scenario where a pop-up container displays comment information for a video, the pop-up information consists of various comment messages.

[0063] When determining the display effects triggered by different gesture events, different controls can be implemented based on the starting position when the gesture event is triggered. The following will further explain the display effects of the pop-up container under different gesture events:

[0064] In an optional embodiment, when the triggering starting position of the gesture event is located in the first region and the event type is a click event, the display of the pop-up layer container is turned off; wherein, the first region is the area in the overlay that is not covered by the panel layer.

[0065] Specifically, Figure 6 A schematic diagram of the second interface provided for the display control method of this disclosure, as shown below. Figure 6 As shown, when the user's gesture event is triggered at a location such as... Figure 6 When the first region 601 is shown, the display control device will calculate the distance between the trigger start position and the trigger end position of the gesture event.

[0066] If the distance is less than a certain pixel distance (e.g., 10 pixels), the gesture event can be considered a click event, which is equivalent to the user clicking the first area 601 of the pop-up container that is not covered by the panel layer. At this time, the display control device will control the pop-up container to close, so as... Figure 6 As shown, this returns to the original interface of the application. In this way, users can trigger the closing of the pop-up container by clicking the first area 601.

[0067] In an optional embodiment, when the triggering starting position of the gesture event is located in the second region and the event type is a swipe event, the display size of the panel layer in the pop-up layer container is controlled; wherein, the second region is the area in the panel layer that is not covered by the content layer.

[0068] When the starting position of a gesture event is located in an area of ​​the panel layer that is not covered by the content layer, the display control device will also calculate the distance between the starting position and the ending position of the gesture event.

[0069] If the distance is less than a certain pixel distance (e.g., 10 pixels), the gesture event can be identified as a click event, and the pop-up container will not respond.

[0070] If the distance is greater than or equal to a certain pixel distance (e.g., 10 pixel distance), the gesture event can be identified as a swipe event. In this case, the pop-up container will further control the display size of the panel layer in the pop-up container according to the swipe direction, swipe distance, etc. of the swipe event.

[0071] In an optional configuration, the display control device will increase or decrease the display size of the panel layer in the pop-up layer according to the sliding direction of the sliding event. Figure 7 This is a schematic diagram of a third interface provided for the display control method of this disclosure, wherein the vertical display direction of the terminal is taken as the up-down direction, and the horizontal display direction of the terminal is taken as the left-right direction. Figure 7 As shown, the user can first touch the second area 701, and then slide up or down to make the display area of ​​the panel layer increase or decrease with the direction of the user's slide, so as to achieve dynamic adjustment of the display size of the panel layer.

[0072] Specifically, the pop-up container will close after swiping down a certain distance. Figure 8 A schematic diagram of the fourth interface provided for the display control method of this disclosure. Figure 8 As shown, when the user's gesture event is triggered at a location such as... Figure 8 When the second region 801 shown is the region in the panel layer that is not covered by the content layer, it can be determined by calculating the starting position of the gesture event and the current trigger position of the gesture event that the gesture event is a swipe event and the swipe direction of the swipe event is downward.

[0073] At this time, the display control device will continuously calculate the real-time sliding distance of the swipe event, that is, the difference between the current trigger position and the trigger start position of the gesture event. While calculating the sliding distance, the display control device will also simultaneously determine whether the sliding distance exceeds a first distance threshold. Once the sliding distance of the swipe event exceeds the first distance threshold (e.g., ...), the swipe event will be stopped. Figure 8 As shown in d1), the display control device will close the pop-up container to return to the original interface of the display application APP.

[0074] In other words, if downward swiping events are continuously triggered, the display of the pop-up container will be turned off when the swiping distance exceeds a first distance threshold. In this way, users can turn off the pop-up information display by first touching the second area and then swiping down a certain distance.

[0075] In addition, specifically, when scrolling upwards beyond a certain distance, the pop-up container is displayed with a larger size. Figure 9 A schematic diagram of the fifth interface provided for the display control method of this disclosure, as shown below. Figure 9 As shown, when the user's gesture event is triggered at a location such as... Figure 9 When the second region 901 shown is the region in the panel layer that is not covered by the content layer, it can be determined by calculating the starting position of the gesture event and the current trigger position of the gesture event that the gesture event is a swipe event and the swipe direction of the swipe event is upward.

[0076] At this time, the display control device will continuously calculate the real-time sliding distance of the swipe event, that is, the difference between the current trigger position and the trigger start position of the gesture event. While calculating the sliding distance, the display control device will also simultaneously determine whether the sliding distance exceeds a second distance threshold. Once the sliding distance of the swipe event exceeds the second distance threshold (e.g., ...), the swipe event will be stopped. Figure 9 As shown in d2), the display control device will control the panel layer of the pop-up layer container to display at a larger display size, such as full screen or 9 / 10 screen (e.g., ...). Figure 9 (As shown).

[0077] In other words, if upward sliding events are continuously triggered, when the sliding distance of the event exceeds a second distance threshold, the panel layer of the pop-up container is controlled to display at a first display size; wherein, the first display size is larger than the current display size of the panel layer. In this way, the user can expand the pop-up information display area to its maximum by first touching the second area and then sliding upwards a certain distance.

[0078] In an optional embodiment, the content layer also displays a content scrollbar, similar to a page scrollbar on a webpage. The content scrollbar records the sum of the user's scroll distances on the current content layer. For example, when the current scroll distance is at its minimum, it indicates that the user has not scrolled, or has performed a scrolling event where they first scrolled down a certain distance and then scrolled up the same distance. The current scroll distance of the content scrollbar can be obtained by reading relevant parameters of the content scrollbar.

[0079] Accordingly, when the triggering starting position of the gesture event is located in the display area of ​​the content layer, and the gesture event is a swipe event, the current scrolling distance of the content scroll bar in the content layer is determined; and the display of the pop-up layer is controlled according to the current scrolling distance of the content scroll bar and the swipe event.

[0080] Specifically, Figure 10 A sixth interface diagram provided for the display control method of this disclosure, as shown below. Figure 10 As shown, when the user's gesture event is triggered at a starting position in area 1001 where the content layer is located, if the display control device determines that the current scrolling distance of the content scroll bar 1002 has reached the minimum value, such as... Figure 10 If the current scroll distance D is 0 and a downward scrolling event is continuously triggered, the display control device will close the pop-up container to return to the original interface of the application.

[0081] This method allows users to close the pop-up information display by swiping down without triggering any operation on the pop-up container (i.e., the current scroll distance is 0).

[0082] Of course, in other instances, if it is determined that the current scroll distance of the content scroll bar has reached the minimum value and the upward scrolling event is continuously triggered, the pop-up information will be displayed synchronously in the content layer as the scrolling event progresses.

[0083] also, Figure 11 A schematic diagram of the seventh interface provided for the display control method of this disclosure, as shown below. Figure 11 As shown, when the user's gesture event is triggered at the starting position in the content layer area 1101, if the current scroll distance of the content scroll bar 1102 has not reached the minimum value, then when the swipe event is triggered, it will proceed along the swipe direction of the swipe event (e.g., ...). Figure 11 (As shown by swiping upwards) adjusts the current scroll distance of the content scroll bar, so that the pop-up information corresponding to the current scroll distance in the content scroll bar is synchronously displayed in the content layer (e.g., swiping upwards). Figure 11 The pop-up information is displayed by scrolling upwards.

[0084] This method allows users to control the scrolling display of pop-up information by tapping and swiping the content layer, thus improving the user experience.

[0085] Figure 12 A schematic diagram of the eighth interface provided for the display control method of this disclosure, as shown below. Figure 12 As shown, if the triggering point of the gesture event is the content layer, the display control device will determine the current scroll distance. When the display control device determines that the current scroll distance is not the maximum value, it will continuously calculate the real-time scroll distance and scrolling method of the swipe event. For example, if the scrolling direction is upward and the scrolling distance is greater than the third distance threshold d3, the display control device can determine that the user wants to browse more pop-up information. In this case, the display control device will control the pop-up to use a larger display size, such as a second display size, to display the pop-up content. The second display size can specifically be the full-screen size, or a 9 / 10 split-screen size, etc.

[0086] In other words, if the current scroll distance of the content scroll bar has not reached its maximum value, and upward scrolling events continue to be triggered, then when the scrolling distance of the scrolling event exceeds a third distance threshold, the panel layer of the pop-up container is controlled to display at a second display size; wherein, the second display size is larger than the current display size of the panel layer. This method allows users to obtain more pop-up information, improving the user experience.

[0087] In other alternative implementations, the display control device may also display the layer information in a bounce-back manner. Figure 13 A schematic diagram of the ninth interface provided for the display control method of this disclosure, as shown below. Figure 13 As shown, the bounce display is a dynamic display method used to indicate to the user that the current pop-up information has been displayed. The triggering of the bounce display can be achieved as follows: when the user's gesture event starts in area 1301 of the content layer, if the scrolling distance has reached its maximum value, then while continuously triggering downward scrolling events, the content layer of the pop-up container is controlled to bounce back. This bounce display improves the display effect of the pop-up container, providing the user with a better visual experience.

[0088] The display control method provided in this disclosure intercepts user gesture events acting on a pop-up layer container, which includes a mask layer, a panel layer, and a content layer displayed sequentially. Based on the triggering start position and event type of the gesture event, different layers within the pop-up layer container are invoked for display control. Compared to existing technologies, this disclosure improves display effects and user experience by integrating all different layers within the pop-up layer container and combining user gesture events to control the display of the pop-up layer container.

[0089] Secondly, regarding the display control method corresponding to the above embodiment, Figure 14 This is a structural block diagram of a display control device provided in an embodiment of the present disclosure. For ease of explanation, only the parts relevant to the embodiments of the present disclosure are shown. (Refer to...) Figure 14 The display control device includes:

[0090] The interception module 1410 is used to intercept user gesture events acting on the pop-up layer container, wherein the pop-up layer container includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack;

[0091] The control module 1420 is used to call different layers in the pop-up layer container for display control according to the triggering start position and event type of the gesture event.

[0092] In an optional embodiment, the display control device further includes: a construction module;

[0093] The building module is also used to build the pop-up layer container;

[0094] The display size of the mask layer is larger than the display size of the panel layer; the display size of the panel layer is larger than the display size of the content layer.

[0095] In an optional embodiment, the overlay is used to display the background portion of the pop-up layer container; the panel layer is used to display the control components in the pop-up layer container; and the content layer is used to display the pop-up information in the pop-up layer container.

[0096] In an optional embodiment, the control module 1420 is further configured to:

[0097] When the triggering starting position of the gesture event is located in the first area and the event type is a click event, the display of the pop-up layer container is turned off;

[0098] The first region is the area in the mask layer that is not covered by the panel layer.

[0099] In an optional embodiment, the control module 1420 is further configured to:

[0100] When the triggering starting position of the gesture event is located in the second area and the event type is a swipe event, the display size of the panel layer in the pop-up layer container is controlled;

[0101] The second region is the area in the panel layer that is not covered by the content layer.

[0102] In an optional embodiment, the control module 1420 is further configured to:

[0103] The display size of the panel layer in the pop-up layer is increased or decreased according to the sliding direction of the sliding event.

[0104] In an optional embodiment, the control module 1420 is further configured to:

[0105] If a downward sliding event is continuously triggered, the display of the pop-up container will be turned off when the sliding distance of the event exceeds a first distance threshold.

[0106] In an optional embodiment, the control module 1420 is further configured to:

[0107] If an upward sliding event is continuously triggered, then when the sliding distance of the sliding event exceeds the second distance threshold, the panel layer of the pop-up layer container is controlled to display using the first display size.

[0108] Wherein, the first display size is larger than the current display size of the panel layer.

[0109] In an optional implementation, the content layer also displays a content scroll bar;

[0110] The control module 1420 is also used for:

[0111] When the starting position of the gesture event is located in the display area of ​​the content layer, and the gesture event is a swipe event, determine the current scrolling distance of the content scroll bar in the content layer;

[0112] The display of the pop-up layer is controlled based on the current scroll distance of the content scroll bar and the swipe event.

[0113] In an optional embodiment, the control module 1420 is further configured to:

[0114] If the current scroll distance of the content scroll bar has reached the minimum value, and a downward scrolling event continues to be triggered, then the display of the pop-up container will be turned off.

[0115] In an optional embodiment, the control module 1420 is further configured to:

[0116] If the current scroll distance of the content scroll bar has not reached the minimum value, when a sliding event is triggered, the current scroll distance of the content scroll bar is adjusted along the sliding direction of the sliding event so that the pop-up information corresponding to the current scroll distance in the content scroll bar is displayed synchronously in the content layer.

[0117] In an optional embodiment, the control module 1420 is further configured to:

[0118] If the current scrolling distance of the content scroll bar has not reached the maximum value, and the upward scrolling event continues to be triggered, then when the scrolling distance of the scrolling event exceeds the third distance threshold, the panel layer of the pop-up container is controlled to be displayed using the second display size.

[0119] Wherein, the second display size is larger than the current display size of the panel layer.

[0120] In an optional embodiment, the control module 1420 is further configured to:

[0121] If the scrolling distance has reached its maximum value, then when a downward scrolling event is continuously triggered, the content of the pop-up container's content layer is controlled to bounce back and be displayed.

[0122] The display control device provided in this disclosure intercepts user gesture events acting on a pop-up layer container, which includes a mask layer, a panel layer, and a content layer displayed sequentially. Based on the triggering start position and event type of the gesture event, different layers within the pop-up layer container are invoked for display control. Compared to existing technologies, this disclosure improves display effects and user experience by integrating all different layers within the pop-up layer container and combining user gesture events to control the display of the pop-up layer container.

[0123] The electronic device provided in this embodiment can be used to execute the technical solutions of the above method embodiments. Its implementation principle and technical effects are similar, and will not be described again here.

[0124] refer to Figure 15 The diagram illustrates a structural schematic of an electronic device 1500 suitable for implementing embodiments of the present disclosure. The electronic device 1500 can be a terminal device or a media library. The terminal device can include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, personal digital assistants (PDAs), portable Android devices (PADs), portable media players (PMPs), and in-vehicle terminals (e.g., in-vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 15 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0125] like Figure 15 As shown, the electronic device 1500 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 1501, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1502 or a program loaded from a storage device 1508 into a random access memory (RAM) 1503. The RAM 1503 also stores various programs and data required for the operation of the electronic device 1500. The processing unit 1501, ROM 1502, and RAM 1503 are interconnected via a bus 1504. An input / output (I / O) interface 1505 is also connected to the bus 1504.

[0126] Typically, the following devices can be connected to I / O interface 1505: input devices 1506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 1507 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 1508 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1509. Communication device 1509 allows electronic device 1500 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 15 An electronic device 1500 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0127] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 1509, or installed from a storage device 1508, or installed from a ROM 1502. When the computer program is executed by a processing device 1501, it performs the functions defined in the methods of embodiments of this disclosure.

[0128] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0129] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0130] The aforementioned computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the methods shown in the above embodiments.

[0131] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or media library. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a Local Area Network (LAN) or a Wide Area Network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0132] This embodiment provides a computer program product, including computer instructions, which are executed by a processor as described in any of the preceding embodiments. The implementation principle and technical effects are similar, and will not be repeated here.

[0133] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0134] The units described in the embodiments of this disclosure can be implemented in software or in hardware. The name of a unit does not necessarily limit the unit itself; for example, the first acquisition unit can also be described as "a unit that acquires at least two Internet Protocol addresses".

[0135] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0136] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0137] The following are some embodiments of this disclosure.

[0138] In a first aspect, according to one or more embodiments of the present disclosure, a display control method includes:

[0139] The user gesture event acting on the pop-up layer container is captured. The pop-up layer container includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack.

[0140] Based on the triggering start position and event type of the gesture event, different layers in the pop-up layer container are invoked for display control.

[0141] In an optional implementation, the method further includes:

[0142] Construct the pop-up layer container;

[0143] The display size of the mask layer is larger than the display size of the panel layer; the display size of the panel layer is larger than the display size of the content layer.

[0144] In an optional embodiment, the overlay is used to display the background portion of the pop-up layer container; the panel layer is used to display the control components in the pop-up layer container; and the content layer is used to display the pop-up information in the pop-up layer container.

[0145] In an optional implementation, the step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes:

[0146] When the triggering starting position of the gesture event is located in the first area and the event type is a click event, the display of the pop-up layer container is turned off;

[0147] The first region is the area in the mask layer that is not covered by the panel layer.

[0148] In an optional implementation, the step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes:

[0149] When the triggering starting position of the gesture event is located in the second area and the event type is a swipe event, the display size of the panel layer in the pop-up layer container is controlled;

[0150] The second region is the area in the panel layer that is not covered by the content layer.

[0151] In an optional implementation, controlling the display size of the panel layer in the pop-up layer container includes:

[0152] The display size of the panel layer in the pop-up layer is increased or decreased according to the sliding direction of the sliding event.

[0153] In an optional implementation, increasing or decreasing the display size of the panel layer in the pop-up layer according to the sliding direction of the sliding event includes:

[0154] If a downward sliding event is continuously triggered, the display of the pop-up container will be turned off when the sliding distance of the event exceeds a first distance threshold.

[0155] In an optional implementation, increasing or decreasing the display size of the panel layer in the pop-up layer according to the sliding direction of the sliding event includes:

[0156] If an upward sliding event is continuously triggered, then when the sliding distance of the sliding event exceeds the second distance threshold, the panel layer of the pop-up layer container is controlled to display using the first display size.

[0157] Wherein, the first display size is larger than the current display size of the panel layer.

[0158] In an optional implementation, the content layer also displays a content scroll bar;

[0159] The step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes:

[0160] When the starting position of the gesture event is located in the display area of ​​the content layer, and the gesture event is a swipe event, determine the current scrolling distance of the content scroll bar in the content layer;

[0161] The display of the pop-up layer is controlled based on the current scroll distance of the content scroll bar and the swipe event.

[0162] In an optional implementation, controlling the display of the pop-up layer based on the current scroll distance of the content scroll bar and the swipe event includes:

[0163] If the current scroll distance of the content scroll bar has reached the minimum value, and a downward scrolling event continues to be triggered, then the display of the pop-up container will be turned off.

[0164] In an optional implementation, controlling the display of the pop-up layer based on the current scroll distance of the content scroll bar and the swipe event includes:

[0165] If the current scroll distance of the content scroll bar has not reached the minimum value, when a sliding event is triggered, the current scroll distance of the content scroll bar is adjusted along the sliding direction of the sliding event so that the pop-up information corresponding to the current scroll distance in the content scroll bar is displayed synchronously in the content layer.

[0166] In an optional implementation, controlling the display of the pop-up layer based on the current scroll distance of the content scroll bar and the swipe event includes:

[0167] If the current scrolling distance of the content scroll bar has not reached the maximum value, and the upward scrolling event continues to be triggered, then when the scrolling distance of the scrolling event exceeds the third distance threshold, the panel layer of the pop-up container is controlled to be displayed using the second display size.

[0168] Wherein, the second display size is larger than the current display size of the panel layer.

[0169] In an optional implementation, controlling the display of the pop-up layer based on the scrolling distance of the content scroll bar and the scrolling direction of the scrolling time includes:

[0170] If the scrolling distance has reached its maximum value, then when a downward scrolling event is continuously triggered, the content of the pop-up container's content layer is controlled to bounce back and be displayed.

[0171] Secondly, according to one or more embodiments of the present disclosure, a display control device includes:

[0172] The interception module is used to intercept user gesture events acting on the pop-up layer container, which includes a mask layer, a panel layer and a content layer that are displayed in sequence based on the same technology stack.

[0173] The control module is used to call different layers in the pop-up layer container for display control based on the triggering start position and event type of the gesture event.

[0174] In an optional embodiment, the display control device further includes: a construction module;

[0175] The building module is also used to build the pop-up layer container;

[0176] The display size of the mask layer is larger than the display size of the panel layer; the display size of the panel layer is larger than the display size of the content layer.

[0177] In an optional embodiment, the overlay is used to display the background portion of the pop-up layer container; the panel layer is used to display the control components in the pop-up layer container; and the content layer is used to display the pop-up information in the pop-up layer container.

[0178] In an optional implementation, the control module is further configured to:

[0179] When the triggering starting position of the gesture event is located in the first area and the event type is a click event, the display of the pop-up layer container is turned off;

[0180] The first region is the area in the mask layer that is not covered by the panel layer.

[0181] In an optional implementation, the control module is further configured to:

[0182] When the triggering starting position of the gesture event is located in the second area and the event type is a swipe event, the display size of the panel layer in the pop-up layer container is controlled;

[0183] The second region is the area in the panel layer that is not covered by the content layer.

[0184] In an optional implementation, the control module is further configured to:

[0185] The display size of the panel layer in the pop-up layer is increased or decreased according to the sliding direction of the sliding event.

[0186] In an optional implementation, the control module is further configured to:

[0187] If a downward sliding event is continuously triggered, the display of the pop-up container will be turned off when the sliding distance of the event exceeds a first distance threshold.

[0188] In an optional implementation, the control module is further configured to:

[0189] If an upward sliding event is continuously triggered, then when the sliding distance of the sliding event exceeds the second distance threshold, the panel layer of the pop-up layer container is controlled to display using the first display size.

[0190] Wherein, the first display size is larger than the current display size of the panel layer.

[0191] In an optional implementation, the content layer also displays a content scroll bar;

[0192] The control module is also used for:

[0193] When the starting position of the gesture event is located in the display area of ​​the content layer, and the gesture event is a swipe event, determine the current scrolling distance of the content scroll bar in the content layer;

[0194] The display of the pop-up layer is controlled based on the current scroll distance of the content scroll bar and the swipe event.

[0195] In an optional implementation, the control module is further configured to:

[0196] If the current scroll distance of the content scroll bar has reached the minimum value, and a downward scrolling event continues to be triggered, then the display of the pop-up container will be turned off.

[0197] In an optional implementation, the control module is further configured to:

[0198] If the current scroll distance of the content scroll bar has not reached the minimum value, when a sliding event is triggered, the current scroll distance of the content scroll bar is adjusted along the sliding direction of the sliding event so that the pop-up information corresponding to the current scroll distance in the content scroll bar is displayed synchronously in the content layer.

[0199] In an optional implementation, the control module is further configured to:

[0200] If the current scrolling distance of the content scroll bar has not reached the maximum value, and the upward scrolling event continues to be triggered, then when the scrolling distance of the scrolling event exceeds the third distance threshold, the panel layer of the pop-up container is controlled to be displayed using the second display size.

[0201] Wherein, the second display size is larger than the current display size of the panel layer.

[0202] In an optional implementation, the control module is further configured to:

[0203] If the scrolling distance has reached its maximum value, then when a downward scrolling event is continuously triggered, the content of the pop-up container's content layer is controlled to bounce back and be displayed.

[0204] Thirdly, according to one or more embodiments of the present disclosure, an electronic device includes: at least one processor and a memory;

[0205] The memory stores computer-executed instructions;

[0206] The at least one processor executes computer execution instructions stored in the memory, causing the at least one processor to perform the method as described in any of the preceding claims.

[0207] Fourthly, according to one or more embodiments of the present disclosure, a computer-readable storage medium stores computer-executable instructions that, when executed by a processor, implement the method as described in any of the preceding claims.

[0208] Fifthly, according to one or more embodiments of the present disclosure, a computer program product includes computer instructions that are executed by a processor as described in any of the preceding claims.

[0209] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0210] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0211] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

Claims

1. A display control method characterized by comprising: include: The method intercepts user gesture events acting on a pop-up container, which includes a mask layer, a panel layer, and a content layer that are sequentially stacked and implemented based on the same technology stack. The mask layer has a larger display size than the panel layer; the panel layer has a larger display size than the content layer; the mask layer displays the background portion of the pop-up container; the panel layer displays control components within the pop-up container; and the content layer displays pop-up information within the pop-up container. Based on the triggering start position and event type of the gesture event, different layers in the pop-up layer container are invoked for display control.

2. The display control method according to claim 1, characterized by, Also includes: Construct the pop-up layer container.

3. The display control method according to claim 2, characterized by, The step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes: When the triggering starting position of the gesture event is located in the first area and the event type is a click event, the display of the pop-up layer container is turned off; The first region is the area in the mask layer that is not covered by the panel layer.

4. The display control method according to claim 2, characterized by, The step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes: When the triggering starting position of the gesture event is located in the second area and the event type is a swipe event, the display size of the panel layer in the pop-up layer container is controlled; The second region is the area in the panel layer that is not covered by the content layer.

5. The display control method according to claim 4, characterized by, Controlling the display size of the panel layer in the pop-up layer container includes: The display size of the panel layer in the pop-up layer is increased or decreased according to the sliding direction of the sliding event.

6. The display control method according to claim 5, characterized by, The step of increasing or decreasing the display size of the panel layer in the pop-up layer according to the sliding direction of the sliding event includes: If a downward sliding event is continuously triggered, the display of the pop-up container will be turned off when the sliding distance of the sliding event exceeds a first distance threshold. Alternatively, if upward sliding events are continuously triggered, when the sliding distance of the sliding event exceeds a second distance threshold, the panel layer of the pop-up container is controlled to display using a first display size; wherein the first display size is larger than the current display size of the panel layer.

7. The display control method according to claim 2, characterized in that, The content layer also displays a content scroll bar; The step of calling different layers in the pop-up container for display control based on the triggering start position and event type of the gesture event includes: When the starting position of the gesture event is located in the display area of ​​the content layer, and the gesture event is a swipe event, determine the current scrolling distance of the content scroll bar in the content layer; The display of the pop-up layer is controlled based on the current scroll distance of the content scroll bar and the swipe event.

8. The display control method according to claim 7, characterized in that, The step of controlling the display of the pop-up layer based on the current scroll distance of the content scroll bar and the swipe event includes: If the current scroll distance of the content scroll bar has reached the minimum value and continues to trigger downward scrolling events, then the display of the pop-up container will be turned off. Alternatively, if the current scroll distance of the content scroll bar has not reached the minimum value, the current scroll distance of the content scroll bar is adjusted along the sliding direction of the sliding event when the sliding event is triggered, so that the pop-up information corresponding to the current scroll distance in the content scroll bar is displayed synchronously in the content layer. Alternatively, if the current scroll distance of the content scroll bar has not reached the maximum value, and a scrolling event with the scrolling direction upward is continuously triggered, then when the scrolling distance of the scrolling event exceeds the third distance threshold, the panel layer of the pop-up layer container is controlled to display using the second display size; wherein, the second display size is larger than the current display size of the panel layer; Alternatively, if the current scroll distance of the content scroll bar has reached its maximum value and a downward scrolling event is continuously triggered, then the content of the content layer of the pop-up container is controlled to bounce back and display.

9. A display control device, characterized in that, include: An interception module is used to intercept user gesture events acting on a pop-up layer container. The pop-up layer container includes a mask layer, a panel layer, and a content layer that are sequentially superimposed and implemented based on the same technology stack. The display size of the mask layer is larger than that of the panel layer; the display size of the panel layer is larger than that of the content layer; the mask layer is used to display the background portion of the pop-up layer container; the panel layer is used to display the control components within the pop-up layer container; and the content layer is used to display pop-up information within the pop-up layer container. The control module is used to call different layers in the pop-up layer container for display control based on the triggering start position and event type of the gesture event.

10. An electronic device, wherein, include: At least one processor; as well as Memory; The memory stores computer-executed instructions; The at least one processor executes computer execution instructions stored in the memory, causing the at least one processor to perform the method as described in any one of claims 1-8.

11. A computer-readable storage medium, wherein, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, implement the method as described in any one of claims 1-8.

12. A computer program product comprising computer instructions, characterized in that, When executed by a processor, the computer instructions implement the method of any one of claims 1-8.

Images