A page navigation bar adsorption method, a mobile terminal and a storage medium

Abstract

The application discloses a page navigation bar adsorption method, a mobile terminal and a storage medium. The method is executed in the mobile terminal, and the mobile terminal comprises a screen display area suitable for displaying the page. The page is sequentially provided with a status bar, a navigation bar and an adsorption bar from top to bottom, and the bottom of the page is provided with an operation area. The method comprises the following steps: setting a safe area on the page based on the status bar and the operation area, wherein the distance between the safe area and the boundary of the screen display area is set as a predetermined distance value; acquiring the height value of the status bar and the height value of the navigation bar; and setting the distance between the adsorption bar and the top boundary of the screen display area as the sum of the height values of the status bar and the navigation bar, so that the adsorption bar is adsorbed at the bottom boundary of the navigation bar. According to the technical scheme of the application, the adsorption bar on the page can be adsorbed at the lower boundary of the navigation bar on the mobile terminal of different operating systems based on a set of codes, thereby reducing the development workload and improving the compatibility.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of mobile terminal development, and particularly relates to a page navigation bar adsorption method, a mobile terminal and a storage medium. BACKGROUND

[0002] At present, in most Apps, in order to enhance the user experience, the atmosphere of page immersion is usually increased, more content is highlighted, and some pages adopt an immersive scheme.

[0003] The immersion is that the head of the App page and the status bar are integrated, and the Webview is the height of the entire mobile screen display area. The initial effect of the page is to hide the navigation bar, realize the immersive effect at the top, and distinguish from other pages. The mainstream App immersion scheme mainly realizes the increase of the colored background at the top, when the page is slid upward, the navigation bar is gradually displayed, and when the page is continuously slid upward, the shortcut operation required can be adsorbed below the navigation bar. At present, the application of the immersive navigation bar adsorption is less on the market, and needs to rely on the original App to realize.

[0004] At present, the application is less on the market, and is realized by the App original scheme or jsBridge scheme, the difference lies in the notch screen. In the full-screen mode, the height of the notch at the top of the screen needs to be obtained, the DisplayCutout class is used to find the position and shape of the notch (cutout) in Android, the **getDisplayCutout()** method can be used to obtain the position and area of the notch (cutout), and the implementation schemes of different manufacturers may be different, and the technical document scheme of the manufacturer needs to be individually inquired, and the compatible code needs to be written for the model to cover different models. In the iOS system, Swift language and Objective-C need to be realized by different methods.

[0005] In the prior art, when the HTML5+CSS3 mode is used for development of the App embedded page, if the same effect needs to be realized, the iOS development language and the Android development language need to be mastered, the cross-language cost is too high. The App native development is equivalent to giving up the lightweight development in terms of development cost, and is relatively lagging behind in version iteration. Secondly, at least two developers need to develop and maintain, and the original App needs to realize the height of the status bar by using the iOS and Android codes, so that too much code needs to be developed, the maintenance cost is high, and more compatibility problems are caused.

[0006] For the existing HTML5+CSS3 mode, how to run on iOS and Android systems based on a set of codes, aiming at the status bar area of the notch screen, based on the standard implementation of the default support of CSS3, and then developing on this basis to realize complex functions with less code, needs to be solved urgently.

[0007] Therefore, it is necessary to provide a page navigation bar adsorption method to solve the problems in the above technical solutions. SUMMARY

[0008] Therefore, the present application provides a page navigation bar adsorption method and a mobile terminal to solve or at least alleviate the above problems.

[0009] According to one aspect of the present application, a page navigation bar adsorption method is provided, which is executed in a mobile terminal including a screen display area adapted to display a page, the page being provided with a status bar, a navigation bar, and an adsorption bar from top to bottom in order, and the bottom of the page being provided with an operation area, the method comprising: setting a safe area on the page based on the status bar and the operation area, wherein the distance between the safe area and the boundary of the screen display area is set as a predetermined distance value; obtaining the height value of the status bar and the height value of the navigation bar; and setting the distance between the adsorption bar and the top boundary of the screen display area as the sum of the height values of the status bar and the navigation bar, so that the adsorption bar is adsorbed at the bottom boundary of the navigation bar.

[0010] Optionally, in the page navigation bar adsorption method according to the present application, before setting the safe area on the page, it comprises: detecting whether the page supports setting the safe area; if the safe area cannot be set, setting the height of the status bar as the height value of the navigation bar.

[0011] Optionally, in the page navigation bar adsorption method according to the present application, detecting whether the page supports setting the safe area comprises: creating a DIV node in the page, and setting the height value of the DIV node as the distance value between the safe area and the boundary of the screen display area; determining whether the page supports setting the safe area according to the height value of the DIV node; and if the safe area cannot be set, setting the height of the status bar as the height value of the navigation bar.

[0012] Optionally, in the page navigation bar adsorption method according to the present application, determining whether the page supports setting the safe area according to the height value of the DIV node comprises: judging whether the height value of the DIV node is 0; and if the height value of the DIV node is 0, determining that the page does not support setting the safe area.

[0013] Optionally, in the page navigation bar adsorption method according to the present application, if the page supports setting a security area, a security area is set on the page.

[0014] Optionally, in the page navigation bar adsorption method according to the present application, in response to a scroll bar on the page sliding to a position corresponding to the adsorption bar, a gap between the adsorption bar and the navigation bar is filled by setting a shadow area.

[0015] Optionally, in the page navigation bar adsorption method according to the present application, setting a distance between the security area and a boundary of the screen display area to a predetermined distance value includes setting a distance between the security area and a top boundary of the screen display area to a first predetermined distance value and setting a distance between the security area and a bottom boundary of the screen display area to a second predetermined distance value.

[0016] Optionally, in the page navigation bar adsorption method according to the present application, the screen includes a notch screen.

[0017] Optionally, in the page navigation bar adsorption method according to the present application, a height value of the navigation bar is 44px.

[0018] According to an aspect of the present application, there is provided a mobile terminal, comprising at least one processor and a memory having stored program instructions configured to be executed by the at least one processor, the program instructions comprising instructions for performing the method as described above.

[0019] According to an aspect of the present application, there is provided a readable storage medium having stored program instructions, which, when read and executed by a mobile terminal, cause the mobile terminal to perform the method as described above.

[0020] According to the technical solution of the present application, a page navigation bar adsorption method 200 is provided, in which, for a page in an immersive mode, a security area is set on the page based on a status bar and an operation area, and a distance between the security area and a boundary of a screen display area is set to a predetermined distance value. Then, a height value of the status bar and a height value of the navigation bar are obtained, and a distance between an adsorption bar and a top boundary of the screen display area is set to a sum of the height values of the status bar and the navigation bar, so that the adsorption bar is adsorbed at a bottom boundary of the navigation bar. According to the technical solution of the present application, the adsorption bar on the page can be adsorbed at the lower boundary of the navigation bar on mobile terminals of different operating systems based on a set of codes, which not only reduces the development workload and facilitates the maintenance of the codes, but also makes the implementation more simple and effective and improves the compatibility.

[0021] Further, the application detects whether the page supports setting a security area through JS code, and in the case that the security area is not supported, sets the height of the status bar as the height value of the navigation bar, so that the adsorption bar can also be finally adsorbed at the lower boundary of the navigation bar. In this way, the scheme of the application can be adapted to mobile terminals of various models.

[0022] In addition, in the case that the height of the status bar of the non-standard notch screen is inconsistent, when it is monitored that the scroll bar on the page is slid to the position corresponding to the adsorption bar, the gap between the adsorption bar and the navigation bar is filled in a shadow filling manner by setting a shadow area. In this way, the problem of the gap between the adsorption bar and the navigation bar can be avoided. Thus, the compatibility and interactivity of the application are further improved.

[0023] The above description is only a summary of the technical scheme of the application, in order to more clearly understand the technical means of the application, the specific embodiments of the application can be implemented according to the content of the specification, and in order to make the above and other purposes, features and advantages of the application more obvious and easy to understand, the following specific embodiments of the application are described. BRIEF DESCRIPTION OF DRAWINGS

[0024] In order to achieve the above and related purposes, certain illustrative aspects will be described herein in connection with the following description and drawings, which are indicative of the various ways in which the principles disclosed herein can be practiced and all aspects and equivalents thereof are intended to fall within the scope of the claimed subject matter. The above and other objects, features and advantages of the present disclosure will become more apparent from the following detailed description, taken in conjunction with the accompanying drawings in which like reference numerals indicate like elements or features. The above detailed description and the accompanying drawings that follow are indicative of illustrative aspects and are not intended to limit or restrict the scope as claimed in any way.

[0025] Figure 1 A schematic diagram of a mobile terminal 100 according to an embodiment of the application is shown;

[0026] Figure 2 A flowchart of a page navigation bar adsorption method 200 according to an embodiment of the application is shown;

[0027] Figure 3 A schematic diagram of a page 300 displayed in a screen display area of a mobile terminal according to an embodiment of the application is shown;

[0028] Figure 4 A schematic diagram of setting a security area on a page according to an embodiment of the application is shown;

[0029] Figure 5a A schematic diagram of a page 300 with a gap before shadow filling according to an embodiment of the application is shown;

[0030] Figure 5bA page 300 after shading filling is shown according to an embodiment of the present application. DETAILED DESCRIPTION

[0031] Exemplary embodiments of the present disclosure will be described more fully hereinafter with reference to the accompanying drawings; however, they are not limited thereto and can be implemented in various forms. The present disclosure will be described herein with reference to exemplary embodiments illustrating preferred embodiments of the present disclosure, but to which the present disclosure is not limited. Rather, the present disclosure will be presented in terms of functional and structural descriptions and associated description embodied in various forms identifiable with the drawings.

[0032] Figure 1 A schematic diagram of a mobile terminal 100 according to an embodiment of the present application is shown. The mobile terminal 100 can be a mobile phone, a tablet computer, a notebook computer, a multimedia player, a wearable device, etc. configured with a front camera and a display screen, but is not limited thereto. As shown, the mobile terminal 100 can include a memory interface 102, a multi-core processor 104, and a peripheral interface 106. Figure 1

[0033] The memory interface 102, the multi-core processor 104, and / or the peripheral interface 106 can be discrete elements or integrated in one or more integrated circuits. In the mobile terminal 100, various elements can be coupled by one or more communication buses or signal lines. Sensors, devices, and subsystems can be coupled to the peripheral interface 106 to facilitate a variety of functions.

[0034] For example, an acceleration sensor 110, a magnetic field sensor 112, and a gravity sensor 114 can be coupled to the peripheral interface 106, the acceleration sensor 110 can collect acceleration data in three coordinate axis directions of a body coordinate system, the magnetic field sensor 112 can collect magnetic field data (magnetic induction intensity) in three coordinate axis directions of the body coordinate system, and the gravity sensor 114 can collect gravity data in three coordinate axis directions of the body coordinate system. The above sensors can facilitate functions such as step counting, orientation, and intelligent switching between horizontal and vertical screens. Other sensors 116 can also be connected to the peripheral interface 106, such as a positioning system (e.g., a GPS receiver), a temperature sensor, a biometric sensor, or other sensing devices, thereby facilitating related functions.

[0035] ​The camera subsystem 120 and optical sensor 122 can be used to facilitate camera functions, such as recording photos and video clips, wherein the camera subsystem and optical sensor, such as a charged-coupled device (CCD) or complementary metal-oxide semiconductor (CMOS) optical sensor, can be employed. Communication functions can be facilitated through one or more wireless communication subsystems 124, which can include radio frequency receivers and transmitters and / or optical (e.g., infrared) receivers and transmitters. The specific design and implementation of the wireless communication subsystem 124 can depend on the communication network(s) the mobile terminal 100 is intended to support. For instance, the mobile terminal 100 can include communication subsystems 124 designed to support LTE, 3G, GSM

[0036] The audio subsystem 126 can be coupled to a speaker 128 and a microphone 130 to facilitate voice-enabled functions, such as voice recognition, voice replication, digital recording, and telephony functions. The I / O subsystem 140 can include a touch screen controller 142 and / or one or more other input controller(s) 144. The touch screen controller 142 can be coupled to a touch screen 146. The touch screen 146 and the touch screen controller 142 can, for example, detect contact and movement or presence and absence of a user object such as a finger or stylus that is used to interact with the touch screen 146 using any of a plurality of touch sensing technologies now known or hereafter developed. One or more other input controllers 144 can be coupled to other input / control devices 148, such as one or more buttons, rocker switches, thumbwheel, infrared port, USB port, and / or a personal digital assistant (PDA) stylus. The one or more buttons (not shown) can include an up / down button for volume control of the speaker 128 and / or the microphone 130.

[0037] The memory interface 102 can be coupled with a memory 150. The memory 150 can include an internal memory and an external memory. The internal memory can be, for example, a static random access memory (SRAM), a non-volatile memory (NVRAM), etc., but is not limited thereto. The external memory can be, for example, a hard disk, a removable hard disk, a U disk, etc., but is not limited thereto. The memory 150 can store program instructions, which can include, for example, an operating system 152 and an application 154. The operating system 152 can be, for example, Android, iOS, Windows Phone, etc., and include program instructions for processing basic system services and performing hardware-dependent tasks. The memory 150 can also store the application 154, which can include program instructions for implementing various user-desired functions. The application 154 can be provided independently of the operating system or can be included with the operating system. In addition, when the application 154 is installed in the mobile terminal 100, a driver module can also be added to the operating system. During runtime of the mobile device, the operating system 152 is loaded from the memory 150 and executed by the processor 104. The application 154 is also loaded from the memory 150 during runtime and executed by the processor 104. The application 154 runs on top of the operating system and utilizes the interfaces provided by the operating system and underlying hardware to implement various user-desired functions, such as hardware management, instant messaging, web browsing, etc.

[0038] In one embodiment, one or more of the various applications 154 include program instructions adapted to perform the page navigation bar sticking method 200 of the present application, so that the mobile terminal 100 performs the page navigation bar sticking method 200 of the present application.

[0039] In one embodiment, the application 154 is, for example, various Apps, such as social class applications, shopping class applications, video class applications, etc., and the present application does not make specific limitations on the type of application. The page can be a page loaded in the application, which can be, for example, an HTML page, and is an immersive page. However, the present application does not make specific limitations on the type of page.

[0040] Figure 2 A flowchart of the page navigation bar sticking method 200 according to one embodiment of the present application is shown. The method 200 is adapted to be performed in a mobile terminal (such as the mobile terminal 100). The mobile terminal 100 includes a screen, and the screen of the mobile terminal 100 includes a screen display area that can be used to display a page.

[0041] Figure 3 A schematic diagram of displaying a page 300 in the screen display area of the mobile terminal according to one embodiment of the present application is shown. The page 300 is an immersive page, and the screen of the mobile terminal can be a notch screen or a punch-hole screen.

[0042] AsFigure 3 As shown in FIG. 3, the page 300 is displayed in the screen display area of the screen with a notch, and the page 300 is sequentially provided with a status bar, a navigation bar, and a sticky bar from top to bottom. Here, the sticky bar is an operation bar that needs to be stuck to the bottom boundary of the navigation bar, for example, in an implementation, the sticky bar can be implemented as a shortcut operation bar. In addition, the bottom of the page 300 also includes an operation area (i.e., the area where the Home Indicator is located).

[0043] It should be noted that for the same application page displayed in the screen display area of the mobile terminal of different models, the position of the navigation bar on the page is fixed, but the height of the status bar can be different. Moreover, the height and relative position of the sticky bar (for example, the shortcut operation bar) from the top of the screen display area are not fixed. In an embodiment, the height value of the navigation bar is 44px.

[0044] As shown in FIG. 2, the method 200 includes steps 210-230. Figure 2

[0045] As shown in FIG. 2, in step 210, a safe area is set on the page based on the status bar on the page and the operation area at the bottom of the page, wherein the distance between the safe area and the boundary of the screen display area can be set as a predetermined distance value. Figure 2

[0046] Figure 4 FIG. 3 shows a schematic diagram of setting a safe area on a page according to an embodiment of the present application.

[0047] As shown in FIG. 3, the distance between the safe area and the top boundary of the screen display area (denoted as safe-area-inset-top) can be set as a first predetermined distance value. The distance between the safe area and the bottom boundary of the screen display area (denoted as safe-area-inset-bottom) can be set as a second predetermined distance value. Figure 4 It should be noted that since the pages of the current mainstream applications are all vertically laid out, for the pages of the mainstream applications, only safe-area-inset-top and safe-area-inset-bottom can be set, that is, the distance between the safe area and the top boundary of the screen display area (denoted as safe-area-inset-top) is set as a first predetermined distance value, and the distance between the safe area and the bottom boundary of the screen display area (denoted as safe-area-inset-bottom) is set as a second predetermined distance value.

[0048]

[0049] ​​​For a non-vertical layout page, four attribute values of safe-area-inset-top, safe-area-inset-bottom, safe-area-inset-left, and safe-area-inset-right can be set. Specifically, a distance between the safe area and a top boundary of the screen display area (denoted as safe-area-inset-top) can be set as a first predetermined distance value; a distance between the safe area and a bottom boundary of the screen display area (denoted as safe-area-inset-bottom) can be set as a second predetermined distance value; a distance between the safe area and a left boundary of the screen display area (denoted as safe-area-inset-left) can be set as a third predetermined distance value; and a distance between the safe area and a right boundary of the screen display area (denoted as safe-area-inset-right) can be set as a fourth predetermined distance value. It should be noted that the present application does not limit the specific values of the first, second, third, and fourth predetermined distance values.

[0050] In the immersive mode, the distance between the adsorption bar and the top boundary of the screen display area is equal to the sum of the status bar height value and the navigation bar height value.

[0051] Therefore, in step 220, the height value of the status bar and the height value of the navigation bar are obtained.

[0052] In step 230, the distance (top value) between the adsorption bar and the top boundary of the screen display area is set as the sum of the height values of the status bar and the navigation bar. In this way, the adsorption bar can be controlled to be adsorbed at the bottom boundary of the navigation bar, thereby achieving the navigation bar adsorption effect.

[0053] For example, in an implementation manner, the status bar height can be filled by env(safe-area-inset-top) and constant(safe-area-inset-top), and when the height value of the navigation bar is 44px, the distance (top value) between the adsorption bar and the top boundary of the screen display area can be set as the sum of the height values of the status bar and the navigation bar by using the calc() function. Specifically, calc(constant(safe-area-inset-top)+44px), or calc(env(safe-area-inset-top)+44px).

[0054] The above scheme can cover all models of mobile terminals based on the iOS system and part of mobile terminals based on the Android system, and the mobile terminal can be a notch screen or a punch-hole screen.

[0055] It should be noted that, in the case that the mobile terminal 100 supports setting a safe area on the page, if the height value of the status bar obtained by the mobile terminal 100 is 0, the safe-area-inset-top (the distance between the safe area and the top boundary of the screen display area) is also 0. Thus, the method of setting the distance between the adsorption bar and the top boundary of the screen display area (the top value) as the sum of the height values of the status bar and the navigation bar is also satisfied.

[0056] It should also be noted that, for another part of the mobile terminal based on the Android system, when the height value of the status bar obtained is 0, the position of the adsorption bar is moved upward, so that the adsorption bar cannot be completely adsorbed at the bottom boundary of the navigation bar. In this regard, in the method 200 of the present application, the following embodiments are provided to realize the complete adsorption of the adsorption bar at the bottom boundary of the navigation bar.

[0057] Since the setting of the safe area can not be supported when the height value of the status bar is 0, in some embodiments, before setting the safe area on the page, it can be detected whether the page supports setting the safe area.

[0058] If the setting of the safe area is not supported, the height of the status bar is set as the height value of the navigation bar. Thus, the height value of the status bar is consistent with the height value of the navigation bar, which can both be 44px.

[0059] If the setting of the safe area is supported, the above steps 210-230 can be normally executed: setting the safe area on the page, wherein the distance between the safe area and the boundary of the screen display area is set as a predetermined distance value; obtaining the height value of the status bar, the height value of the navigation bar; setting the distance between the adsorption bar and the top boundary of the screen display area as the sum of the height values of the status bar and the navigation bar, so that the adsorption bar is adsorbed at the bottom boundary of the navigation bar.

[0060] In an implementation manner, the above scheme can be realized by inserting a small piece of JS (JavaScript) code. Specifically, by executing the JS code, it is detected whether the page supports setting the safe area, and in the case that the setting of the safe area is not supported, the height of the status bar is set as the height value of the navigation bar.

[0061] Specifically, whether the page supports setting the safe area can be detected by the following method:

[0062] A DIV node is created in the page, and the height value of the DIV node is set as the distance value between the safe area and the top boundary of the screen display area (safe-area-inset-top).

[0063] Subsequently, the height value of the DIV node is obtained, and it is determined whether the page supports setting the safe area according to the height value of the DIV node. Specifically, it is determined that the page does not support setting the safe area if the height value of the DIV node is 0. Conversely, it is determined that the page supports setting the safe area if the height value of the DIV node is not 0.

[0064] If setting the safe area is not supported, the height of the status bar is set to the height value of the navigation bar, that is, the height value of the status bar is set to be consistent with the height value of the navigation bar.

[0065] In an implementation manner, a class name fix-safe-area can be added to the page body, and the top value of a sticky (adhesion bar) sub-element with the class name fix-safe-area can be set individually. At this time, the height of the status bar can be set to 44px (the height value of the navigation bar), and correspondingly, the top value (the distance between the adhesion bar and the top boundary of the screen display area) can be set to 88px (the sum of the height values of the status bar and the navigation bar).

[0066] In addition, for a non-standard notch screen, the height value of the status bar is not necessarily 44px. If the actual height value of the status bar is less than the set height value 44px, the top value of the adhesion bar will be set too large, and there will be a gap between the adhesion bar and the navigation bar.

[0067] In order to avoid setting the top value of the adhesion bar too large and causing a gap between the adhesion bar and the navigation bar, a shadow filling method can be used.

[0068] Specifically, in an embodiment, the sliding state of the scroll bar on the page can be monitored. When it is monitored that the scroll bar on the page slides to the position corresponding to the adhesion bar, in response to the scroll bar on the page sliding to the position corresponding to the adhesion bar, the gap between the adhesion bar and the navigation bar is filled by setting a shadow area. Here, Figure 5a A page 300 schematic diagram before shadow filling according to an embodiment of the present application is shown; Figure 5b A page 300 schematic diagram after shadow filling according to an embodiment of the present application is shown.

[0069] As shown in FIG. 3, Figure 5a there is a gap between the navigation bar and the adhesion bar. As shown in FIG. 4, Figure 5b by setting a shadow area (the entire dashed line area), the shadow area is arranged below the navigation bar, so that the gap between the adhesion bar and the navigation bar can be filled. Figure 5b The gap indicated by the dashed line in FIG. 5 has been covered by the shadow area.

[0070] It should be further noted that the height of the shadow area needs to be set to a value large enough to ensure that the shadow area can fill the gap between the adsorption bar and the navigation bar. It can be understood that even in the case where there is no gap between the adsorption bar and the navigation bar, the shadow area set in this embodiment will not affect the adsorption of the adsorption bar to the navigation bar.

[0071] In an implementation manner, the method 200 of the present application can be implemented by a set of codes based on the development manner of HTML+CSS3, and the set of codes can run on mobile terminals based on various operating systems (including iOS and Android) and various models.

[0072] In an implementation manner, the code of the CSS part, for example, includes:

[0073]

[0074]

[0075] In an implementation manner, the JS code, for example, includes:

[0076]

[0077] According to the page navigation bar adsorption method 200 of the present application, for a page in an immersive mode, a safe area is set on the page based on a status bar and an operation area, and the distance between the safe area and the boundary of the screen display area is set to a predetermined distance value. Then, the height value of the status bar and the height value of the navigation bar are obtained, and the distance between the adsorption bar and the top boundary of the screen display area is set to the sum of the height values of the status bar and the navigation bar, so that the adsorption bar is adsorbed at the bottom boundary of the navigation bar. According to the technical solution of the present application, the adsorption bar on the page can be adsorbed at the lower boundary of the navigation bar based on a set of codes on mobile terminals of different operating systems, which not only reduces the development workload and facilitates the maintenance of the codes, but also makes the implementation manner more simple and effective, and improves the compatibility.

[0078] Further, the present application detects whether the page supports setting a safe area through JS code, and in the case where the safe area is not supported, the height of the status bar is set to the height value of the navigation bar, so that the adsorption bar can also be finally adsorbed at the lower boundary of the navigation bar. In this way, the scheme of the present application can be adapted to mobile terminals of various models.

[0079] In addition, in the case where the height of the status bar of a non-standard notch screen is inconsistent, when it is monitored that the scroll bar on the page is slid to the position corresponding to the adsorption bar, a shadow area is set, and a shadow filling manner is used to fill the gap between the adsorption bar and the navigation bar. In this way, the problem of the gap between the adsorption bar and the navigation bar can be avoided. Thus, the compatibility and the interactivity of the present application are further improved.

[0080] The various techniques described herein can be implemented in connection with hardware or software or, where appropriate, with a combination of both. Thus, the methods and apparatus of the application, or certain aspects or portions thereof, can take the form of program code (i.e., instructions) embodied in tangible media, such as removable hard disks, U disks, magnetic disks, optical disks, or any other machine-readable storage medium wherein, when the program code is loaded into an internal memory of a machine, such as a computer, the machine becomes an apparatus for practicing the subject application.

[0081] Where the program code is executed on a programmable computer, the mobile terminal generally includes a processor, a storage medium readable by the processor (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device. The storage medium is configured to store program code which, when executed by the processor, carries out the page navigation bar adhesion method of the present application.

[0082] In the context of this document, a "storage medium" can be any physical medium that stores information. The term "storage medium" shall therefore include without being limited to disks, tapes, optical storage media, solid state memory, and / or other storage devices.

[0083] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order not to obscure the understanding of this description.

[0084] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order not to obscure the understanding of this description.

[0085] Similarly, it is to be understood that the embodiments of the present application can be placed into practice notwithstanding modifications to form yet further embodiments of the present application. As such, the terms and expressions of the foregoing description are used as terms of description and not of limitation, and there is no intention, in the use of such terms and expressions, of excluding any equivalents of the features shown and described or portions thereof. It is recognized that various modifications are possible within the scope of the application, and the inventive scope is to be interpreted by the appended claims and their equivalents in which:

[0086] Those skilled in the art will understand that the modules, or units, or components of the devices in the examples disclosed herein can be arranged in a device as described in the examples, or alternatively can be located in one or more devices different from the devices in the examples. The modules in the foregoing examples can be combined into one module or further divided into multiple sub-modules.

[0087] Those skilled in the art will understand that the modules in the devices in the examples can be adaptively changed and disposed in one or more devices different from the examples. The modules or units or components in the examples can be combined into one module or unit or component, and further divided into multiple sub-modules or sub-units or sub-components. Except that at least some of such features and / or processes or units are mutually exclusive, any combination of all the features disclosed in the specification (including the accompanying claims, abstract and drawings), and all the processes or units of any method or device disclosed thus can be adopted. Unless explicitly stated otherwise, each feature disclosed in the specification (including the accompanying claims, abstract and drawings) can be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0088] Further, those skilled in the art will understand that the combination of features of different embodiments means within the scope of the present application and forms different embodiments, although some of the examples described herein include certain features rather than others included in other examples. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0089] Furthermore, some of the embodiments described herein are of a "method" or a "process" that can be embodied in software, firmware or hardware, and when embodied in software, can be implemented with computer- executable instructions. The rules of equivalence, as well as the "means-plus-function" or "step-plus-function" clauses below, are meant to cover both "articles of manufacture" and "combinations of articles of manufacture" that consist of one or more computer- readable media storing computer-executable instructions.

[0090] As used herein, unless otherwise indicated, the use of the ordinal adjectives "first", "second", "third" and so forth, merely to distinguish between two or more of the same item, and do not, unless otherwise indicated, imply any temporal, spatial, ranking or ordering in the arrangement, magnitude, priority or appearance of the items so designated.

[0091] Although the present application has been described in connection with limited number of embodiments, it will be evident for a person skilled in the art that many modifications and changes can be applied to the application as described above without deviating from the scope of the application as defined in the following claims. Furthermore, it should be noted that the language used in the specification has been principally selected for readability and instructional purposes and can not have been selected to delineate or circumscribe the subject application. Accordingly, the disclosure of the present application is intended to be illustrative, but not limiting, of the scope of the application, which is set forth in the following claims.

Claims

1. A method for snapping a page navigation bar, executed in a mobile terminal, the mobile terminal including a notch screen, the notch screen including a screen display area suitable for displaying the page, the page being an HTML page and an immersive page, the page having, from top to bottom, a status bar, a navigation bar, and a snap-in bar, the snap-in bar being a quick operation bar, and an operation area at the bottom of the page, the method comprising: During the upward scrolling of the page, it is detected whether the page supports setting a safe area, including: creating a DIV node in the page and setting the height value of the DIV node to the distance value between the boundary of the safe area and the screen display area; determining whether the height value of the DIV node is 0; if the height value of the DIV node is 0, it is determined that the page does not support setting a safe area; if the height value of the DIV node is not 0, it is determined that the page supports setting a safe area. If setting a safe area is not supported, the height of the status bar is set to the height of the navigation bar so that the snap bar snaps to the bottom edge of the navigation bar. If setting a safe zone is supported, a safe zone is set on the page based on the status bar and the operation area, wherein the distance between the safe zone and the boundary of the screen display area is set to a predetermined distance value; Obtain the height values ​​of the status bar and the navigation bar; The distance between the adsorption bar and the top boundary of the screen display area is set to the sum of the heights of the status bar and the navigation bar, so that the adsorption bar is adsorbed onto the bottom boundary of the navigation bar. In response to the scroll bar on the page sliding to the position corresponding to the snap bar, a shadow area is set to fill the gap between the snap bar and the navigation bar.

2. The method as described in claim 1, wherein, Setting the distance between the boundary of the safe area and the screen display area to a predetermined distance value includes: The distance between the safe area and the top boundary of the screen display area is set to a first predetermined distance value; The distance between the safe area and the bottom boundary of the screen display area is set as a second predetermined distance value.

3. A mobile terminal, comprising: At least one processor; as well as A memory storing program instructions, wherein the program instructions are configured to be executed by the at least one processor, the program instructions including instructions for performing the method as claimed in any one of claims 1-2.

4. A readable storage medium storing program instructions, which, when read and executed by a mobile terminal, cause the mobile terminal to perform the method as described in any one of claims 1-2.

Images