CN113867877A - Page display method and device - Google Patents

Page display method and device Download PDF

Info

Publication number
CN113867877A
CN113867877A CN202111182113.4A CN202111182113A CN113867877A CN 113867877 A CN113867877 A CN 113867877A CN 202111182113 A CN202111182113 A CN 202111182113A CN 113867877 A CN113867877 A CN 113867877A
Authority
CN
China
Prior art keywords
area
page
component
display
current page
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.)
Pending
Application number
CN202111182113.4A
Other languages
Chinese (zh)
Inventor
周敏杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202111182113.4A priority Critical patent/CN113867877A/en
Publication of CN113867877A publication Critical patent/CN113867877A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44568Immediately runnable code

Abstract

The application provides a page display method and a page display device, wherein the page display method comprises the following steps: displaying a current page, wherein the current page comprises a first area and a second area, the first area corresponds to a first component, the second area corresponds to a second component, the first component is used for controlling the display of the first area, and the second component is used for controlling the display of the second area; receiving a page sliding instruction aiming at a current page, controlling a first area to be separated from the current page by using a first component and adjusting the size of a second area by using a second component under the condition that the sliding distance is detected to be larger than a distance threshold; and re-rendering the content in the moved first area and the content in the second area after the size adjustment to obtain the updated current page. The updating display efficiency of the page can be improved through the scheme.

Description

Page display method and device
Technical Field
The present application relates to the field of page display technologies, and in particular, to a page display method. The application also relates to a page display device, a computing device and a computer readable storage medium.
Background
When displaying a Hypertext Markup Language (HTML) page, an application program usually performs fixed display on the content of the page including a specific menu item for the convenience of viewing by a user. Illustratively, as shown in the exemplary diagram of the page before the top-suction display in the top-suction display scene of the page in fig. 1a and the exemplary diagram of the page before the top-suction display in the top-suction display scene of the page in fig. 1 b: the page P1 shown in fig. 1a displays a first page content, a second page content including menu items M1 through M3, and a page content subordinate to the menu item M1. The user can scroll the mouse to slide up the second page content in the page P1 and the page content under the menu item M1, and when the second page content and the page content under the menu item M1 slide up to a certain position, the second page content will be fixed by being sucked up and will not slide up any more, as shown in the page P1 after being displayed by being sucked up in fig. 1 b. In this way, it is possible to ensure that the second page content is normally displayed while more page contents subordinate to the menu item M1 are displayed, facilitating the user to switch menu items.
In the related art, an application program performs rendering display of a page according to page layout information and element data of the page. In the process of sliding upwards, the positions of the elements in the page are changed continuously, and after each sliding, the whole page needs to be rendered and displayed again according to the change of the positions of the elements. This may cause that the page is easy to be jammed when being updated and displayed, and the update display efficiency of the page is reduced.
Disclosure of Invention
In view of this, the present application provides a page display method. The application also relates to a page display device, a computing device and a computer readable storage medium, which are used for solving the problem of low efficiency of updating and displaying the page in the prior art.
According to a first aspect of an embodiment of the present application, there is provided a page display method, including:
displaying a current page, wherein the current page comprises a first area and a second area, the first area corresponds to a first component, the second area corresponds to a second component, the first component is used for controlling the display of the first area, and the second component is used for controlling the display of the second area;
receiving a page sliding instruction aiming at the current page, controlling the first area to be separated from the current page by using the first component and adjusting the size of the second area by using the second component under the condition that the sliding distance is detected to be larger than a distance threshold;
and re-rendering the content in the first area after the movement and the service content in the second area after the size adjustment to obtain the updated current page.
According to a second aspect of embodiments of the present application, there is provided a page display apparatus including:
a display module configured to display a current page, the current page including a first area and a second area, the first area corresponding to a first component, the second area corresponding to a second component, the first component for controlling display of the first area, the second component for controlling display of the second area;
an adjusting module configured to receive a page sliding instruction for the current page, control the first area to be detached from the current page by using the first component and adjust the size of the second area by using the second component if a sliding distance is detected to be greater than a distance threshold;
and the rendering module is configured to render the content in the first area after the moving and the content in the second area after the size adjustment again to obtain the updated current page.
According to a third aspect of embodiments herein, there is provided a computing device comprising a memory, a processor and computer instructions stored on the memory and executable on the processor, the processor implementing the steps of the page display method when executing the instructions.
According to a fourth aspect of embodiments of the present application, there is provided a computer-readable storage medium storing computer instructions which, when executed by a processor, implement the steps of the page display method.
In the scheme provided by the embodiment of the application, a current page is displayed, and the current page comprises a first area and a second area; the first region is a region displayed based on the first component, and the second region is a region displayed based on the second component. Therefore, a page sliding instruction for the current page is received, and when the sliding distance included in the page sliding instruction is greater than the distance threshold, the first component can be used for controlling the first area to be separated from the current page, and the second component is used for adjusting the size of the second area; and re-rendering the content in the moved first area and the service content in the resized second area to obtain an updated current page. The areas are displayed based on the components respectively corresponding to different areas in the current page, the first area needing to be moved can be separated, moved and re-rendered after the first area is moved in the page sliding process, the size of the second area needing not to be moved is adjusted, then re-rendering is carried out, and the current page updated according to the sliding instruction can be obtained. In this way, no processing is required for areas of the current page that do not need to be moved and resized. Therefore, the whole current page does not need to be redrawn, data needing to be rendered during page updating display can be reduced, and page blockage during page updating display is reduced.
Drawings
FIG. 1a is an exemplary diagram of a page before a top-up display in a top-up display scenario of the page;
FIG. 1b is an exemplary diagram of a page after top-up display in a top-up display scenario;
fig. 2 is a flowchart of a page display method according to an embodiment of the present application;
FIG. 3 is a diagram illustrating an example of a real-time distance in a page display method according to another embodiment of the present application;
FIG. 4 is a flowchart of a page display method according to another embodiment of the present application;
fig. 5a is an exemplary diagram of a current page in a page display method according to another embodiment of the present application;
fig. 5b is an exemplary diagram of a first updated current page in a page display method according to another embodiment of the present application;
fig. 5c is an exemplary diagram of a second updated current page in a page display method according to another embodiment of the present application;
fig. 5d is an exemplary diagram of a third updated current page in a page display method according to another embodiment of the present application;
fig. 6 is a schematic structural diagram of a page display device according to an embodiment of the present application;
fig. 7 is a block diagram of a computing device according to an embodiment of the present application.
Detailed Description
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. This application is capable of implementation in many different ways than those herein set forth and of similar import by those skilled in the art without departing from the spirit of this application and is therefore not limited to the specific implementations disclosed below.
The terminology used in the one or more embodiments of the present application is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of the present application. As used in one or more embodiments of the present application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used in one or more embodiments of the present application refers to and encompasses any and all possible combinations of one or more of the associated listed items.
It will be understood that, although the terms first, second, etc. may be used herein in one or more embodiments of the present application to describe various information, these information should not be limited by these terms. These terms are only used to distinguish one type of information from another. For example, a first aspect may be termed a second aspect, and, similarly, a second aspect may be termed a first aspect, without departing from the scope of one or more embodiments of the present application. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
First, the noun terms to which one or more embodiments of the present application relate are explained.
Hypertext Markup Language (HTML) page: a page is easy to manufacture, supports the embedding of elements of different data formats, and is not limited by an operating system. For example, pages such as a search results page of a browser, a goods list page of a shopping application, and a user information page of a video application may all be HTML pages.
Assembly of: the components are program modules that encapsulate data and methods, resulting in the implementation of specified functions. Wherein the method may comprise functions for implementing the specified functions.
A flag container: the container is originally rolled along with the rolling part in the page, and when the container is rolled to a certain position, the container at the position is fixed. Wherein containers are obtained by partitioning resources managed by a single operating system into isolated groups, conflicting resource usage requirements can be better balanced among the isolated groups.
In the present application, a page display method is provided, and the present application relates to a page display apparatus, a computing device, and a computer-readable storage medium, which are described in detail in the following embodiments one by one.
Fig. 2 is a flowchart illustrating a page display method according to an embodiment of the present application, which specifically includes the following steps S202 to S208:
s202, displaying the current page, wherein the current page comprises a first area and a second area, the first area corresponds to a first component, the second area corresponds to a second component, the first component is used for controlling the display of the first area, and the second component is used for controlling the display of the second area.
In a specific application, the current page is a page which is not slid at the moment when the page data corresponding to the page rendering display instruction is displayed under the condition that the page display instruction is received. The first region is a region whose position can be changed; the second area is an area whose position and content can be changed. For example, referring to fig. 1b, as for the page P1, the second page content including the menu items M1 through M3 may be displayed through the first area, and the page content subordinate to the menu item M1 may be displayed through the second area. In addition, in order to improve the update display efficiency of the page during the sliding, the current page may be divided into different areas corresponding to different components, which is specifically described in the form of an optional embodiment below.
In an optional implementation manner, before the receiving the page sliding instruction for the current page, the page display method provided in the embodiment of the present application may further include the following steps:
acquiring a configuration file aiming at a current page, wherein the configuration file comprises configuration information of components corresponding to each area;
and dividing a first area corresponding to the first component and a second area corresponding to the second component from the current page according to the configuration information of the components corresponding to the areas.
This embodiment is equivalent to initializing the current page. The configuration information of each component may include an identifier of each component, position information of a region corresponding to each component in the page, preset parameters used for adjusting the region corresponding to each component by using each component, content data of each component, and the like. In addition, according to the configuration information of each component, a first area corresponding to the first component and a second area corresponding to the second component are divided from the current page, which may be various. For example, the configuration information of each component may be output, a result of area division performed on the current page by the user according to the configuration information of each component may be received, and the first area and the second area may be divided from the current page according to the result of area division. Or, the positions and contents of the page areas corresponding to the first component and the second component in the current page can be automatically and respectively determined according to the configuration information of the components.
In this embodiment, different areas and components adapted to the business logic and the form of the page itself may be set for different pages through configuration files including configuration information of each component, so as to implement personalized setting of page display, thereby ensuring that the page display method provided in the embodiment of the present application can be applied to different pages.
S204, receiving a page sliding instruction aiming at the current page, controlling the first area to be separated from the current page by using the first component and adjusting the size of the second area by using the second component under the condition that the sliding distance is detected to be larger than the distance threshold.
In a particular application, and the page sliding instruction for the current page may be various. Illustratively, the page sliding instruction may include: a sliding instruction generated by a user sliding a mouse, a sliding instruction generated by a user dragging a page, an automatic page scrolling instruction, and the like.
And, detecting that the sliding distance is greater than the distance threshold indicates that the first area has slid to a location where movement is desired. Also, the content of the first area may be a specific content such as a menu item or an operation guide, which is used for a user to operate and view. Therefore, for the convenience of user operation and viewing, the content of the first area may not be changed during the moving process, and the current page is rendered, and accordingly, the rendering of the first area is completed. Therefore, the first component can be used for separating out the complete object of the first area, and the complete object of the first area can be moved. The controlling, by the first component, the first area to be detached from the current page may specifically include: and dragging the first component out of the document flow of the current page to realize the separation of the first component from the document flow of the page. In this way, the first section for display control by the first component can be independently controlled to display, for example, moved, and the first area can be separated from the current page. Also, further movement may be made, illustratively, by absolute positioning (absolute) of the first assembly for the detached first area. For example, according to the specified reference position, the position parameter in the first component, i.e. the first area, is adjusted by using a specified function, e.g. left, right, top, bottom, etc., so as to realize the further movement of the first area.
The further movement of the first area may specifically be to move the first area by using the first component according to the page sliding instruction. For example, if the current page further includes a third area, where the third area corresponds to a third component, where the third component is used to control display of the third area, and the position of the third area is fixed, the position of the third area may be used as a specified reference position, the moving position of the first area is determined according to the sliding direction carried by the page sliding instruction, and then the position parameter in the first component is adjusted by using a specified function corresponding to the moving position, so as to implement movement of the first area. Or, for example, the sliding direction in the page sliding instruction may be extracted, and the position parameter in the first component is adjusted according to the sliding direction, so as to implement the movement of the first area. For ease of understanding and reasonable layout, the second example is described in detail below in the form of an alternative embodiment.
And, the adjusting the size of the second area using the second component may specifically include: and extracting the sliding direction in the page sliding instruction, searching a target size adjusting mode corresponding to the extracted sliding direction according to the pre-established corresponding relation between the sliding direction and the size adjusting mode, and adjusting the size parameter in the second assembly by using the target size adjusting mode. For example, the pre-established correspondence between the sliding direction and the size adjustment manner may include at least one of the following correspondences: sliding up correspondingly increases the height in the second assembly to a first target height carried by the slide command, sliding down correspondingly decreases the height in the second assembly to a second target height carried by the slide command, sliding left correspondingly increases the height in the second assembly to a third target height carried by the slide command, and sliding right correspondingly decreases the height in the second assembly to a fourth target height carried by the slide command, and so on. The specific setting of the corresponding relationship between the sliding direction and the size adjustment mode may be performed according to the display requirement of the page, which is not limited in this embodiment.
In addition, as the size of the second area is adjusted, the content in the second area is moved accordingly and changed in an increasing or decreasing manner. For ease of understanding and reasonable layout, the following detailed description is presented in the context of an integrated embodiment of an exemplary form of the present application.
S206, re-rendering the content in the moved first area and the content in the resized second area to obtain an updated current page.
The moved first area changes its position, so that the content of the area is displayed again at the moved position, and the content in the moved first area needs to be re-rendered. Moreover, the content in the resized second area is usually updated, and therefore, the content in the resized second area needs to be rendered again. For example, as shown in fig. 1a and 1b, the page content subordinate to the menu item M1 displayed in the pre-resized second region may include information of three kinds of commodities, and the page content subordinate to the menu item M1 displayed in the resized second component may include information of five kinds of commodities. Therefore, by re-rendering in step S208, the moved first area and the resized second area with updated page content can be displayed, so as to obtain the updated current page.
In addition, at least one of the processes of fixed display, overlay display, display effect adjustment, and the like may be performed on the first region, and a detailed description will be given later in the form of an alternative embodiment.
In the scheme provided by the embodiment of the application, the display of the areas is carried out based on the components respectively corresponding to different areas in the current page, the first area needing to be moved can be separated, moved and re-rendered after the movement in the page sliding process, the size of the second area needing not to be moved is adjusted, and then the second area is rendered again, and the current page updated according to the sliding instruction can be obtained. In this way, no processing is required for areas of the current page that do not need to be moved and resized. Therefore, the whole current page does not need to be redrawn, data needing to be rendered during page updating display can be reduced, and page blockage during page updating display is reduced.
In an optional implementation manner, after the first component is used to control the first area to be detached from the current page, the page display method provided in the embodiment of the present application may further include the following steps:
monitoring the first area in the moving process of the first area to obtain real-time position information of the first area;
and if the first area is determined to move to the target position according to the real-time position information, fixing the first area at the target position, and re-rendering the content in the fixed first area and the current second component to obtain an updated current page.
In a specific application, the first region may be listened to by a function window. And, it has been determined that the first area moves to the target position, and thus, fixing the first area at the target position may specifically include: and modifying the state information of the first area in the first assembly into a fixed state. For example, the parameter ticky in the state information position is modified to be the parameter fixed. Also, this manner of modifying state information may be applicable to a variety of computing devices. According to the embodiment, the first area is determined to move to the target position according to the real-time position information, and the first area is fixed at the target position, so that the first component can be fixedly displayed, the normal display of the first area is ensured while more page contents in the second area are displayed, and the user can conveniently operate aiming at the page contents in the first area.
In addition, the monitoring of the first area to obtain the real-time location information of the first area may be various, and is specifically described in the form of an optional embodiment below.
In an optional implementation manner, the monitoring the first area to obtain the real-time location information of the first area may include the following steps:
and monitoring the first area to obtain the position coordinate of the first area in the current page.
In another optional implementation, the monitoring the first area to obtain the real-time location information of the first area specifically includes the following steps:
and monitoring the first area to obtain the real-time distance between the specified part of the first area and the specified part of the current page.
For example, the real-time distance may be obtained by inputting the window, addeventlistener ('scroll', 'this, handlescrirl') into the current location information 'scroll' of the designated portion of the first area and the location information 'this, handlescrirl' of the designated portion of the current page. For example, fig. 3 shows an exemplary graph of a real-time distance in a page display method according to another embodiment of the present application: the real-time distance is the real-time distance between the designated part of the first area and the designated part of the current page. Wherein, the current position information of the designated part can be extracted from the sliding instruction. In a specific application, the designated portion of the first area and the designated portion of the current page may be set according to the sliding direction, which is not limited in this embodiment.
For example, if the sliding direction is a vertical direction, the designated portion of the first area may be one of the top and the bottom of the first area, and the designated portion of the current page may be one of the top and the bottom of the current page or the third area. If the sliding direction is a horizontal direction, the designated portion of the first area may be one of a left edge and a right edge of the first area, and the designated portion of the current page may be one of the left edge and the right edge of the current page or the third area.
The real-time distance between the designated part of the first region and the designated part of the current page obtained in this embodiment may reflect the relative position between the first region and the designated part of the current page. Therefore, the position where the first region moves is determined by using the designated portion as a reference, and the accuracy of the movement can be improved.
In an optional implementation manner, if it is determined that the first area moves to the target position according to the real-time position information, the fixing the first area at the target position may specifically include the following steps:
and under the condition that the real-time distance reaches a preset distance threshold, fixing the first area at a target position corresponding to the preset distance threshold.
And when the real-time distance reaches the preset distance threshold, the first area moves to a target position corresponding to the preset distance threshold. Therefore, when the real-time distance reaches the preset distance threshold, the state information of the first area is modified into a fixed state, and the effect of fixing the first area at the target position corresponding to the preset distance threshold can be achieved. And, the real-time distance reaching the preset distance threshold may include: the real-time distance is equal to the preset distance threshold, or the difference between the real-time distance and the preset distance threshold is smaller than the difference threshold.
According to the method and the device, the first area is determined to move to the target position through the real-time distance reaching the preset distance threshold, complex coordinate comparison can be omitted, and therefore page display efficiency is improved.
In an optional implementation manner, after obtaining the real-time distance between the designated location of the first area and the designated location of the current page, the page display method provided in the embodiment of the present application may further include the following steps:
calculating the ratio of the real-time distance to a preset distance threshold;
determining target display parameters of the first area according to a target ratio threshold value reached by the ratio;
and according to the target display parameter, the first component is utilized to perform display adjustment on the first area.
In a specific application, a plurality of ratio thresholds may be preset, and the ratio between the real-time distance and the preset distance threshold among the plurality of ratio thresholds is determined as the target ratio threshold when the ratio reaches the ratio threshold. Like this, the first region moves different distances and can carry out the display adjustment that corresponds with the distance that moves to guarantee that the display effect in first region changes along with removing, play the effect that the suggestion user experienced this sliding function.
Furthermore, the specific manner of determining the target display parameter of the first region according to the target ratio threshold reached by the ratio may be various, and the following description is provided in the form of an alternative embodiment.
In an alternative embodiment, the determining the target display parameter of the first area according to the target ratio threshold reached by the ratio may include the following steps:
and determining a reference display parameter according to the target ratio threshold value reached by the ratio, and adjusting the reference display parameter by using a preset offset to obtain the target display parameter of the first area.
The reference display parameter is a target display parameter determined last time, and under the condition that the target display parameter is determined for the first time, the reference display parameter is a preset display parameter.
In an optional implementation manner, the determining the target display parameter of the first area according to the target ratio threshold reached by the ratio may specifically include the following steps:
searching a corresponding relation between the pre-established transparency and each preset ratio threshold according to the target ratio threshold reached by the ratio to obtain the target transparency corresponding to the target ratio threshold;
correspondingly, the above display adjustment of the first area by using the first component according to the target display parameter may specifically include the following steps:
and inputting the target transparency into the first component, wherein the target transparency is used for the first component to adjust the transparency of the first area into the target transparency.
Illustratively, if the target ratio threshold is 0.1, the target transparency is a transparency of 0.1; and if the target ratio threshold is 0.2, the target transparency is 0.2, and so on, if the target ratio threshold is 1, the target transparency is opaque. In addition, the target transparency may also be replaced by a target color, a target resolution, and the like, that is, different display parameters may be set, and the setting may be specifically performed according to display requirements.
For the convenience of understanding, the following description integrates the above embodiments in an exemplary manner. Exemplarily, fig. 4 shows a flowchart of a page display method according to another embodiment of the present application, which specifically includes the following steps:
initializing a page; the first area is separated from the current page; monitoring whether the first area moves to a target position; if so, distributing a fixed event, wherein the first area is fixed at the target position; if not, returning to the step of monitoring whether the first area moves to the target position.
This embodiment is similar to the steps described in the embodiment of fig. 2 and the alternative embodiment of fig. 2 of the present application, except that the description manner is different: initializing a page, namely initializing the current page; the first area is separated from the current page, namely the first area is controlled to be separated from the current page by using the first component under the condition that the sliding distance is detected to be greater than the distance threshold; monitoring whether the first area moves to a target position, namely monitoring the first area in the moving process of the first area to obtain real-time position information of the first area; determining whether the first area moves to a target position according to the real-time position information; and distributing a fixed event, wherein the first area is fixed at the target position, namely if the first area is determined to move to the target position according to the real-time position information, the first area is fixed at the target position. In addition, the steps of resizing the second region and rendering the resized content are not shown in fig. 4. For the same parts, detailed descriptions are omitted here, and refer to the description of the embodiment of fig. 2 and the alternative embodiment of fig. 2.
In an optional implementation manner, after the first component is used to control the first area to be detached from the current page, the page display method provided by the embodiment of the present application may further include the following steps:
acquiring a current display level of a first area;
the display hierarchy of the first region is set to be highest.
The display level of the first area is set to be highest, so that the first area can be displayed in the area except the first area in a covering mode under the condition that the first area is overlapped with the area except the first area in the current page, normal display of the first area is further guaranteed, and convenience of a user is improved. The setting of the display hierarchy of the first region to be highest may specifically include: and modifying the z-index data of the first area in the first component to be the highest in the current page.
In an optional implementation manner, the current page further includes a third area, where the third area corresponds to a third component, and the third component is used to control display of the third area;
correspondingly, after the first component is utilized to control the first area to be separated from the current page, the page display method provided by the embodiment of the application may further include the following steps:
extracting a sliding direction in the page sliding instruction, and moving the first area according to the sliding direction;
and if the first area is determined to be overlapped with the third area according to the sliding direction and the sliding distance, setting a first area to cover the overlapped part.
In a particular application, the sliding direction may include: vertically downward, vertically upward, horizontally leftward and horizontally rightward. The third area is an area with a fixed position; wherein, the third area can be fixed at the top, the bottom, the left side or the right side of the page. In addition, the content in the third area may not be changed, or the specified content in the third area may be slided up in response to the slideup instruction. Illustratively, referring to FIG. 1b, for page P1, the first page content may be displayed via the third area.
Determining that the first region overlaps the third region according to the sliding direction and the sliding distance may include: and calculating the sum of the current position of the first area and the sliding distance according to the sliding direction to obtain a target position, and if the target position is contained in the third area, determining that the first area is overlapped with the third area. Also, the display hierarchy of the first region has been set to be highest in the embodiment regarding the display hierarchy, and thus, setting the first region to cover the overlapping portion may include: the effect of covering the overlapping portion can be achieved by displaying the first region at the highest display level.
In the embodiment, the first area is used for covering the overlapping part of the third area, so that the normal display of the first area can be ensured, the convenience of a user is improved, and meanwhile, the first area is moved as much as possible in a mode of covering the third area, a space is reserved for the expansion of the size of the second area, and the utilization rate of the current page is improved.
For convenience of understanding, the following exemplary description illustrates a processing flow of a page display method provided in another embodiment of the present application. Illustratively, the page display method provided in another embodiment of the present application may include the following steps 1 to 4:
step 1: and the user enters the current page and initializes the current page.
The method comprises the steps that a user clicks a viewing button or a display button of a certain page to generate a page display instruction, page data corresponding to the page display instruction are rendered to obtain a rendered page, namely a current page, and the current page is output, so that the effect that the user enters the current page can be achieved. Moreover, the initialization of the current page is equivalent to the above-mentioned process of dividing the first area corresponding to the first component and the second area corresponding to the second component from the current page according to the component configuration information, which is described in detail in the above-mentioned corresponding optional embodiments.
Step 2: and (4) sliding the current page by the user, and determining the participation of the component.
The user can correspondingly generate a page sliding instruction when sliding the current page, the computing device displaying the current page can receive the page sliding instruction, and then the first component is separated from the current page by the aid of the first component when the sliding distance is detected to be larger than the distance threshold. And, the reference of the assembly may specifically include: a first parameter for adjusting display control of the first region by the first component, and a second parameter for adjusting display control of the second region by the second component. The first parameter may include flagTop, flagzip, and Fixed, where flagTop is real-time location information of the first area, for example, a distance between a specified location of the first area and a specified location in the current page. flagZIndex is the flag level height equivalent to the current display level of the first region. The second parameter may include a size adjustment manner of the second area, content data and display parameters of elements in the second area, and the like. In addition, in a scenario where a third area exists and a designated portion in the third area slides correspondingly with the page sliding instruction, the participating of the above components may further include: position information of the specified part in the third area, content data of the specified part, and the like.
And step 3: an exit argument for the component is determined based on the entry argument for the component.
Specifically, the out-argument of a component is the result of processing the in-argument of the component. For example, the exit argument determined based on the entry argument flagTop of the first component is fixed: flag is fixed, that is, the position information of the first area reaches the target position, and ratio. The flag is away from the top percentage, namely the ratio of the real-time distance of the first area to the preset distance threshold.
And 4, step 4: and determining the updated current page according to the parameters of the components.
For example, it may be determined whether to fix the flag, that is, the first region corresponding to the first component, at the target position according to the fixed parameter. The display effect of the first area may be adjusted according to the ratio.sync, for example, when ratio.sync is 80%, a special effect may be loaded for the current page, or the transparency of the first area may be set to a transparency corresponding to 80%, for example, 0.8, and so on.
The above steps are further explained in specific application scenarios. Exemplarily, as shown in fig. 5a, in a page display method provided by another embodiment of the present application, an exemplary diagram of a current page is shown: in the current page shown in fig. 5a, the third area may be divided into a first sub-area whose position and content are fixed, and a second sub-area whose position is fixed and content can be scrolled. The first area is located between the current page and the second area, and includes a menu item M1, a menu item M2, and a menu item M3. The second area includes service contents 1 through 5.
As shown in fig. 5b, in a page display method provided by another embodiment of the present application, an exemplary diagram of a first updated current page is shown: in the process of sliding the current page upwards by the user, the method provided by the embodiment of the present application may move the first area to the position shown in fig. 5b, and adjust the size of the second area to the size shown in fig. 5 b. Moreover, the page content in the second sub-area may be slid up or fixed according to the movement, and for convenience of description, the second sub-area in fig. 5b includes the page content in the second sub-area and the display result in the case of being fixed. Specifically, the sliding up of the page content in the second sub-area corresponding to the movement is equivalent to the upward scrolling of the page content in the second sub-area.
As shown in fig. 5 b: if the page content character image of the second sub-area is scrolled upwards to be overlapped with the first sub-area, the display level of the second sub-area can be set to be smaller than that of the first sub-area, so that the effect that the head and the hand of the character image scroll out of the second sub-area and are not displayed any more is achieved; or, under the condition that the character image is overlapped with the first sub-area, the character image is re-rendered, and the effect that the head and the hand of the character image roll out of the second sub-area and are not displayed any more is obtained. For the case that the page content in the second sub-area is fixed and unchanged, the display level of the first area can be adjusted to be highest under the condition that the first area and the third area are overlapped, so that the first area can be displayed on the third area in an overlaying mode, and the display effect that the leg of the character image is overlaid by the first area is achieved.
And, the content in the second area moves along with the movement of the first area, and each content is respectively taken as an element, then the movement may include: determining the target display positions of the elements corresponding to the size of the second area after the size adjustment, and if the number N of the target display positions is larger than the number M of the elements in the second area before the size adjustment, acquiring N-M element data from a server or a cache; and re-rendering the second area according to the target display position and the size of each element, each element in the second area before the adjustment, and the acquired N-M element data to obtain the first updated current page. For example, after the service content 1 is slipped to the service content 5, and N-M is 6-5 is 1, the service content 6 may be newly added to the resized second area.
And continuing to slide upwards by analogy until the first area moves to the target position, and fixing the first area at the target position. For example, as shown in fig. 5c, in a page display method provided by another embodiment of the present application, an exemplary diagram of a second updated current page is: the first region is fixed at the target position, covering the second sub-region of the third region. And the target position is higher than the position of the first area in the first updated current page, so that the size of the second area is adjusted to be larger than that of the second area in the first updated current page. Accordingly, more service contents can be displayed in the second area, and therefore, the service contents 7 and the service contents 8 can be newly added to obtain a second updated current page. Further, as shown in fig. 5d, in a page display method provided by another embodiment of the present application, an exemplary diagram of a current page after a third update is shown: after the first region is fixedly displayed, the user may continue to slide the current page. At this time, both the first area and the third area are not changed, and the second area performs only content update: with the upward sliding, the service content 1 moves out of the second area, the service content 2 correspondingly moves up to a target position from the service content 8 in sequence, and the service content 9 is newly added, so that a third updated current page is obtained. The size and content adjustment manner of the second area are the same as those in fig. 5b, and reference may be specifically made to the description in fig. 5b, which is not repeated herein.
Corresponding to the above method embodiment, the present application further provides an embodiment of a page display apparatus, and fig. 6 shows a schematic structural diagram of a page display apparatus provided in an embodiment of the present application. As shown in fig. 6, the apparatus includes:
a display module 602 configured to display a current page, the current page including a first area and a second area, the first area corresponding to a first component, the second area corresponding to a second component, the first component being used to control display of the first area, the second component being used to control display of the second area;
an adjusting module 604 configured to receive a page sliding instruction for the current page, control the first component to detach from the current page if the sliding distance is detected to be greater than the distance threshold, and adjust the size of the second area by using the second component;
the rendering module 606 is configured to render the content in the first area after the moving and the content in the second area after the resizing again, so as to obtain an updated current page.
In the scheme provided by the embodiment of the application, the display of the areas is carried out based on the components respectively corresponding to different areas in the current page, the first area needing to be moved can be separated, moved and re-rendered after the movement in the page sliding process, the size of the second area needing not to be moved is adjusted, and then the second area is rendered again, and the current page updated according to the sliding instruction can be obtained. In this way, no processing is required for areas of the current page that do not need to be moved and resized. Therefore, the whole current page does not need to be redrawn, data needing to be rendered during page updating display can be reduced, and page blockage during page updating display is reduced.
In an alternative embodiment, the apparatus further comprises: a fixation module configured to:
monitoring the first area in the moving process of the first area to obtain real-time position information of the first area;
if the first area is determined to move to the target position according to the real-time position information, fixing the first area at the target position, and re-rendering the content in the fixed first area and the current second area to obtain the updated current page.
In an alternative embodiment, the apparatus further comprises: an overlay module configured to:
acquiring the current display level of the first area;
setting a display hierarchy of the first region to be highest.
In an optional embodiment, the current page further includes a third area, the third area corresponds to a third component, and the third component is used for controlling the display of the third area;
the overlay module further configured to:
extracting a sliding direction in the page sliding instruction, and moving the first area according to the sliding direction;
and if the first area is determined to be overlapped with the third area according to the sliding direction and the sliding distance, setting the overlapping part covered by the first area.
In an alternative embodiment, the fixing module is further configured to:
and monitoring the first area to obtain the real-time distance between the specified part of the first area and the specified part of the current page.
In an alternative embodiment, the fixing module is further configured to:
and under the condition that the real-time distance reaches a preset distance threshold, fixing the first area at a target position corresponding to the preset distance threshold.
In an alternative embodiment, the fixing module is further configured to:
calculating the ratio of the real-time distance to a preset distance threshold;
determining target display parameters of the first area according to a target ratio threshold value reached by the ratio;
and according to the target display parameter, utilizing the first component to perform display adjustment on the first area.
In an alternative embodiment, the fixing module is further configured to:
searching a corresponding relation between pre-established transparency and each preset ratio threshold according to the target ratio threshold reached by the ratio to obtain the target transparency corresponding to the target ratio threshold;
inputting the target transparency into the first component, wherein the target transparency is used for the first component to adjust the transparency of the first area to the target transparency.
In an optional embodiment, the apparatus further comprises an initialization module configured to:
acquiring a configuration file aiming at a current page, wherein the configuration file comprises configuration information of components corresponding to each area;
and dividing a first area corresponding to the first component and a second area corresponding to the second component from the current page according to the configuration information of each component.
The above is a schematic scheme of a page display device of the present embodiment. It should be noted that the technical solution of the page display apparatus and the technical solution of the page display method belong to the same concept, and details that are not described in detail in the technical solution of the page display apparatus can be referred to the description of the technical solution of the page display method.
Fig. 7 illustrates a block diagram of a computing device 700 provided according to an embodiment of the present application. The components of the computing device 700 include, but are not limited to, memory 710 and a processor 720. Processor 720 is coupled to memory 710 via bus 730, and database 750 is used to store data.
Computing device 700 also includes access device 740, access device 740 enabling computing device 700 to communicate via one or more networks 760. Examples of such networks include a Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a Personal Area Network (PAN), or a combination of communication networks such as the internet. The Access device 740 may include one or more of any type of Network Interface (e.g., a Network Interface Controller (NIC)) whether wired or Wireless, such as an IEEE802.11 Wireless Local Area Network (WLAN) Wireless Interface, a Worldwide Interoperability for Microwave Access (Wi-MAX) Interface, an ethernet Interface, a Universal Serial Bus (USB) Interface, a cellular Network Interface, a bluetooth Interface, a Near Field Communication (NFC) Interface, and so forth.
In one embodiment of the application, the above-described components of the computing device 700 and other components not shown in fig. 7 may also be connected to each other, for example, by a bus. It should be understood that the block diagram of the computing device architecture shown in FIG. 7 is for purposes of example only and is not limiting as to the scope of the present application. Those skilled in the art may add or replace other components as desired.
Computing device 700 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., tablet, personal digital assistant, laptop, notebook, netbook, etc.), mobile phone (e.g., smartphone), wearable computing device (e.g., smartwatch, smartglasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. Computing device 700 may also be a mobile or stationary server.
Wherein, the processor 720 implements the steps of the page display method when executing the instructions.
The above is an illustrative scheme of a computing device of the present embodiment. It should be noted that the technical solution of the computing device and the technical solution of the above-mentioned page display method belong to the same concept, and details that are not described in detail in the technical solution of the computing device can be referred to the description of the technical solution of the above-mentioned page display method.
An embodiment of the present application further provides a computer readable storage medium, which stores computer instructions, and the instructions, when executed by a processor, implement the steps of the page display method as described above.
The above is an illustrative scheme of a computer-readable storage medium of the present embodiment. It should be noted that the technical solution of the storage medium belongs to the same concept as the technical solution of the above-mentioned page display method, and details that are not described in detail in the technical solution of the storage medium can be referred to the description of the technical solution of the above-mentioned page display method.
The foregoing description of specific embodiments of the present application has been presented. 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.
The computer instructions comprise computer program code which may be in the form of source code, object code, an executable file or some intermediate form, or the like. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, usb disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), Random Access Memory (RAM), electrical carrier wave signals, telecommunications signals, software distribution medium, and the like. It should be noted that the computer readable medium may contain content that is subject to appropriate increase or decrease as required by legislation and patent practice in jurisdictions, for example, in some jurisdictions, computer readable media does not include electrical carrier signals and telecommunications signals as is required by legislation and patent practice.
It should be noted that, for the sake of simplicity, the above-mentioned method embodiments are described as a series of acts or combinations, but those skilled in the art should understand that the present application is not limited by the described order of acts, as some steps may be performed in other orders or simultaneously according to the present application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
The preferred embodiments of the present application disclosed above are intended only to aid in the explanation of the application. Alternative embodiments are not exhaustive and do not limit the invention to the precise embodiments described. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the application and its practical applications, to thereby enable others skilled in the art to best understand and utilize the application. The application is limited only by the claims and their full scope and equivalents.

Claims (12)

1. A page display method, comprising:
displaying a current page, wherein the current page comprises a first area and a second area, the first area corresponds to a first component, the second area corresponds to a second component, the first component is used for controlling the display of the first area, and the second component is used for controlling the display of the second area;
receiving a page sliding instruction aiming at the current page, controlling the first area to be separated from the current page by using the first component and adjusting the size of the second area by using the second component under the condition that the sliding distance is detected to be larger than a distance threshold;
and re-rendering the content in the first area after the movement and the content in the second area after the size adjustment to obtain the updated current page.
2. The method of claim 1, wherein after the controlling the first region to detach from the current page with the first component, the method further comprises:
monitoring the first area in the moving process of the first area to obtain real-time position information of the first area;
if the first area is determined to move to the target position according to the real-time position information, fixing the first area at the target position, and re-rendering the content in the fixed first area and the current second area to obtain the updated current page.
3. The method of claim 1 or 2, wherein after said controlling the first region to detach from the current page with the first component, the method further comprises:
acquiring the current display level of the first area;
setting a display hierarchy of the first region to be highest.
4. The method of claim 3, wherein the current page further comprises a third region, wherein the third region corresponds to a third component for controlling the display of the third region;
after the controlling, with the first component, the detachment of the first region from the current page, the method further includes:
extracting a sliding direction in the page sliding instruction, and moving the first area according to the sliding direction;
and if the first area is determined to be overlapped with the third area according to the sliding direction and the sliding distance, setting the overlapping part covered by the first area.
5. The method of claim 2, wherein the monitoring the first area to obtain the real-time location information of the first area comprises:
and monitoring the first area to obtain the real-time distance between the specified part of the first area and the specified part of the current page.
6. The method of claim 5, wherein fixing the first area at the target location if it is determined that the first area moves to the target location according to the real-time location information comprises:
and under the condition that the real-time distance reaches a preset distance threshold, fixing the first area at a target position corresponding to the preset distance threshold.
7. The method of claim 5, wherein after the obtaining the real-time distance between the designated location of the first region and the designated location of the current page, the method further comprises:
calculating the ratio of the real-time distance to a preset distance threshold;
determining target display parameters of the first area according to a target ratio threshold value reached by the ratio;
and according to the target display parameter, utilizing the first component to perform display adjustment on the first area.
8. The method of claim 7, wherein determining the target display parameter of the first region according to the target ratio threshold reached by the ratio comprises:
searching a corresponding relation between pre-established transparency and each preset ratio threshold according to the target ratio threshold reached by the ratio to obtain the target transparency corresponding to the target ratio threshold;
the utilizing the first component to perform display adjustment on the first area according to the target display parameter includes:
inputting the target transparency into the first component, wherein the target transparency is used for the first component to adjust the transparency of the first area to the target transparency.
9. The method of any of claims 1-2 and 4-8, wherein prior to said receiving a page sliding instruction for the current page, the method further comprises:
acquiring a configuration file aiming at the current page, wherein the configuration file comprises configuration information of components corresponding to each area;
and dividing a first area corresponding to the first component and a second area corresponding to the second component from the current page according to the configuration information of the components corresponding to the areas.
10. A page display apparatus, comprising:
a display module configured to display a current page, the current page including a first area and a second area, the first area corresponding to a first component, the second area corresponding to a second component, the first component for controlling display of the first area, the second component for controlling display of the second area;
an adjusting module configured to receive a page sliding instruction for the current page, control the first area to be detached from the current page by using the first component and adjust the size of the second area by using the second component if a sliding distance is detected to be greater than a distance threshold;
and the rendering module is configured to render the content in the first area after the moving and the content in the second area after the size adjustment again to obtain the updated current page.
11. A computing device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, wherein the processor implements the steps of the method of any one of claims 1-9 when executing the instructions.
12. A computer-readable storage medium storing computer instructions, which when executed by a processor, perform the steps of the method of any one of claims 1 to 9.
CN202111182113.4A 2021-10-11 2021-10-11 Page display method and device Pending CN113867877A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111182113.4A CN113867877A (en) 2021-10-11 2021-10-11 Page display method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111182113.4A CN113867877A (en) 2021-10-11 2021-10-11 Page display method and device

Publications (1)

Publication Number Publication Date
CN113867877A true CN113867877A (en) 2021-12-31

Family

ID=78998883

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111182113.4A Pending CN113867877A (en) 2021-10-11 2021-10-11 Page display method and device

Country Status (1)

Country Link
CN (1) CN113867877A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114564166A (en) * 2022-02-28 2022-05-31 北京达佳互联信息技术有限公司 Layout method and device of small program page, electronic equipment and storage medium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170205990A1 (en) * 2016-01-14 2017-07-20 Lenovo (Beijing) Limited Method, system, and apparatus for controlling display regions for an electronic device
CN110221748A (en) * 2019-05-23 2019-09-10 厦门美柚信息科技有限公司 Show the method, device and mobile terminal of page parallax
CN110489187A (en) * 2018-05-15 2019-11-22 腾讯科技(深圳)有限公司 Page furbishing method, device, storage medium and computer equipment
CN112925453A (en) * 2019-12-05 2021-06-08 阿里巴巴集团控股有限公司 Component display method, device, electronic equipment and computer readable storage medium

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170205990A1 (en) * 2016-01-14 2017-07-20 Lenovo (Beijing) Limited Method, system, and apparatus for controlling display regions for an electronic device
CN110489187A (en) * 2018-05-15 2019-11-22 腾讯科技(深圳)有限公司 Page furbishing method, device, storage medium and computer equipment
CN110221748A (en) * 2019-05-23 2019-09-10 厦门美柚信息科技有限公司 Show the method, device and mobile terminal of page parallax
CN112925453A (en) * 2019-12-05 2021-06-08 阿里巴巴集团控股有限公司 Component display method, device, electronic equipment and computer readable storage medium

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
CRYSTAL茜: "滚动页面,实现导航栏固定在顶部(吸顶效果)", Retrieved from the Internet <URL:《https://blog.csdn.net/webKris/article/details/85631098》> *
GRAND: "CSS吸顶效果", pages 1 - 2, Retrieved from the Internet <URL:《https://juejin.cn/post/6975758852868292639》> *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114564166A (en) * 2022-02-28 2022-05-31 北京达佳互联信息技术有限公司 Layout method and device of small program page, electronic equipment and storage medium

Similar Documents

Publication Publication Date Title
US20230419576A1 (en) Modifying a graphic design to match the style of an input design
US10867117B2 (en) Optimized document views for mobile device interfaces
RU2613038C2 (en) Method for controlling terminal device with use of gesture, and device
EP2386941B1 (en) Information processing apparatus and method, and program
CN107391117B (en) Split screen processing method and device for light application and electronic device
JP4776995B2 (en) Computer apparatus and control method and program thereof
US20170031574A1 (en) Supporting webpage design and revision irrespective of webpage framework
US9792268B2 (en) Zoomable web-based wall with natural user interface
US20160203628A1 (en) Information processing device editing map acquired from server
EP2839393A2 (en) Camera guided web browsing
KR20170026272A (en) Apparatus and method for editing contents
US20130263047A1 (en) Methods and apparatus for providing graphical view of digital content
CN113099287A (en) Video production method and device
JP2023551670A (en) Page switching display method, device, storage medium and electronic equipment
CN107179920B (en) Network engine starting method and device
CN113867877A (en) Page display method and device
US20150095755A1 (en) System and Method for Comparing Objects in Document Revisions and Displaying Comparison Objects
CN110443772B (en) Picture processing method and device, computer equipment and storage medium
CN111553172A (en) Translation document display method, device, system and storage medium
CN111897607A (en) Application interface loading and interaction method, device and storage medium
JP6448500B2 (en) Image processing apparatus and image processing method
KR20190141122A (en) How to Navigate a Panel of Displayed Content
CN114327208B (en) Legend display method and device, storage medium and terminal
US10109091B2 (en) Image display apparatus, image display method, and storage medium
JP5756558B2 (en) Movie output device, movie output method, and program

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