CN107977137B - Object display method, device and equipment of application page - Google Patents
Object display method, device and equipment of application page Download PDFInfo
- Publication number
- CN107977137B CN107977137B CN201711010157.2A CN201711010157A CN107977137B CN 107977137 B CN107977137 B CN 107977137B CN 201711010157 A CN201711010157 A CN 201711010157A CN 107977137 B CN107977137 B CN 107977137B
- Authority
- CN
- China
- Prior art keywords
- floor
- container
- page
- current page
- client application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the application discloses an object display method, device and equipment of an application page, wherein the method comprises the following steps: acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released; if the drop-down distance is greater than a predetermined second floor expansion threshold, the second floor object is exposed in the current page of the client application, wherein the second floor object refers to an object that is hierarchically below a hierarchy of current page display objects of the client application. In the embodiment of the application, the second floor object is displayed in the current page by comparing the pull-down distance of the current page after the pull-down gesture is released with the preset second floor unfolding threshold value and when the pull-down distance is larger than the preset second floor unfolding threshold value, so that the problem that the second floor object cannot be unfolded or the problem that the unfolding mode of the second floor object is complex in the prior art is solved, and the user experience is improved.
Description
Technical Field
The present application relates to the field of computer software technologies, and in particular, to a method, an apparatus, and a device for displaying an object of an application page.
Background
News software in the mobile phone software market is endlessly available, the technology of displaying related interest news for different user groups is widely applied, and different modes for displaying related news for different users are diversified. Therefore, an information recommendation mode which enables a user to have good experience is also the final aim pursued by each news software.
In the existing display process of news applications, only pull-down refreshing operation can be performed frequently, the expansion operation of a second floor object hidden behind a current page cannot be realized, or the mode of expanding the second floor object is complex, and the user experience is poor.
Disclosure of Invention
The embodiment of the application aims to provide an object display method, device and equipment of an application page, so as to solve the problem that a second floor page object cannot be unfolded or the problem that the second floor page object is complicated in unfolding mode in the prior art, and improve user experience.
In order to solve the above technical problem, the embodiment of the present application is implemented as follows:
in a first aspect, a method for displaying an object of an application page is provided, where the method includes:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is greater than a predetermined second floor expansion threshold, the second floor object is exposed in the current page of the client application, wherein the second floor object refers to an object that is hierarchically below a hierarchy of current page display objects of the client application.
In a second aspect, an application page display apparatus is provided, the apparatus including:
the acquisition unit is used for acquiring a pull-down distance of the current page of the client application when the pull-down gesture is released;
a presentation unit, configured to present the second floor object in the current page of the client application if the pull-down distance is greater than a predetermined second floor expansion threshold, where the second floor object refers to an object whose level is below a level of a current page display object of the client application.
In a third aspect, an electronic device is provided, which includes:
a processor; and
a memory arranged to store computer executable instructions that, when executed, cause the processor to:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is greater than a predetermined second floor expansion threshold, the second floor object is exposed in the current page of the client application, wherein the second floor object refers to an object that is hierarchically below a hierarchy of current page display objects of the client application.
In a fourth aspect, a computer-readable storage medium is presented, the computer-readable storage medium storing one or more programs that, when executed by an electronic device that includes a plurality of application programs, cause the electronic device to:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is greater than a predetermined second floor expansion threshold, the second floor object is exposed in the current page of the client application, wherein the second floor object refers to an object that is hierarchically below a hierarchy of current page display objects of the client application.
As can be seen from the technical solutions provided in the embodiments of the present application, the embodiments of the present application have at least one of the following technical effects:
by comparing the pull-down distance of the current page after the pull-down gesture is loosened with the preset second floor unfolding threshold value and displaying the second floor object in the current page when the pull-down distance is larger than the preset second floor unfolding threshold value, the problem that the second floor object cannot be unfolded or the problem that the second floor object unfolding mode of the page is complex in the prior art is solved, and user experience is improved.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only some embodiments described in the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without any creative effort.
Fig. 1 is a flowchart of an object presentation method of an application page according to an embodiment of the present application.
FIG. 2 is an interaction flowchart of an object presentation method of an application page according to an embodiment of the present application.
Fig. 3 is a schematic diagram of a second floor object display process according to an embodiment of the present application.
Fig. 4 is a schematic process diagram of rendering a second floor object according to another embodiment of the present application.
Fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Fig. 6 is a schematic structural diagram of an application page display device according to an embodiment of the present application.
Detailed Description
The embodiment of the application provides an object display method, device and equipment of an application page.
In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Fig. 1 is a flowchart of an object presentation method of an application page according to an embodiment of the present application. The method of fig. 1 may include:
s101, obtaining a pull-down distance of the current page of the client application when the pull-down gesture is released.
It should be understood that the client application in the embodiments of the present application is an application deployed on a mobile terminal.
And S102, if the pull-down distance is greater than a preset second floor expansion threshold value, showing the second floor object in the current page of the client application.
It should be understood that, in the embodiment of the present application, the second floor object refers to an object hidden behind the display object of the current page and having a hierarchy below the hierarchy of the display object of the current page. That is, the level of the floor two object is below the level of the page element of the presentation of the current page. Specifically, the second floor object may be a view container, implementing a service independent of the content presented on the current page.
It should be appreciated that presenting the second floor object in the current page of the client application may be presented in a variety of ways.
Specifically, if a first distance between the top and the bottom of the second floor object is less than a second distance between the top and the bottom of the current page, the page element of the current page may be moved to the bottom by the second distance, and the second floor object may be displayed over the moved page element of the current page. Or, the current page may be replaced by a completely new page, where the page includes the second floor object, and the page elements of the current page are moved to the bottom by the second distance and then presented on the mobile terminal. At this time, the new page is the current page of the client.
If the first distance between the top and the bottom of the second floor object is greater than or equal to the second distance between the top and the bottom of the current page, a brand new page can be used for replacing the current page, the page comprises the second floor object, and at the moment, the brand new page is the current page of the client.
In the embodiment of the application, the second floor object is displayed in the current page of the client application by comparing the pull-down distance of the current page after the pull-down gesture is released with the preset second floor unfolding threshold value and when the pull-down distance is larger than the preset second floor unfolding threshold value, so that the problem that the second floor object cannot be unfolded or the problem that the second floor object is complicated in unfolding mode in the prior art is solved, and the user experience is improved.
Optionally, as an embodiment, the step S102 may be specifically implemented as:
initializing the second floor object and sending a first screen data request of the second floor object;
and rendering and displaying the second floor object on the current page of the client application according to the second floor object data resource fed back by the first screen data request.
In the embodiment of the application, the second floor object is rendered by initializing the second floor object, sending the first screen data request of the second floor object and according to the second floor object resource package fed back based on the first screen data request, so that the latest display data of the second floor object can be acquired.
Optionally, as an embodiment, the step S102 may be specifically implemented as:
gradually showing the second floor object in the current page of the client application;
calculating a first display ratio of the area of the second floor object which is already displayed relative to the final display area;
and adjusting the fuzzy value and/or the scaling of the second-floor object according to the first display ratio, wherein the fuzzy value is positively correlated with the first display ratio, and the scaling is positively correlated with the first display ratio.
In the embodiment of the application, the fuzzy value and the scaling ratio of the second floor object during display are adjusted according to the displayed area of the second floor object, so that the display of the second floor object can be changed from virtual to real and/or from small to large, and the display effect of the second floor object is more friendly.
Optionally, as an embodiment, after step S102, the method may further include:
gradually retracting the second floor object in the current page of the client application;
calculating a second display ratio of the area of the second floor object which is not folded relative to the final display area;
and adjusting the fuzzy value and/or the scaling of the second-floor object according to the second display ratio, wherein the fuzzy value is positively correlated with the second display ratio, and the scaling is positively correlated with the second display ratio.
In the embodiment of the application, when the second floor object is folded, the operation mode opposite to the operation mode for unfolding the second floor object is adopted, so that the contraction effect of the second floor object is more friendly.
Optionally, the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second-level container comprising a middle-level container for embedding one or more first-level containers, and a second-level container for embedding a second-level object, wherein the second-level container has a display hierarchy below the middle-level container;
and the third layer container is used for bearing the third layer container of the second layer container.
Further, step S102 may further include:
and if the vertical coordinate of the position of the first page element and the first sum value obtained by summing the height of the first page element are greater than the vertical coordinate of the top position of the second-floor container where the second-floor object is located, or if the first sum value is less than the vertical coordinate of the bottom position of the second-floor container where the second-floor object is located, performing transverse position change on the first page element corresponding to the first sum value every preset time, wherein the first page element is a page element in page content displayed by the second-floor object.
In the embodiment of the application, when the content of the second floor object exceeds the content which can be contained in the display area at one time, the method is adopted, so that the effect of dynamic carousel in the page can be realized.
Further, performing the lateral position variation every predetermined time includes:
and executing the transverse position change according to the slow movement speed from fast to slow calculated by the quadratic Bezier curve at intervals of the preset time.
In the embodiment of the application, the carousel switching speed is adjusted through the secondary Bezier curve, so that a better playing effect can be obtained.
Further, when the first page element is a picture, the first page element further includes a corresponding title, and step S102 may further include: and switching the title corresponding to the first page element when the horizontal position change is executed.
In the embodiment of the application, the page elements displayed in the second floor object are pictures, and the page elements include corresponding icons, and the displayed titles can be matched with the picture contents by switching the titles corresponding to the page elements while executing the horizontal position change.
Further, the first layer container is a TableView component, and the second layer container and the third layer container are ScrollView components.
Optionally, as an embodiment, the current page of the client is a page adopting an H5 technology, and the step S102 may specifically be implemented as:
acquiring the latest version configuration information of the data resource of the second floor object;
if the version of the current cache data resource of the second floor object in the client is the latest version, generating a page corresponding to the second floor object according to the current cache data resource and displaying the page;
and if the version of the current cache data resource of the second floor object in the client is not the latest version, downloading the latest data resource of the second floor object in the client, and generating and displaying a page corresponding to the second floor object according to the latest data resource.
In the embodiment of the application, the silent updating of the client is realized by designing the page of the client by adopting the H5 technology and determining whether the resource package corresponding to the updated page needs to be downloaded according to the latest version of the H5 page.
Optionally, before step S101, the method further includes:
and adjusting the alhpa parameter value of the navigation bar according to the proportional value of the pull-down distance of the current page of the client application and the height of the navigation bar of the current page of the client application.
Further, when the value of the alhpa parameter becomes 0, an event is triggered that changes the theme color of the status bar in the current page of the client application.
Further, after step S101, the method further includes:
after the second floor object is switched from non-display to expansion, the navigation bar is hidden, and/or the color of the status bar is set to be black; or
And after the second floor object is switched from expansion to contraction, displaying the navigation bar and/or setting the color of the status bar to be white.
The method of the embodiments of the present application will be further described with reference to specific embodiments.
Fig. 2 is a specific flowchart of an object presentation method of an application page according to an embodiment of the present application. As shown in fig. 2, the process may include:
201, APP starts.
It should be understood that the method of the embodiment shown in fig. 1 of the present application may be applied to a client application in a mobile terminal. Before implementing the method of the embodiment shown in fig. 1 of the present application, a client Application (APP) should be started.
202, triggering the operation of unfolding the second floor object.
In the embodiment of the application, whether an operation of expanding the second floor object is triggered or not can be determined by acquiring information of gestures of a user in a current page of the app.
Optionally, for example, the app may obtain a pull-down distance when the pull-down gesture of the user is released in a current page of the app, and determine whether to trigger an operation of expanding the second floor object according to a relationship between the pull-down distance and a predetermined threshold. The predetermined threshold may be a predetermined second floor deployment threshold. If the drop-down distance is greater than a predetermined second floor expansion threshold, an operation of expanding a second floor object may be triggered; if the drop-down distance is less than or predetermined second floor expansion threshold, a list refresh operation of the current page may be performed.
Fig. 3 is a schematic diagram of a second floor object display process according to an embodiment of the present application. As shown in fig. 3, (1) is the current page, (2) is the current page in the pull-down process, and (3) is the current page after the second floor object is expanded. As shown in (2) in fig. 3, when the user performs a pull-down operation, the page elements in the current page uniformly move to the bottom of the page by the same distance, which is the pull-down distance.
Optionally, in order to implement the pull-down operation shown in fig. 3, in the embodiment of the present application, the current page of the client application may include three layers of containers, that is
The first-layer container is used for displaying the list content of the current page;
a second-level container comprising a middle-level container for embedding one or more first-level containers, and a second-level container for embedding a second-level object, wherein the second-level container has a display hierarchy below the middle-level container;
and the third layer container is used for bearing the third layer container of the second layer container.
It should be understood that when the middle layer container includes a plurality of first layer containers, the display of the first layer containers may also be switched by rolling left and right.
It will be appreciated that the second floor container has a display level below the intermediate level container, that is, the second floor container is generally hidden from view in the case of the intermediate level container being visible. In the embodiment of the application, the second floor container can be displayed partially when the current page is subjected to the pull-down operation, and can be displayed completely after the pull-down operation exceeds the preset threshold value.
Wherein: the status bar is a view of the system displaying information such as signals, network providers, electric quantity and the like on the top of the mobile phone
Of course, it should be understood that, for the convenience of determining whether the pull-down distance reaches the preset threshold value for triggering the second floor object to be deployed, in the embodiment of the present application, the state change of the top navigation bar may also be implemented by monitoring the user gesture and the current second floor state. Specifically, for example, the alpha of the navigation bar varies from 1 to 0 starting from the top of the screen and going down 64 pixels from the top of the screen, and the ratio of 64 pixels minus the distance of the second-tier container from the top to 64 pixels is proportional to the alpha value. When the ratio is less than 0, no processing is performed. In addition, when alpha becomes 0, an event is triggered that alters the subject color of the status bar, which becomes black if alpha is 0, and white otherwise.
In addition, after the user finishes pulling, whether the current page is transited to the second floor unfolding state or the closing state can be determined according to the preset threshold value for triggering the second floor unfolding object or not. If the second floor is unfolded, the navigation bar is automatically hidden, alpha is set to 0, and the status bar can also be set to black. If the second floor is closed, the navigation bar is displayed and alpha becomes 1, while the status bar also becomes white. Of course, it should be understood that the setting or non-setting of the status bar is optional, as is the color of its setting.
Furthermore, it should be understood that in the embodiment of the present application, a certain page, or a certain number of pages, of App may be implemented by using the H5 technology. H5 is the fifth heavily modified version of HyperText Markup Language (HTML).
If the current page is implemented by adopting H5 technology or technology which is similar to H5 technology and can update the application version in real time, executing step 203 after triggering the operation of unfolding the second floor object;
otherwise, after triggering the operation of unfolding the second floor object, step 206 is executed.
And 203, pulling the latest version configuration information.
The App needs to pull the latest version configuration information of the page adopting the H5 technology in the App in an H5 server, and the H5 server is a server for storing App data resources. Of course, if the entire app is implemented using H5 technology, one version configuration information may be set for the entire app. In this case, step 203 may be executed before step 202, and the latest version information of App is obtained, which is equivalent to obtaining the version information of the data resource of the second floor object.
And 204, judging whether the data resource of the second floor object is the latest version.
The App can judge whether the data resource of the second floor object is the latest version according to the acquired latest version information and the version information of the data resource of the second floor object cached in the APP.
If the version is the latest version, step S206 is executed;
if not the latest version, step S205 is performed.
The latest data resources are downloaded 205.
The App can download the latest data resources of the second floor object according to the H5 technology. Specifically, the App can adopt a full-volume downloading mode or an incremental downloading mode. The downloading mode can be preset and configurable.
206, initializing the second floor function.
It should be appreciated that the second floor function initialization may occur upon triggering an operation to present the second floor object.
Specifically, the initialization operation may include step 207 and step 208.
And 207, sending a first screen data request of the second floor object.
Before displaying the second floor object, the App can send a first screen data request of the second floor object, and request the first screen data in the second floor object from the server to achieve data acquisition.
208, components of the second floor object are initialized.
Components of the second floor object may also be initialized prior to presentation of the second floor object.
In one particular application, the second floor object may be implemented using a webview component. At this point, the app may initialize the webview component of the second floor object.
209, a rendering operation of the second floor object is performed.
Specifically, after the data acquisition and the component initialization of the second floor object are completed, the rendering operation of the second floor object may be performed based on the fed back data.
The manner in which the second floor object is displayed may be varied. For example, after rendering the second floor object, the second floor object is displayed in its entirety, or the second floor object is gradually displayed in the current page.
Alternatively, the second floor object may be gradually shown, for example, the second floor object may be gradually shown along the upper part to the lower part of the current page at a predetermined rate.
Preferably, in gradually showing the second floor object, the method may further include:
calculating a first display ratio of the area of the second floor object which is already displayed relative to the final display area;
and adjusting the fuzzy value and/or the scaling of the second-floor object according to the first display ratio, wherein the fuzzy value is positively correlated with the first display ratio, and the scaling is positively correlated with the first display ratio.
A is positively correlated with B, i.e., as A increases, B also increases. The positive correlation may be, for example, a linear correlation between the former and the latter, or a square, an open square, or the like. Specifically, for example, the blur value is the first presentation ratio, the scale is the first presentation ratio, the blur value is 0.5+ the first presentation ratio/2, the scale is the first presentation ratio, and so on.
Fig. 4 is a schematic process diagram of rendering a second floor object according to another embodiment of the present application. As shown in fig. 4, the second floor object can slide along with the first screen and perform the blurring and fading processes.
In addition, as shown in fig. 4, after the second floor content is completely opened and displayed, the second floor object can be displayed in the current page.
Of course, in the second floor object, different display effects can be realized according to the requirement.
Optionally, if the display area of the second floor object cannot accommodate all the page elements of the second floor object, in one presentation mode, the method may include:
if the first sum value obtained by summing the vertical coordinate of the position of the first page element and the height of the first page element is larger than the vertical coordinate of the top position of the page window where the second floor object is located, performing transverse position change on the first page element corresponding to the first sum value every preset time, wherein the first page element is a page element in page content displayed by the second floor object;
or if the first sum value is smaller than the ordinate of the bottom position of the page window where the second floor object is located, performing lateral position change on the first page element corresponding to the first sum value every predetermined time.
And the first page element is a page element in the page content displayed by the second floor object.
Specifically, when the lateral position change is executed, the lateral position change may be executed at intervals of the predetermined time according to a slow movement speed from fast to slow calculated from a quadratic bezier curve.
In particular, when the first page element is a picture, the first page element may further include a corresponding title. At this time, when the lateral position shift is performed, the header corresponding to the first page element may also be switched.
In addition, as shown in fig. 4, the user may click on any page element in the second floor object to enter the corresponding page.
The user can click and fold the second floor page and return to the page before the second floor page is unfolded. Or the content of the second floor object is slid downwards to the bottom of the current page of the client application through gesture sliding, and then is slid upwards to exceed a preset second floor contraction threshold value, the second floor object is folded, and the second floor object returns to the page before the second floor page is expanded.
Of course, it should be understood that in stowing the second floor object, the reverse of deploying the second floor object may be taken. For example, the second floor object may be gradually collapsed in the current page of the client application; calculating a second display ratio of the area of the second floor object which is not folded relative to the final display area; and adjusting the fuzzy value and/or the scaling of the second-floor object according to the second display ratio, wherein the fuzzy value is positively correlated with the second display ratio, and the scaling is positively correlated with the second display ratio.
The foregoing description has been directed to specific embodiments of this disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing may also be possible or may be advantageous.
Fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present application. Referring to fig. 5, at a hardware level, the electronic device includes a processor, and optionally further includes an internal bus, a network interface, and a memory. The Memory may include a Memory, such as a Random-Access Memory (RAM), and may further include a non-volatile Memory, such as at least 1 disk Memory. Of course, the electronic device may also include hardware required for other services.
The processor, the network interface, and the memory may be connected to each other via an internal bus, which may be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one double-headed arrow is shown in FIG. 5, but this does not indicate only one bus or one type of bus.
And the memory is used for storing programs. In particular, the program may include program code comprising computer operating instructions. The memory may include both memory and non-volatile storage and provides instructions and data to the processor.
The processor reads the corresponding computer program from the nonvolatile memory into the memory and then runs the computer program to form the application page showing device on the logic level. The processor is used for executing the program stored in the memory and is specifically used for executing the following operations:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
and if the drop-down distance is larger than a preset second floor expansion threshold value, displaying a second floor object in the current page of the client application, wherein the second floor object refers to an object which is lower than the level of the current page display object of the client application.
The method performed by the application page presentation apparatus according to the embodiment shown in fig. 1 of the present application can be applied to a processor, or implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or instructions in the form of software. The Processor may be a general-purpose Processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but also Digital Signal Processors (DSPs), Application Specific Integrated Circuits (ASICs), Field Programmable Gate Arrays (FPGAs) or other Programmable logic devices, discrete Gate or transistor logic devices, discrete hardware components. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present application may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software module may be located in ram, flash memory, rom, prom, or eprom, registers, etc. storage media as is well known in the art. The storage medium is located in a memory, and a processor reads information in the memory and completes the steps of the method in combination with hardware of the processor.
The electronic device may also execute the method of fig. 1 and implement the functions of the application page display apparatus in the embodiment shown in fig. 1, which are not described herein again in this embodiment of the present application.
Of course, besides the software implementation, the electronic device of the present application does not exclude other implementations, such as a logic device or a combination of software and hardware, and the like, that is, the execution subject of the following processing flow is not limited to each logic unit, and may also be hardware or a logic device.
Embodiments of the present application also provide a computer-readable storage medium storing one or more programs, where the one or more programs include instructions, which when executed by a portable electronic device including a plurality of application programs, enable the portable electronic device to perform the method of the embodiment shown in fig. 1, and are specifically configured to:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
and if the drop-down distance is larger than a preset second floor expansion threshold value, displaying a second floor object in the current page of the client application, wherein the second floor object refers to an object which is lower than the level of the current page display object of the client application.
Fig. 6 is a schematic structural diagram of an application page display device 600 according to an embodiment of the present application. Referring to fig. 6, in a software implementation, the application page presenting apparatus 600 may include:
the obtaining unit 610 obtains a pull-down distance of a current page of the client application when the pull-down gesture is released;
a presentation unit 620, which presents the second floor object in the current page of the client application if the pull-down distance is greater than a predetermined second floor expansion threshold, wherein the second floor object refers to an object whose level is below the level of the current page display object of the client application.
In short, the above description is only a preferred embodiment of the present application, and is not intended to limit the scope of the present application. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Optionally, as an embodiment, the display unit 620 is specifically configured to:
initializing the second floor object and sending a first screen data request of the second floor object;
and rendering and displaying the second floor object on the current page of the client application according to the second floor object resource packet fed back based on the first screen data request.
Optionally, as an embodiment, the display unit 620 is specifically configured to:
gradually showing the second floor object in the current page of the client application;
calculating a first display ratio of the area of the second floor object which is already displayed relative to the final display area;
and adjusting the fuzzy value and/or the scaling of the second-floor object according to the first display ratio, wherein the fuzzy value is positively correlated with the first display ratio, and the scaling is positively correlated with the first display ratio.
Optionally, as an embodiment, the display unit 620 is further specifically configured to:
gradually retracting the second floor object in the current page of the client application;
calculating a second display ratio of the area of the second floor object which is not folded relative to the final display area;
and adjusting the fuzzy value and/or the scaling of the second-floor object according to the second display ratio, wherein the fuzzy value is positively correlated with the second display ratio, and the scaling is positively correlated with the second display ratio.
Optionally, the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second-level container comprising a middle-level container for embedding one or more first-level containers, and a second-level container for embedding a second-level object, wherein the second-level container has a display hierarchy below the middle-level container;
and the third layer container is used for bearing the third layer container of the second layer container.
Further, the first layer container is a TableView component, and the second layer container and the third layer container are ScrollView components.
Further, as an embodiment, the display unit 620 is further specifically configured to:
and if the vertical coordinate of the position of the first page element and the first sum value obtained by summing the height of the first page element are greater than the vertical coordinate of the top position of the second-floor container where the second-floor object is located, or if the first sum value is less than the vertical coordinate of the bottom position of the second-floor container where the second-floor object is located, performing transverse position change on the first page element corresponding to the first sum value every preset time, wherein the first page element is a page element in page content displayed by the second-floor object.
Further, the display unit 620 may be specifically configured to: and executing the transverse position change according to the slow movement speed from fast to slow calculated by the quadratic Bezier curve at intervals of the preset time.
Further, when the first page element is a picture, the first page element further includes a corresponding title, and the display unit 620 is specifically configured to: and switching the title corresponding to the first page element when the horizontal position change is executed.
Optionally, as an embodiment, the page of the client is an H5 page, and the presentation unit 620 may be specifically configured to:
acquiring the latest version configuration information of the data resource of the second floor object;
if the version of the current cache data resource of the second floor object in the client is the latest version, generating a page corresponding to the second floor object according to the current cache data resource and displaying the page;
and if the version of the current cache data resource of the second floor object in the client is not the latest version, downloading the latest data resource of the second floor object in the client, and generating and displaying a page corresponding to the second floor object according to the latest data resource.
Optionally, the display unit 620 is specifically configured to: and adjusting the alhpa parameter value of the navigation bar according to the proportional value of the pull-down distance of the current page of the client application and the height of the navigation bar of the current page of the client application.
Further, optionally, the display unit 620 is further specifically configured to: when the value of the alhpa parameter becomes 0, an event is triggered that changes the theme color of the status bar in the current page of the client application.
Further, the display unit 620 is specifically further configured to:
after the second floor object is switched from non-display to expansion, the navigation bar is hidden, and/or the color of the status bar is set to be black; or after the second floor object is switched from expansion to contraction, the navigation bar is displayed, and/or the color of the status bar is set to be white.
In addition, the application page display apparatus 600 may also execute the method in the embodiment shown in fig. 1, and implement the functions of the application page display apparatus in the embodiment shown in fig. 1, which are not described again.
In addition, in the embodiment of the present application, a specific product form of the application page display apparatus may be a client application of the mobile terminal, and the like.
The systems, devices, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product with certain functions. One typical implementation device is a computer. In particular, the computer may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.
Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
Claims (15)
1. An object display method of an application page is characterized by comprising the following steps:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is larger than a preset second floor expansion threshold value, displaying a second floor object in a current page of the client application, wherein the second floor object refers to an object which is lower than the level of a current page display object of the client application, and is a view container which realizes a service independent from the currently displayed content;
wherein the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second level container comprising a middle level container for embedding one or more first level containers, and a second level container for embedding a second level object, wherein the second level container has a display hierarchy below the middle level container;
and the third layer container is used for bearing the third layer container of the second layer container.
2. The method of claim 1,
displaying the second floor object in a current page of the client application, including:
initializing the second floor object, and sending a first screen data request of the second floor object;
and rendering and displaying the second floor object on the current page of the client application according to the data resource of the second floor object fed back by the first screen data request.
3. The method of claim 1,
displaying the second floor object in a current page of the client application, including:
gradually showing the second floor object in a current page of the client application;
calculating a first display ratio of the area of the second floor object which is already displayed relative to the final display area;
and adjusting a fuzzy value and/or a scaling of the second floor object according to the first display ratio, wherein the fuzzy value is positively correlated with the first display ratio, and the scaling is positively correlated with the first display ratio.
4. The method of claim 3, wherein the method further comprises:
gradually collapsing the second floor object in a current page of the client application;
calculating a second display ratio of the area where the second floor object is not folded relative to the final display area;
and adjusting a fuzzy value and/or a scaling of the second-floor object according to the second display ratio, wherein the fuzzy value is positively correlated with the second display ratio, and the scaling is positively correlated with the second display ratio.
5. The method of claim 1,
if the ordinate of the position of first page element with first sum value after the highly adding of first page element is greater than the ordinate of the top position of the second floor container at second floor object place, perhaps if first sum value is less than the ordinate of the bottom position of the second floor container at second floor object place, then will first page element that first sum value corresponds carries out once horizontal position change every predetermined time, first page element does page element in the page content of second floor object show.
6. The method of claim 5, wherein the first and second light sources are selected from the group consisting of a red light source, a green light source, and a blue light source,
performing lateral position shifting every predetermined time, including:
and executing the transverse position change according to the slow movement speed from fast to slow obtained by calculating the secondary Bezier curve at intervals of the preset time.
7. The method of claim 5 or 6, wherein the first page element is a picture, the first page element further comprising a corresponding header, the method further comprising:
and switching the title corresponding to the first page element when the transverse position change is executed.
8. The method of claim 1,
the first layer container is a TableView component, and the second layer container and the third layer container are ScrollView components.
9. The method of claim 1,
the page of the client is an H5 page, and the displaying of the second floor object in the current page of the client application includes:
acquiring the latest version configuration information of the data resource of the second floor object;
if the version of the current cache data resource of the second floor object in the client is the latest version, generating a page corresponding to the second floor object according to the current cache data resource and displaying the page;
and if the version of the current cache data resource of the second floor object in the client is not the latest version, downloading the latest data resource of the second floor object in the client, and generating and displaying a page corresponding to the second floor object according to the latest data resource.
10. The method of claim 1, wherein prior to obtaining a drop-down distance of a current page of the client application when the drop-down gesture is released, the method further comprises:
adjusting an alhpa parameter value of a navigation bar according to a proportional value of a pull-down distance of a current page of the client application and a height of the navigation bar of the current page of the client application;
and when the alhpa parameter value is changed to 0, triggering an event for changing the theme color of the status bar in the current page of the client application.
11. The method of claim 10, wherein after presenting the floor two object in a current page of the client application, the method further comprises:
after the second floor object is switched from non-display to expansion, hiding the navigation bar and/or setting the color of the status bar to be black; or
And after the second floor object is switched from expansion to contraction, displaying the navigation bar and/or setting the color of the status bar to be white.
12. The method of claim 1, wherein after presenting the floor two object in a current page of the client application, the method further comprises:
and sliding the content of the second floor object downwards to the bottom of the current page of the client application through gesture sliding, and then sliding upwards to exceed a preset second floor contraction threshold value, and then retracting the second floor object.
13. An application page presentation apparatus, comprising:
the acquisition unit is used for acquiring a pull-down distance of the current page of the client application when the pull-down gesture is released;
a display unit, configured to display the second floor object in the current page of the client application if the pull-down distance is greater than a predetermined second floor expansion threshold, where the second floor object refers to an object that is hierarchically below a current page display object of the client application, and the second floor object is a view container and implements a service independent from currently displayed content;
wherein the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second level container comprising a middle level container for embedding one or more first level containers, and a second level container for embedding a second level object, wherein the second level container has a display hierarchy below the middle level container;
and the third layer container is used for bearing the third layer container of the second layer container.
14. An electronic device, comprising:
a processor; and
a memory arranged to store computer executable instructions that, when executed, cause the processor to:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is larger than a preset second floor expansion threshold value, displaying the second floor object in the current page of the client application, wherein the second floor object refers to an object which is lower than the level of the current page display object of the client application, and is a view container which realizes a service independent from the currently displayed content;
wherein the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second level container comprising a middle level container for embedding one or more first level containers, and a second level container for embedding a second level object, wherein the second level container has a display hierarchy below the middle level container;
and the third layer container is used for bearing the third layer container of the second layer container.
15. A computer-readable storage medium storing one or more programs that, when executed by an electronic device including a plurality of application programs, cause the electronic device to:
acquiring a pull-down distance of a current page of the client application when a pull-down gesture is released;
if the drop-down distance is larger than a preset second floor expansion threshold value, displaying the second floor object in the current page of the client application, wherein the second floor object refers to an object which is lower than the level of the current page display object of the client application, and is a view container which realizes a service independent from the currently displayed content;
wherein the current page of the client application comprises a three-tier container, wherein,
the first-layer container is used for displaying the list content of the current page;
a second level container comprising a middle level container for embedding one or more first level containers, and a second level container for embedding a second level object, wherein the second level container has a display hierarchy below the middle level container;
and the third layer container is used for bearing the third layer container of the second layer container.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711010157.2A CN107977137B (en) | 2017-10-25 | 2017-10-25 | Object display method, device and equipment of application page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711010157.2A CN107977137B (en) | 2017-10-25 | 2017-10-25 | Object display method, device and equipment of application page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107977137A CN107977137A (en) | 2018-05-01 |
| CN107977137B true CN107977137B (en) | 2020-12-25 |
Family
ID=62012761
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711010157.2A Active CN107977137B (en) | 2017-10-25 | 2017-10-25 | Object display method, device and equipment of application page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107977137B (en) |
Families Citing this family (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111104177B (en) * | 2018-10-25 | 2024-04-26 | 阿里巴巴集团控股有限公司 | View assembly switching method and device and terminal equipment |
| CN109491739B (en) * | 2018-10-30 | 2023-04-07 | 北京字节跳动网络技术有限公司 | Theme color dynamic determination method and device, electronic equipment and storage medium |
| CN110851064B (en) * | 2019-10-20 | 2024-05-28 | 阿里巴巴集团控股有限公司 | Information display method, device, equipment and storage medium |
| CN110781425B (en) * | 2019-10-25 | 2022-09-20 | 北京创鑫旅程网络技术有限公司 | Display method, device and equipment of mobile terminal H5 page and storage medium |
| CN111523068A (en) * | 2020-03-30 | 2020-08-11 | 五八有限公司 | Page configuration method, device, server and storage medium |
| CN113867591A (en) * | 2021-10-09 | 2021-12-31 | 拉扎斯网络科技（上海）有限公司 | Control method and device for displaying second floor page, storage medium and electronic equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2012079302A (en) * | 2010-10-01 | 2012-04-19 | Samsung Electronics Co Ltd | Device and method for turning page on electronic book on portable terminal |
| CN105354022A (en) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | Generation method and device of page layout file |
| CN105511732A (en) * | 2015-12-25 | 2016-04-20 | 北京奇虎科技有限公司 | Method for displaying page entry icons and device |
| CN107015726A (en) * | 2017-02-07 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of multidate information methods of exhibiting and device |
| CN107665076A (en) * | 2017-09-14 | 2018-02-06 | 广州神马移动信息科技有限公司 | Show method, equipment, browser and the electronic equipment of web page contents |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| TWI566166B (en) * | 2013-11-13 | 2017-01-11 | 宏碁股份有限公司 | Method for image controlling and portable electronic apparatus using the same |
-
2017
- 2017-10-25 CN CN201711010157.2A patent/CN107977137B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2012079302A (en) * | 2010-10-01 | 2012-04-19 | Samsung Electronics Co Ltd | Device and method for turning page on electronic book on portable terminal |
| CN105354022A (en) * | 2015-10-16 | 2016-02-24 | 华为技术有限公司 | Generation method and device of page layout file |
| CN105511732A (en) * | 2015-12-25 | 2016-04-20 | 北京奇虎科技有限公司 | Method for displaying page entry icons and device |
| CN107015726A (en) * | 2017-02-07 | 2017-08-04 | 阿里巴巴集团控股有限公司 | A kind of multidate information methods of exhibiting and device |
| CN107665076A (en) * | 2017-09-14 | 2018-02-06 | 广州神马移动信息科技有限公司 | Show method, equipment, browser and the electronic equipment of web page contents |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107977137A (en) | 2018-05-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107977137B (en) | Object display method, device and equipment of application page | |
| CN107239287B (en) | Webpage display method and device, electronic equipment and storage medium | |
| CN110297996B (en) | Animation display method, device, equipment and storage medium based on H5 page | |
| CN107885645B (en) | Method and device for calculating rendering duration of first screen of page and electronic equipment | |
| CN106484080B (en) | Display interface display method, device and equipment | |
| US20150248722A1 (en) | Web based interactive multimedia system | |
| JP7104242B2 (en) | Methods for sharing personal information, devices, terminal equipment and storage media | |
| CN108255546B (en) | Method and device for realizing data loading animation | |
| CN106874023B (en) | Dynamic page loading method and device | |
| JP6975339B2 (en) | Backdrop rendering of digital components | |
| CN112364277A (en) | Webpage loading method and device | |
| US20170169599A1 (en) | Methods and electronic devices for displaying picture | |
| CN110069734B (en) | Page component display method and device | |
| CN105988793A (en) | Image display method and apparatus used for screen display device | |
| CN107707965B (en) | Bullet screen generation method and device | |
| CN107766703B (en) | Watermark adding processing method and device and client | |
| CN108062336B (en) | Media information processing method and device | |
| CN113672323A (en) | Page display method and device | |
| CN107391534B (en) | Page display method, page file return method, page display device, page file return device and computer storage medium | |
| US20150187098A1 (en) | Method and apparatus for unobtrusively changing imagery supplementing a map display | |
| CN110909274B (en) | Page browsing method and device and electronic equipment | |
| CN107562324B (en) | Data display control method and terminal | |
| CN107391163B (en) | Page data loading method and device in mobile terminal and application | |
| CN105630893A (en) | Display method and device of photo title | |
| WO2013056562A1 (en) | Wap page display method and device based on webkit browser |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20210514 Address after: 100080 7th floor, Sina headquarters scientific research building, plot n-1 and n-2, Zhongguancun Software Park Phase II (West Expansion), Dongbeiwang West Road, Haidian District, Beijing Patentee after: SINA.COM TECHNOLOGY (CHINA) Co.,Ltd. Address before: Room 517, 5 / F, scientific research building, Sina headquarters, plot n-1 and n-2, Zhongguancun Software Park, Dongbei Wangxi Road, Haidian District, Beijing 100193 Patentee before: XINGCHAO SHANYAO MOBILE NETWORK TECHNOLOGY (CHINA) Co.,Ltd. |
|
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20230307 Address after: Room 501-502, 5/F, Sina Headquarters Scientific Research Building, Block N-1 and N-2, Zhongguancun Software Park, Dongbei Wangxi Road, Haidian District, Beijing, 100193 Patentee after: Sina Technology (China) Co.,Ltd. Address before: 100080 7th floor, Sina headquarters scientific research building, plot n-1 and n-2, Zhongguancun Software Park Phase II (West Expansion), Dongbeiwang West Road, Haidian District, Beijing Patentee before: Sina.com Technology (China) Co.,Ltd. |
|
| TR01 | Transfer of patent right |