CN111506243A

CN111506243A - Page information processing method and device and electronic equipment

Info

Publication number: CN111506243A
Application number: CN201910095979.8A
Authority: CN
Inventors: 杨进鹏; 陆东鑫
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Jiangxi Co ltd
Priority date: 2019-01-31
Filing date: 2019-01-31
Publication date: 2020-08-07
Anticipated expiration: 2039-01-31
Also published as: CN111506243B

Abstract

The embodiment of the application discloses a page information processing method, a page information processing device and electronic equipment, wherein the method comprises the following steps: a client displays a target page, wherein the target page comprises a header area and a main content area; in response to a slide operation performed on the main content area, performing: in a telescopic range corresponding to the header area, carrying out telescopic adjustment on the height of the header area, and carrying out translation processing on the main content area in the height direction so as to follow the height change of the header area; after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction. Through this application embodiment, can make page head region can make full use of it should have the effect simultaneously, avoid making the show of main part content receive the influence because the page version that occupies is too big.

Description

Page information processing method and device and electronic equipment

Technical Field

The present application relates to the field of page information processing technologies, and in particular, to a page information processing method and apparatus, and an electronic device.

Background

For some applications or developers of a specific function module within a program, besides the implementation of specific business logic, the specific front-end page design is an important ring, because the front-end page is a "door" of the whole application or function, and may give a first impression to the user, and the first impression may affect the staying time of the user in the page, or may be interested in some content to form traffic conversion by performing a click or the like, and so on. In a specific page, the head of the page (called "header") at the top of the page is the visual sense of the user at the first time. Therefore, "finishing" or the like of the page header has been a major area of interest to developers or designers.

Generally, two main aspects are considered for the decoration of the page header, namely, specifically-delivered contents, for example, contents which can play a marketing or atmosphere can be specifically shown in the page header area; on the other hand, the size of the specific header area is adopted, and if the header area is set to be too small, the content of specific marketing or atmosphere baking cannot be fully displayed, and the specific effect is influenced; if the size of the display screen is too large, the display of the actual content of the page can be influenced because the occupied proportion of the page is too large, and particularly in a mobile terminal scene, the area of the display screen is limited, so that the influence can be more prominent.

Therefore, how to design the page header of the page more effectively becomes a technical problem to be solved by those skilled in the art.

Disclosure of Invention

The application provides a page information processing method, a page information processing device and electronic equipment, which can enable a page header area to fully exert the corresponding function of the page header area and avoid influence on display of main content due to overlarge page layout.

The application provides the following scheme:

a page information processing method includes:

a client displays a target page, wherein the target page comprises a header area and a main content area;

in response to a slide operation performed on the main content area, performing:

in a telescopic range corresponding to the header area, carrying out telescopic adjustment on the height of the header area, and carrying out translation processing on the main content area in the height direction so as to follow the height change of the header area;

after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

A page information processing method includes:

a server receives an access request for a target page submitted by a client, wherein the target page comprises a header area and a main content area;

returning page data of the target page to the client, so that the client performs telescopic adjustment on the height of the header area in a telescopic range corresponding to the header area in the process of responding to the sliding operation performed on the main content area, and performs translation processing on the main content area in the height direction so as to follow the height change of the header area; after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

A page information processing apparatus comprising:

the page display unit is used for displaying a target page, wherein the target page comprises a header area and a main content area;

the first processing unit is used for performing telescopic adjustment on the height of the header area in a telescopic range corresponding to the header area in the process of responding to the sliding operation performed on the main content area, and performing translation processing on the main content area in the height direction so as to follow the height change of the header area;

and the second processing unit is used for displaying the main content in a rolling mode in the sliding operation direction by the main content area after the height of the header area stretches to the threshold value.

A page information processing apparatus comprising:

a request receiving unit, configured to receive an access request for a target page submitted by a client, where the target page includes a header area and a main content area;

a page data returning unit, configured to return page data of the target page to the client, so that the client performs telescopic adjustment on the height of the header area within a telescopic range corresponding to the header area in a process of responding to a sliding operation performed on the main content area, and performs translation processing on the main content area in a height direction to follow a height change of the header area; after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

An electronic device, comprising:

one or more processors; and

a memory associated with the one or more processors for storing program instructions that, when read and executed by the one or more processors, perform operations comprising:

displaying a target page, wherein the target page comprises a header area and a main content area;

An electronic device, comprising:

one or more processors; and

receiving an access request for a target page submitted by a client, wherein the target page comprises a header area and a main content area;

According to the specific embodiments provided herein, the present application discloses the following technical effects:

through this application embodiment, through setting up the header region of page as scalable, simultaneously, the main part content area of page can carry out translation motion in header region scalable within range to change the visual area of main part content area in the visual within range of window, after the header region stretches out and draws back to the threshold value, follow specific slip operation again and roll the show to specific main part content. Therefore, in the initial state of page rendering completion, the page width occupied by the page header area can be relatively large, so that the effects of atmosphere rendering and the like can be fully exerted; after the operation such as screen sliding is triggered, the height of the header area can be also contracted, and meanwhile, the area of the main content area in the visible range of the whole window is increased by moving the main content area upwards, so that the main content can be better displayed. Therefore, through the embodiment of the application, the display of the main content can be prevented from being influenced due to the overlarge page layout occupied by the page header area while the page header area can fully exert the corresponding function.

In specific implementation, rolling inertia transfer triggered by a user can be realized by creating a 'shadow' roller for an inner container object instance specifically used for displaying main content, so that a perception function triggered by the user by the inner container can be disabled, perception is performed only through the shadow roller, and then the perception function is transferred to the inner container, so that control and switching (from translation to content rolling and the like) of a specific main content area motion mode are realized, and situations such as control confusion and the like possibly occurring in a container nesting process are avoided.

In addition, in the case that a plurality of content tags exist in the same target page, different tag may be configured in different header area display modes, for example, only one level of tag page may be subjected to header area shrinking processing, and other tag pages may keep the height of the header area unchanged, and so on

Under the condition that a plurality of content tags exist in the same target page, the main content corresponding to different tags can be displayed through a plurality of inner-layer containers, so that the efficiency is improved, and the fluency in the tag switching process is also improved. In addition, multiplexing of different labels to the same inner-layer container can be achieved, and the occurrence probability of memory bursting is reduced. Under the condition of high memory, some idle containers which are not currently displayed can be recycled, so that the occupation of the memory is reduced.

Of course, it is not necessary for any product to achieve all of the above-described advantages at the same time for the practice of the present application.

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 embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.

FIG. 1 is a schematic diagram of a system architecture provided by an embodiment of the present application;

fig. 2 is a flowchart of a client method provided in an embodiment of the present application;

FIG. 3 is a schematic view of a header expansion provided in an embodiment of the present application;

FIG. 4 is a schematic view of another header extension provided in an embodiment of the present application;

FIG. 5 is a flow chart of container reuse provided by an embodiment of the present application;

fig. 6 is a flowchart of a server method provided in an embodiment of the present application;

fig. 7 is a schematic diagram of a client device provided by an embodiment of the present application;

fig. 8 is a schematic diagram of a server device provided in an embodiment of the present application;

fig. 9 is a schematic diagram of an electronic device provided in an embodiment of the present application.

Detailed Description

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 that can be derived from the embodiments given herein by a person of ordinary skill in the art are intended to be within the scope of the present disclosure.

In the embodiment of the application, in order to design the page header of the page more effectively, the page header can achieve the purposes of marketing, atmosphere rendering and the like more fully, and meanwhile, the influence on the display of the main content in the page due to the fact that the occupied version is too large is avoided, and a corresponding solution is provided. In the scheme, the header area of the specific page can be designed to be in a telescopic state, and in an initial state, the area of the header area can be larger, so that marketing information display or atmosphere rendering can be performed more fully; after the user triggers operations such as sliding in the page, the user is proved to possibly have interest in the page and need to further view the main content, at the moment, the height of the page head area can be contracted along with the sliding operation of the user, and meanwhile, the main content area can be translated upwards, so that the main content of the page can be displayed more in the visual range of the screen; after the height of the header area shrinks to a certain extent, a fixed presentation can be made at that height, and then, if the user continues to slide upward, the content in the main content area can be controlled to scroll upward along with it, so that more page content enters the visible range of the window for presentation.

Therefore, when a specific page header is designed, the problem of occupation of the page layout does not need to be considered too much, but the marketing information display or atmosphere rendering in the area is considered as a primary factor, so that a user can firstly be subjected to visual impact of the content displayed in the header area when entering the initial state of the page, and then the interest of continuing browsing the page is generated. When a specific user starts to slide the page upwards, the 'mission' of the header area in terms of marketing information display or atmosphere rendering is basically completed, so that the window visible range can be left to the main content of the page to a greater extent along with the gradual contraction of the sliding operation of the user. Therefore, the page header area can fully play the role of the page header area, and the excessive influence on the display of the page main body content can be avoided.

In specific implementation, referring to fig. 1, specific implementation in the embodiment of the present application may be implemented by a client of an application program, or a specific function module within the application program, and so on. For example, if a page is the first page of an application and the main thread of the application is responsible for the presentation of the page, the related processing logic of header expansion and contraction described in the embodiment of the present application may be implemented in the application. If the page provided by a specific independent function module in an application program when a page is provided, only the function module needs to implement the expansion function of the header, the processing logic specifically related to the header expansion processing can also be implemented in the related code of the function module, and other function modules in the application program are not affected by the business logic. In addition, if the page is presented based on a browser, the related processing logic of specific header area expansion and contraction can be realized in the page code, and the like. In short, the relevant processing logic related in the embodiment of the present application can be implemented on the client side, and the server side only needs to provide corresponding support for specific page data or content.

The following describes in detail specific implementations provided in embodiments of the present application.

Example one

First, an embodiment of the present application provides a page information processing method, and referring to fig. 2, the method may specifically include:

s201: a client displays a target page, wherein the target page comprises a header area and a main content area;

during specific implementation, the content, data and the like to be displayed in the target page can be obtained from the server, including the content or data to be displayed in the header area of the page, the content or data to be displayed in the main content area of the page, and the like.

s202: in a telescopic range corresponding to the header area, carrying out telescopic adjustment on the height of the header area, and carrying out translation processing on the main content area in the height direction so as to follow the height change of the header area;

s203: after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

The specific telescopic range information of the header area may be preset, for example, the maximum height, the minimum height, and the like of the header area may be specifically set, so that the header area can be stretched between the maximum height and the minimum height. After collapsing to a minimum height, it will remain unchanged. In order to enlarge the main content area within the visible range of the window during the process of height reduction of the header area, the main content area can be displaced upward as a whole, that is, during the process, the main content area is not operated to be rolled, and when the header area is reduced to the minimum height, the main content area is rolled in a specific sliding operation direction.

In particular implementation, in order to achieve the above purpose, the implementation can be achieved in various ways, for example, in one way, the implementation can be achieved through a page container technology. The page container is a container object capable of adding page contents, and can achieve various different effects such as page turning and slides of small areas in a page. In general, a container object may have at least the following main properties:

ID: the ID is a unique identification of the attributes, variables, and functions of the call container object.

X: the X-coordinate of the container object, which is determined from the origin of coordinates of the parent object and the origin of coordinates of the object. The default is the X coordinate position of the upper left corner of the container object relative to the parent object, and if the origin of coordinates is changed, the X coordinate is the X coordinate of the origin of coordinates of the object relative to the parent object.

Y: a Y-coordinate of the container object, the container object Y-coordinate being dependent on the origin of coordinates of the parent object and the origin of coordinates of the object. The default is the Y coordinate position of the upper left corner of the container object relative to the parent object, and if the origin of coordinates is changed, the Y coordinate is the Y coordinate of the origin of coordinates of the object relative to the parent object.

W: the width of the container object, in pixels. When the correlation ratio is changed to be wide and high, the width and the height are changed proportionally.

H: the height of the container object is in pixels. When the correlation ratio is changed to be wide and high, the width and the height are changed proportionally.

In particular implementation, multiple container objects can be created in the same page, and different contents can be subjected to presentation control in different container objects. Therefore, in the embodiment of the present application, firstly, the above characteristics are utilized to implement specific expansion and contraction of the header region, and perform related processing such as translation and scrolling on the page body content region.

Specifically, first, when a target page is displayed, a first container object instance is created for the header area, so as to display the content of the header area; in this way, the header area height is telescopically adjusted by adjusting the change in height of the first container object instance during the response to the sliding operation performed on the body content area.

For the page body content area, the specific implementation manner is relatively complex, because the same container object instance is involved to perform different processing in different states, some states need to be translated, and some states need to be scrolled. For the same container object instance, it is often difficult to set two attributes simultaneously, so a feasible solution is to implement container nesting. That is, the above object is achieved by creating two different container object instances in the same body content area, and then controlling the relative movement manner of the two container object instances. In the specific implementation, if the two container object instances are simply nested and both of the two container object instances roll under the sliding operation of the user, a chaotic condition may occur or the phenomena of blocking and the like occur, so that the display process of the whole page is not smooth enough.

For this reason, in the embodiment of the present application, a second container object instance and a third container object instance having a binding relationship may be created for the main content area, where a specific second container object may also be a child object of the third container object, and so on. Wherein the second container object instance is used for showing the main content and is in a state of forbidding the scrolling triggered by the user sliding operation, and the third container object instance is used for providing a scroll device to respond to the user sliding operation. That is, the second container object instance is mainly used for showing specific page body content and also has a scrolling function by itself, but the second container object instance cannot be directly scrolled by a sliding operation of the user. In other words, the function of the specific second container object instance responding to the user sliding operation may be set to the disabled state, so that when the user performs the specific sliding operation such as up and down in the page, the user only directly triggers the scrolling of the third container object instance, and the second container object instance needs to determine the stretching state of the first container object according to the scrolling distance of the third container object instance, and then determines the specific movement mode.

Specifically, the third container object instance roller may respond to the sliding operation, and when a rolling distance of the roller is within the scalable area, adjust a height synchronization change of the first container object instance, and displace a vertex of the second container object instance in a height direction by a distance equal to the rolling distance of the roller; and when the rolling distance of the roller exceeds the telescopic area, controlling the second container object instance to synchronously roll along with the roller of the third container object instance.

That is to say, in the above solution provided in the embodiment of the present application, the third container object instance may be regarded as a "shadow" of the second container object instance, the "back" of the second container object instance is scrolled according to the sliding operation performed by the user, and information such as a scrolling distance may be calculated, and accordingly, the motion state of the second container object instance may be controlled according to information such as a scrolling distance of the third container object instance. As shown in fig. 3, since the lowest layer of the entire page usually further includes an outer container for performing operations such as initializing each inner container, the second container object instance in this embodiment may be referred to as an inner container, and the third container object instance may be referred to as a shadow scroller. In the embodiment of the application, the binding of the inner container and the shadow scroll realizes the inertial transmission of composite scrolling and multi-scrolling of a user (the inertial transmission refers to the process of transmitting the scrolling inertia triggered by the user to the inner container from the shadow scroll).

Specifically, assuming that the initial state of the page is as shown on the left side in fig. 3, the following operation such as page sliding is performed, and the specific control process may be divided into two stages: stage 1 and stage 2, stage 1 refers to the process of scrolling from point B to point a, and stage 2 refers to the process of scrolling from point C to point B. In the stage 1, the page head is synchronously reduced along with the rolling distance of the shadow roller, and the Y-axis vertex of the inner container is displaced by the same rolling distance as the shadow roller. And (2) stage: the inner container will scroll synchronously with the scrolling of the shadow scroller.

In order to better understand the above solution provided by the embodiments of the present application, the following is described by way of an example in a specific implementation:

first, a caller (which is a specific service caller and is mainly responsible for calling service logic provided in the embodiment of the present application, and providing specific service content to be presented and configuration required in the embodiment of the present application, including position, height, width, and scalable range of each container, etc.) completes initialization by creating an outer container of a target page, and transmitting specific service data and configuration content.

Then, when the outer container is initialized, a shadow scroller (namely the third container object instance) is created, and the shadow scroller is used for providing the transmission of scrolling capability and scrolling inertia; a header container (first container object instance) is also created, which has attribute information such as height value, width value, and scalable range, and can obtain the service content exposed by the header container by calling the service caller in the reverse direction. Still further, an inner container (second container object instance) may be created and bound by associating the inner container with the shadow scroller.

In this way, particularly during the process of displaying the page, the expansion and contraction of the head container and the control of the translation or rolling of the inner container can be realized through the manner provided by the previous description.

In specific implementation, the specific scheme provided by the embodiment of the application can be applied to various specific scenes, and the scheme can be used for controlling the corresponding header and main content areas as long as the relatively rich content needs to be disclosed in the header area or the scene with a relatively high requirement on the version width of the header area. In addition, in some of the scenarios, the target page may further include a tab toolbar configured to display a plurality of switchable content tabs, so that the content displayed in the main content area is switched by switching the content tabs. For example, in a page of a certain functional module provided by the network sales service system, the page is mainly used for performing aggregate display on information of certain business circles or shopping malls by taking a city where a user is located or selected as a unit. At this time, a home page label (specifically, referred to as a primary label) and a plurality of labels (secondary labels) corresponding to specific business circles or shopping malls may be provided in the page, and in a default state, the main content corresponding to the home page label may be displayed, and when a certain shopping mall or a secondary label corresponding to a business circle is switched, the information of the business mall or the business circle may be mainly displayed, and so on. In such a scenario, some content rendering specific atmosphere may be required to be presented in a header area of the page, and especially in a state corresponding to the home page tag, in order to attract the user to continue browsing in the tab page, or to enter a specific mall or go around a business district to browse the tab page, many content related to the specific atmosphere may be required to be rendered in the header area corresponding to the home page tag. For example, picture information of a landmark business circle related to a specific city, or a picture or even motion picture information related to a feature building or the like related to a city, and the like. Of course, since the specific main content area also includes more specific content, the user is guided to click or browse, the rendering function of only the header area cannot be focused, and the influence on the main content area is ignored. Therefore, in this case, the scheme provided in the embodiment of the present application can be used to realize control of the header area and the body content display area.

For example, as shown in FIG. 4, based on the example shown in FIG. 3, the outer container may create a label toolbar in which to expose various labels used to perform a switching operation in addition to the shadow scroller, the header container and the inner container. As shown in fig. 4, where a is the height of the inner container, B is the height of the head container, C is the height of the shadow roller, D is the height of the content of the inner container, E is the height of the content of the shadow roller, J is the rolling position of the inner container, and K is the rolling position of the shadow roller. Wherein, A ═ C, D ═ E, and J ═ K. In the case where the state 1 corresponds, the height B of the head container may be a maximum value, and as the operation of sliding the page upward is performed, the height of the head container is shortened to a minimum value when the state 2 is reached. At the same time, the label bar is also displaced upwards, and when state 2 is reached, the height of the head container will not change any more, and the position of the label bar will also not change any more. The inner container is then shifted up first and then starts to scroll with the shadow scroller during the transition of the head container from state 1 to state 2. It should be noted that, in the process that the inner-layer container is scrolled along with the shadow scroll, the specific main content will scroll upward, and during this period, the content will be scrolled out of the window visual range continuously, and also the content will enter the window visual range continuously, but the head container will always exist in the state of minimum height, and the tab toolbar will still be in order to switch to other tab pages at any time for browsing. The above description is given by taking the upward sliding process as an example, and in the case of the downward sliding, the process is just opposite to the upward sliding process, and the detailed description is omitted here.

It should be noted that, in the case that the same page includes one primary label and multiple secondary labels, each secondary label may be generally the same as or similar to an atmosphere specifically required to be backed up under the primary label, so that, in order to avoid resource waste caused by repeated operations of scaling the page header in multiple label pages and to avoid aesthetic fatigue to the user, the height of the page header area may be scalable only when the primary label obtains a display focus, and when the secondary label obtains a focus, the height of the page header area is fixed and does not need to be scaled.

In the sub-page display state corresponding to each secondary label, the height of the specific header area may be customized, for example, the header area may be configured in the configuration information, and the like. Of course, in practical application, if it is necessary to perform processing such as header expansion and contraction on the sub-page corresponding to the secondary tag, it may also be implemented as long as corresponding configuration is performed in advance.

In addition, in the multi-tag scenario, if the page header is expanded or contracted through the page container technology, in order to obtain a smoother effect in the tag switching process, a plurality of second container object instances may be created for the plurality of content tags, so as to be used for displaying the content corresponding to each content tag through different second container object instances. That is to say, the main content corresponding to each different tag can be displayed in different second container object instances, and compared with a method of switching content in the same container, the efficiency is higher, and the fluency of the switching process is improved.

Certainly, in practical applications, if the number of created inner-layer containers is too large, a memory burst or the like may be caused, and therefore, in specific implementation, the threshold value of the number of second container object instances may also be determined; in this way, when a request for switching to a target content tag is received, it may be first determined whether a second container object instance corresponding to the target content tag exists, if so, the content corresponding to the target content tag is displayed through the second container object instance, otherwise, it is determined whether the total number of created second container object instances reaches the threshold, and if not, a second container object instance is created for the target content tag. And if the total number of the created second container object instances reaches the threshold value, selecting a second container object instance from the second container object instances in the idle state at present for displaying the content corresponding to the target content label.

That is, each tag page may be guaranteed to correspond to one second container object instance as far as possible under the condition that the memory allows, and if the memory has a sudden-rise condition, multiplexing of the second container object instances may also be implemented on part of the tag pages. In a specific implementation, a container multiplexing pool may be created for the execution of the tag switching operation, so that when a certain tag (tab) is specifically clicked, the following processing as shown in fig. 5 may be performed:

step 1: acquiring a new inner container, and entering the step 2;

step 2: judging whether an inner-layer container corresponding to the tab index exists in the container multiplexing pool, if so, entering the step 3, and otherwise, entering the step 4;

and step 3: directly using the hit inner container in the multiplexing pool for rendering, and entering the step 11;

and 4, step 4: acquiring the maximum number of inner-layer containers, and entering the step 5;

and 5: judging whether the number of the inner layer containers in the multiplexing pool is more than or equal to the maximum number of the inner layer containers, and entering the step 6;

step 6: randomly selecting an inner container which is not the first page in the multiplexing pool, and entering the step 7;

and 7: rendering the corresponding service content by using the randomly selected inner container, and executing the step 11;

and 8: creating a new inner container, and entering step 9;

and step 9: putting the new inner container into a multiplexing pool, and entering step 10;

step 10: rendering the corresponding business content by using the newly created inner container, and entering step 11;

step 11: and (6) ending.

In a specific implementation, the determination may be performed according to a preset value specifically when the threshold of the number of second container object instances is determined, or, in another manner, the threshold of the number of second container object instances may be determined according to the number of created second container object instances and a memory occupation condition of the terminal device where the second container object instances are currently located. That is to say, the specific number threshold may be determined according to the actual memory occupation condition, instead of using a preset fixed value, so as to better adapt to the actual operation condition in the actual terminal device, and to obtain better display effect and switching efficiency on the premise of avoiding the memory explosion.

In addition, during specific implementation, the memory can be monitored, a memory recovery mechanism is introduced, and after the memory high-level warning is received, the inner-layer container which is not currently displayed is recovered, so that the actual program running condition is prevented from being influenced. Specifically, the second container object instance currently in the idle state may be recycled under the condition that the memory amount of the terminal device where the second container object instance is currently located reaches the threshold. The memory recovery switch may be set in the program, and the determination and recovery processing may be performed in a state where the switch is turned on. Otherwise, if the switch is not turned on, the received memory high-order warning information can be uploaded to the server side, and the server side carries out subsequent processing.

In summary, according to the embodiment of the application, the header area of the page is set to be telescopic, meanwhile, the main content area of the page can perform translational motion within the telescopic range of the header area, so that the visible area of the main content area within the visible range of the window can be changed, and after the header area is telescopic to the threshold value, the specific main content can be displayed in a rolling manner along with the specific sliding operation. Therefore, in the initial state of page rendering completion, the page width occupied by the page header area can be relatively large, so that the effects of atmosphere rendering and the like can be fully exerted; after the operation such as screen sliding is triggered, the height of the header area can be also contracted, and meanwhile, the area of the main content area in the visible range of the whole window is increased by moving the main content area upwards, so that the main content can be better displayed. Therefore, through the embodiment of the application, the display of the main content can be prevented from being influenced due to the overlarge page layout occupied by the page header area while the page header area can fully exert the corresponding function.

Example two

The second embodiment corresponds to the first embodiment, and provides a page information processing method from the perspective of a server, with reference to fig. 6, where the apparatus may specifically include:

s601: a server receives an access request for a target page submitted by a client, wherein the target page comprises a header area and a main content area;

s602: returning page data of the target page to the client, so that the client performs telescopic adjustment on the height of the header area in a telescopic range corresponding to the header area in the process of responding to the sliding operation performed on the main content area, and performs translation processing on the main content area in the height direction so as to follow the height change of the header area; after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

For the parts of the second embodiment that are not described in detail, please refer to the description of the first embodiment, which is not described herein again.

Corresponding to the first embodiment, an embodiment of the present application further provides a page information processing apparatus, and referring to fig. 7, the apparatus may specifically include:

the page display unit 701 is configured to display a target page, where the target page includes a header area and a main content area;

a first processing unit 702, configured to, in a process of responding to a sliding operation performed on the main content area, perform telescopic adjustment on the height of the header area within a telescopic range corresponding to the header area, and perform translation processing on the main content area in a height direction so as to follow a height change of the header area;

the second processing unit 703 is configured to perform a rolling display on the main body content in the direction of the sliding operation in the main body content area after the height of the header area extends to or retracts from a threshold.

The target page comprises a label toolbar area, wherein a plurality of content labels used for switching the content displayed in the main content area are included;

the content tags comprise a primary tag and at least one secondary tag;

when the primary label obtains a display focus, the height of the header area is telescopic, and when the secondary label obtains a focus, the height of the header area is fixed.

Specifically, the page display unit may specifically include:

a first container creating unit, configured to create a first container object instance for the header area, so as to present the content of the header area;

the first processing unit may specifically be configured to:

and in the sliding operation process, the height of the header area is telescopically adjusted by adjusting the height change of the first container object instance.

In addition, the page display unit may further include:

a second container creating unit, configured to create, for the main content area, a second container object instance and a third container object instance that have a binding relationship, where the second container object instance is used to present the main content and is in a state where scrolling is prohibited from being triggered by a user sliding operation, and the third container object instance is used to provide a scroller in response to the user sliding operation;

the first processing unit may be specifically configured to, in response to the sliding operation through the third container object instance scroll, adjust the height synchronization change of the first container object instance when a scroll distance of the scroll is within the scalable range, and make a vertex of the second container object instance in a height direction perform a displacement that is the same as the scroll distance of the scroll;

the second processing unit may be specifically configured to, when the scroll distance of the scroll exceeds the scalable range, control the second container object instance to synchronously scroll with the scroll of the third container object instance.

In a specific implementation, the target page may further include a tag toolbar configured to display a plurality of switchable content tags, so that the content displayed in the main content area is switched by switching the content tags;

at this time, the page display unit may be further configured to:

and creating a plurality of second container object instances for the plurality of content labels, so as to display the content corresponding to each content label through different second container object instances.

Specifically, the page display unit may be configured to:

determining a number threshold for the second container object instance;

when a request for switching to a target content label is received, whether a second container object instance corresponding to the target content label exists is judged, if yes, the content corresponding to the target content label is displayed through the second container object instance, otherwise, whether the total number of the created second container object instances reaches the threshold value is judged, and if not, the second container object instance is created for the target content label.

And if the total number of the created second container object instances reaches the threshold value, selecting a second container object instance from the second container object instances in the idle state at present for displaying the content corresponding to the target content label.

The number threshold of the second container object instances may be determined according to the number of the created second container object instances and the memory occupation condition of the current terminal device.

In addition, the apparatus may further include:

and the memory recovery unit is used for recovering the second container object instance in the idle state when the memory amount of the current terminal equipment reaches the threshold value.

Compared with the embodiment, the embodiment of the present application further provides a page information processing apparatus, referring to fig. 8, the apparatus may include:

a request receiving unit 801, configured to receive an access request for a target page submitted by a client, where the target page includes a header area and a main content area;

a page data returning unit 802, configured to return page data of the target page to the client, so that the client performs telescopic adjustment on the height of the header area within a telescopic range corresponding to the header area in a process of responding to a sliding operation performed on the main content area, and performs translation processing on the main content area in a height direction to follow a height change of the header area; after the height of the header area stretches to a threshold value, the main content area displays the main content in a rolling mode in the sliding operation direction.

In addition, an embodiment of the present application further provides an electronic device, including:

one or more processors; and

and after the height of the header area is expanded to a preset threshold, the main content area displays the main content in a rolling mode in the sliding operation direction.

And an electronic device comprising:

one or more processors; and

returning page data of the target page to the client, so that the client performs telescopic adjustment on the height of the header area in a telescopic range corresponding to the header area in the process of responding to the sliding operation performed on the main content area, and performs translation processing on the main content area in the height direction so as to follow the height change of the header area; and after the height of the header area is expanded to a preset threshold, the main content area displays the main content in a rolling mode in the sliding operation direction.

Where fig. 9 exemplarily illustrates the architecture of an electronic device, for example, the device 900 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, an aircraft, etc.

Referring to fig. 9, device 900 may include one or more of the following components: processing component 902, memory 904, power component 906, multimedia component 908, audio component 910, input/output (I/O) interface 912, sensor component 914, and communication component 916.

The processing component 902 generally controls the overall operation of the device 900, such as operations associated with display, telephone calls, data communications, camera operations, and recording operations. Processing element 902 may include one or more processors 920 to execute instructions to perform all or a portion of the steps of the methods provided by the disclosed solution. Further, processing component 902 can include one or more modules that facilitate interaction between processing component 902 and other components. For example, the processing component 902 can include a multimedia module to facilitate interaction between the multimedia component 908 and the processing component 902.

The memory 904 is configured to store various types of data to support operation at the device 900. Examples of such data include instructions for any application or method operating on device 900, contact data, phonebook data, messages, pictures, videos, and so forth. The memory 904 may be implemented by any type or combination of volatile or non-volatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.

The power component 906 provides power to the various components of the device 900. The power components 906 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power for the device 900.

The multimedia component 908 includes a screen that provides an output interface between the device 900 and a user, hi some embodiments, the screen may include a liquid crystal display (L CD) and a Touch Panel (TP). if the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user.

The audio component 910 is configured to output and/or input audio signals. For example, audio component 910 includes a Microphone (MIC) configured to receive external audio signals when device 900 is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals may further be stored in the memory 904 or transmitted via the communication component 916. In some embodiments, audio component 910 also includes a speaker for outputting audio signals.

I/O interface 912 provides an interface between processing component 902 and peripheral interface modules, which may be keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to: a home button, a volume button, a start button, and a lock button.

The sensor component 914 includes one or more sensors for providing status assessment of various aspects of the device 900. For example, the sensor component 914 may detect an open/closed state of the device 900, the relative positioning of components, such as a display and keypad of the device 900, the sensor component 914 may also detect a change in the position of the device 900 or a component of the device 900, the presence or absence of user contact with the device 900, orientation or acceleration/deceleration of the device 900, and a change in the temperature of the device 900. The sensor assembly 914 may include a proximity sensor configured to detect the presence of a nearby object in the absence of any physical contact. The sensor assembly 914 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 914 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

The communication component 916 is configured to facilitate communications between the device 900 and other devices in a wired or wireless manner. The device 900 may access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 916 receives a broadcast signal or broadcast associated information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communications component 916 further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

In an exemplary embodiment, the device 900 may be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), programmable logic devices (P L D), Field Programmable Gate Arrays (FPGAs), controllers, micro-controllers, microprocessors or other electronic components for performing the above-described methods.

In an exemplary embodiment, a non-transitory computer-readable storage medium comprising instructions, such as the memory 904 comprising instructions, executable by the processor 920 of the device 900 to perform the methods provided by the present disclosure is also provided. For example, the non-transitory computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present application may be essentially or partially implemented in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments of the present application.

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, the system or system embodiments are substantially similar to the method embodiments and therefore are described in a relatively simple manner, and reference may be made to some of the descriptions of the method embodiments for related points. The above-described system and system embodiments are only illustrative, wherein the units described as separate parts may or may not be physically separate, and the parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.

The page information processing method, the page information processing device and the electronic device provided by the application are introduced in detail, a specific example is applied in the text to explain the principle and the implementation of the application, and the description of the embodiment is only used for helping to understand the method and the core idea of the application; meanwhile, for a person skilled in the art, according to the idea of the present application, the specific embodiments and the application range may be changed. In view of the above, the description should not be taken as limiting the application.

Claims

1. A page information processing method is characterized by comprising the following steps:

2. The method of claim 1,

the target page comprises a label toolbar area, wherein the label toolbar area comprises a plurality of content labels for switching the content displayed in the main content area;

the content tags comprise a primary tag and at least one secondary tag;

3. The method of claim 1,

the displaying the target page comprises the following steps:

creating a first container object instance for the header area for presenting the contents of the header area;

the process of responding to the sliding operation executed on the main content area comprises the following steps:

4. The method of claim 3,

the displaying the target page further comprises:

creating a second container object instance and a third container object instance which have a binding relation for the main content area, wherein the second container object instance is used for showing the main content and is in a state that the scrolling is forbidden to be triggered by the user sliding operation, and the third container object instance is used for providing a scroll device to respond to the user sliding operation;

responding to the sliding operation through the third container object instance rolling device, adjusting the height synchronous change of the first container object instance when the rolling distance of the rolling device is within the telescopic range, and making the vertex of the second container object instance in the height direction perform displacement which is the same as the rolling distance of the rolling device;

and when the rolling distance of the roller exceeds the telescopic range, controlling the second container object instance to synchronously roll along with the roller of the third container object instance.

5. The method of claim 4,

the target page comprises a label toolbar used for displaying a plurality of switchable content labels so as to switch the content displayed in the main content area by switching the content labels;

the method further comprises the following steps:

6. The method of claim 5,

said creating a plurality of second container object instances for said plurality of content tags comprises:

determining a number threshold for the second container object instance;

7. The method of claim 6, further comprising:

8. The method of claim 6,

the determining the threshold number of second container object instances comprises:

and determining the number threshold of the second container object instances according to the number of the created second container object instances and the memory occupation condition of the current terminal equipment.

9. The method of claim 5, further comprising:

and under the condition that the memory amount of the current terminal equipment reaches a threshold value, carrying out recovery processing on the second container object instance in the idle state.

10. A page information processing method is characterized by comprising the following steps:

11. A page information processing apparatus characterized by comprising:

12. A page information processing apparatus characterized by comprising:

13. An electronic device, comprising:

one or more processors; and

14. The electronic device of claim 13,

the program instructions are also for performing the method of any one of claims 2 to 9.

15. An electronic device, comprising:

one or more processors; and