WO2019134296A1

WO2019134296A1 - Page processing method and device, and readable storage medium

Info

Publication number: WO2019134296A1
Application number: PCT/CN2018/082704
Authority: WO
Inventors: 黄诚; 陈少杰; 张文明
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2018-01-02
Filing date: 2018-04-11
Publication date: 2019-07-11
Also published as: CN108052677A

Abstract

Embodiments of the present application provide a page processing method and device, and a readable storage medium. The method comprises: obtaining a scroll bar position of a page during scrolling; determining whether the scroll bar position meets a preset condition; if the preset condition is met, determining whether the dimensions of the page are not smaller than predetermined dimensions; and loading a first navigation component onto the page for display if the dimensions of the page are not smaller than the predetermined dimensions; or loading a second navigation component onto the page for display if the dimensions of the page are smaller than the predetermined dimensions. In the above method, different navigation components are displayed according to the dimensions of a current page, thereby ensuring a simpler layout of the entire page and providing a consistent reading experience for page viewers. In addition, users remain continuously engaged with content areas of the page, thereby effectively preventing an interruption to interaction between readers and the page.

Description

Page processing method, device and readable storage medium

The present application claims priority to Chinese Patent Application No. 201810001167.8, entitled "Page Processing Method, Apparatus, and Readable Storage Medium", filed on January 2, 2018, the entire contents of which are incorporated herein by reference. In the application.

Technical field

The present application relates to the field of computer technology, and in particular, to a page processing method, apparatus, and readable storage medium.

Background technique

At this stage, when the length of a web page is too long, in order to allow users to navigate and jump in paragraphs of different pages freely and conveniently, usually, the developer of the page provides a navigation bar fixed to the browser window on the page. However, when the user's browser or display window is too small, this type of navigation bar may be located in the content area of the page, thereby obscuring the content of the page, thus causing interference to the viewer's reading experience of the page. In addition, when the page has a certain degree of interaction, it also interrupts the reader's interaction with the page.

Summary of the invention

In order to overcome the above-mentioned deficiencies in the prior art, the purpose of the present application includes providing a page processing method, apparatus, and readable storage medium, which can display different navigation components according to the size of the current page, thereby making the layout of the entire page simpler. , to give the page viewer a consistent reading experience, while the user will always be attracted to the content area of the page, which can effectively avoid interrupting the reader's interaction with the page.

In order to achieve the above object, the technical solution adopted by the embodiment of the present application is as follows:

The embodiment of the present application provides a page processing method, which is applied to an electronic device, and the method includes:

Get the scrollbar position of the page during scrolling;

Determining whether the scroll bar position reaches a preset condition;

If the preset condition is reached, determining whether the size of the page is not less than a predetermined size;

If the size of the page is not less than a predetermined size, loading the first navigation component to the page for display;

If the size of the page is smaller than a predetermined size, the second navigation component is loaded onto the page for display.

In the embodiment of the present application, the scroll bar position of the above-mentioned acquisition page during the scrolling process includes:

Calling a mouse wheel event response function to detect whether there is a page scrolling event on the page;

When a page scrolling event is detected, the scroll event response function of the window object is called to obtain the scroll bar position.

In the embodiment of the present application, the determining whether the position of the scroll bar reaches a preset condition includes:

Calculating a distance between the scroll bar position and a start position of a scroll bar of the page;

Determining whether the distance reaches a preset distance;

When the determination result is yes, determining that the scroll bar position reaches a preset condition;

When the judgment result is no, it is determined that the scroll bar position does not reach the preset condition.

In the embodiment of the present application, the preset distance is a height of a view window.

In the embodiment of the present application, if the size of the page is not less than a predetermined size, and the first navigation component is loaded into the page for display, the method further includes:

Obtaining a size of the page during the zooming process when detecting that the page is zoomed;

Determining whether the size of the page during the zooming process is smaller than the predetermined size;

When the determination result is YES, the first navigation component being displayed is transitioned to the second navigation component based on a preset animation function.

In the embodiment of the present application, after the first navigation component that is being displayed is transitioned to the second navigation component based on the preset animation function, the method further includes:

When the size of the page in the zooming process is not less than the predetermined size, the second navigation component being displayed is transitioned to the first navigation component based on a preset animation function.

In the embodiment of the present application, the obtaining the size of the page in the zooming process includes:

Callback function of the resize event of the window object is called to get the size of the page during the zooming process.

In the embodiment of the present application, the foregoing method further includes:

Determining whether the page has a screen adaptation mode enabled;

If not turned on, the second navigation component is not displayed.

In the embodiment of the present application, after the determining whether the page is in the screen adaptation mode, the method further includes:

If enabled, the first navigation component and the second navigation component are respectively inserted into different locations of the page.

Configuring component information of the first navigation component and the second navigation component on the page in response to a request to configure the first navigation component and the second navigation component, wherein the component information includes a background At least one of font, color, and color.

The embodiment of the present application further provides a page processing apparatus, which is applied to an electronic device, and the device includes:

The get module is used to get the position of the scroll bar of the page during scrolling.

The first determining module is configured to determine whether the scroll bar position reaches a preset condition.

The second determining module is configured to determine, if the preset condition is reached, whether the size of the page is not less than a predetermined size.

The first loading module is configured to load the first navigation component to the page for display if the size of the page is not less than a predetermined size.

The second loading module is configured to load the second navigation component to the page for display if the size of the page is smaller than a predetermined size.

In the embodiment of the present application, the foregoing obtaining module is specifically configured to:

In the embodiment of the present application, the foregoing first determining module is specifically configured to:

Determining whether the distance reaches a preset distance;

In this embodiment of the present application, the page processing apparatus further includes a transition module, configured to:

In the embodiment of the present application, the foregoing transition module is further configured to:

When the size of the page in the zooming process is not less than the predetermined size, the second navigation component being displayed is transitioned to the first navigation component based on the preset animation function.

In the embodiment of the present application, the process of acquiring the size of the page in the zooming process by using the transition module includes:

In the embodiment of the present application, the page processing apparatus further includes a third determining module, configured to:

Determining whether the page has a screen adaptation mode enabled;

If not turned on, the second navigation component is not displayed.

In this embodiment of the present application, the page processing apparatus further includes a configuration module, configured to:

The embodiment of the present application further provides a readable storage medium, where the readable storage medium stores a computer program, and when the computer program is executed, the page processing method described above is implemented.

Compared with the prior art, the present application includes the following beneficial effects:

The embodiment of the present invention provides a page processing method, a device, and a readable storage medium. First, obtaining a scroll bar position of a page during scrolling, and determining whether the scroll bar position reaches a preset condition, if the preset is reached. a condition, determining whether the size of the page is not less than a predetermined size: if the size of the page is not less than a predetermined size, loading the first navigation component to the page for display; if the size of the page is smaller than a predetermined size, The second navigation component is loaded into the page for display. Thereby, different navigation components can be displayed according to the size of the current page, thereby making the layout of the entire page more concise, giving the page viewer a consistent reading experience, and the user will always be attracted by the content area of the page, thereby Effectively avoid interrupting the reader's interaction with the page.

DRAWINGS

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings to be used in the embodiments will be briefly described below. It should be understood that the following drawings show only certain embodiments of the present application, and therefore It should be seen as a limitation on the scope, and those skilled in the art can obtain other related drawings according to these drawings without any creative work.

FIG. 1 is a schematic flowchart of a page processing method according to an embodiment of the present application;

2 is a schematic flow chart of each sub-step included in step S220 shown in FIG. 1;

FIG. 3 is a functional block diagram of a page processing apparatus according to an embodiment of the present disclosure;

FIG. 4 is a schematic block diagram of an electronic device for implementing the above page processing method according to an embodiment of the present application.

Icon: 100-electronic device; 110-bus; 120-processor; 130-storage medium; 140-bus interface; 150-network adapter; 160-user interface; 200-page processing device; 210-acquisition module; a judging module; 230 - a second judging module; 240 - a first loading module; 250 - a second loading module.

Detailed ways

The technical solutions in the embodiments of the present application are clearly and completely described in the following with reference to the drawings in the embodiments of the present application. It is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. The components of the embodiments of the present application, which are generally described and illustrated in the figures herein, may be arranged and designed in various different configurations. The detailed description of the embodiments of the present application, which is set forth in the claims All other embodiments obtained by a person skilled in the art based on the embodiments of the present application without creative efforts are within the scope of the present application.

It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.

Please refer to FIG. 1 , which is a schematic flowchart of a page processing method according to an embodiment of the present application. It should be noted that the page processing method provided by the embodiment of the present application is not limited to the specific order described in FIG. 2 and the following. The page processing method can be implemented by the following steps:

Step S210: Acquire a scroll bar position of the page during scrolling.

In detail, in this embodiment, the page scroll event may be detected by calling the mouse wheel event response function, and when the page scroll event is detected, the scroll event response function of the window object (Window object) is called to obtain the scroll bar. position.

Step S220, determining whether the scroll bar position reaches a preset condition.

As an implementation manner, referring to FIG. 2, the step S220 can be implemented by the following sub-steps:

Sub-step S221, calculating a distance between the scroll bar position and the start position of the scroll bar of the page.

In this embodiment, when the page viewer enters the page, since the page display will start from the beginning position of the page, that is, the page starts to be displayed at the top of the display window, the navigation component will not be displayed by default because there is no It is necessary to let the user locate the page.

When the page viewer scrolls the mouse wheel or drags the scroll bar of the browser window, whether to display or hide the navigation component can be determined by calculating the distance between the scroll bar position and the start position of the scroll bar of the page in real time.

Sub-step S222, determining whether the distance reaches a preset distance.

Specifically, the preset distance may be set in advance, for example, the preset distance may be a height of one (or more) view windows along the page scrolling direction, that is, if the scroll bar position is away from the If the position of the start position of the scroll bar of the page reaches the height of the height of one view window, then sub-step S222a is performed to determine that the position of the scroll bar reaches a preset condition; if the position of the scroll bar is away from the start position of the scroll bar of the page If the position has not reached the height of one view window, then sub-step S222b is performed to determine that the scroll bar position has not reached the preset condition.

Further, at the same time as the sub-step S222, the scrolling speed of the page may also be acquired, and after the preset condition is reached, the scrolling speed of the page is referenced. The next step is continued when the page is at rest or the scroll speed is less than a preset speed.

Further, referring to FIG. 1 again, on the basis of the foregoing, if the preset condition is reached, step S230 is performed to determine whether the size of the page is not less than a predetermined size.

If the size of the page is not less than the predetermined size, step S240 is performed to load the first navigation component to the page for display.

In this embodiment, the predetermined size may be set in advance, for example, the predetermined size may be set to a width of 1366px (1366 pixels), that is, the width of the page is not less than 1366px, then the first The navigation component is loaded into the page for display.

If the size of the page is smaller than the predetermined size, step S250 is performed to load the second navigation component to the page for display. For example, if the width of the page is not less than 1366px, then the second navigation component is loaded into the page for display.

In other embodiments, the predetermined size may also be set to the height of the page (for example, 800px), or set to a parameter such as the area of the page, the aspect ratio, and the like. Of course, it is also possible to integrate a plurality of parameters in the width, height, area, and aspect ratio as the setting conditions of the predetermined size.

Through the above embodiment, different navigation components can be displayed according to the size of the current page, so that the layout of the entire page is more concise, and the page viewer has a consistent reading experience, and the user is always attracted by the content area of the page. Therefore, it is possible to effectively avoid interrupting the reader's interaction with the page.

Based on the above embodiments, it is worth noting that the second navigation component functions to replace the first navigation component in a smaller-sized screen, thereby achieving the purpose of adapting to a small-sized screen. Further, before the step S210, the page processing method provided in this embodiment may further include the step of configuring the first navigation component and the second navigation component, specifically, the first navigation may be responded to by the response. a request for configuration of the component and the second navigation component, configuring component information of the first navigation component and the second navigation component on the page, wherein the component information may include a background, a font, a color At least one.

In detail, since the default styles and configurations of the first navigation component and the second navigation component may not be matched with various different pages, in order to make the first navigation component and the second navigation component more general Therefore, the embodiment may further provide an editing panel of the first navigation component and the second navigation component, when a developer and an operation and maintenance personnel of the page select (eg, click) the first navigation component or the second navigation component. At the same time, the corresponding navigation component will introduce an editing panel in the page, through which the user of the navigation component such as the developer and the designer of the page can customize the corresponding editing box on the panel according to the design drawing. The navigation component's background, font, color and other parameters, to customize the navigation component consistent with the design of the page style, and finally the result of the preservation is the final browsing experience of the final page viewer. Thereby, the use of the navigation component can be made more flexible, and the style suitable for the current page style can be quickly realized, and at the same time, the function package cannot be changed, thus avoiding repeated tests.

Further, after the definition of the first navigation component and the second navigation component is completed, the user may check whether the second navigation component is enabled, that is, whether the screen adaptation mode is enabled, and if not, the first navigation component is not displayed. Two navigation components.

If the screen adaptation mode has been turned on, the first navigation component and the second navigation component are respectively inserted into different places of the page (the second navigation component is inserted into the body tag), thus, two The navigation components are independent of each other, so the operation of one of the navigation components does not affect the additional navigation components. Therefore, if the user does not enable the screen adaptation mode, the navigation component only inserts the necessary structural strategy, thereby reducing the number of elements in the page and improving the performance of the page. And, by adopting a manner of delay loading the first navigation component, the performance and loading speed of the page can be improved. At the same time, it is only necessary to display the feeling of avoiding the user's suddenness, because it is not necessary to use the navigation component to locate the page at the beginning of the page, and the actual position of the page usually displays more important content, so that the page can be browsed. People can concentrate on getting the main information.

Further, in this case, the page processing method may also perform responsive processing according to the change of the page size, which may be implemented by the following steps:

First, in the display process of the first navigation component, detecting whether the page is in a zoomed state, and if detecting that the page is zoomed, acquiring a size of the page during the zooming process, for example, calling the window The callback function of the object's resize event gets the size of the page during the zoom process.

Next, it is determined whether the size of the page in the zooming process is smaller than the predetermined size, wherein the predetermined size may be set in advance, for example, the predetermined size may be set to a width of 1366px, that is, if the page is When the width is less than 1366px, the first navigation component being displayed is transitioned to the second navigation component based on a preset animation function. More specifically, the width of the current page can be obtained by the function $(window).width() provided by the jQuery library. If the width is less than 1366px, then the preset animation function provided by the jQuery library is used to change the first navigation component. Position and visibility to smoothly transition to the second navigation component.

Further, in the process of transitioning to the second navigation component, when the size of the page in the zooming process is not less than the predetermined size, the second navigation component being displayed is transitioned to the The first navigation component is described. That is, when the user zooms the page again, if the page width is greater than 1366px, then the position and visibility of the second navigation component is changed based on the preset animation function to smoothly transition to the first navigation component.

Thereby, the switching of the first navigation component and the second navigation component utilizes an animation implementation, which can make the whole switching process more natural and vivid, and does not bring oysters and cards to the page viewer during the switching process. Experience, enhance the user browsing experience.

It is worth noting that in some specific requirements, automatic processing of the navigation component may not be required, so the user may also manually switch the current navigation component to the first navigation component or the second navigation component. This can meet the special needs of users.

Further, referring to FIG. 3, the embodiment of the present application further provides a page processing apparatus 200, where the apparatus may include:

The obtaining module 210 is configured to obtain a scroll bar position of the page during the scrolling process.

The first determining module 220 is configured to determine whether the scroll bar position reaches a preset condition.

The second determining module 230 is configured to determine, if the preset condition is reached, whether the size of the page is not less than a predetermined size.

The first loading module 240 is configured to load the first navigation component to the page for display if the size of the page is not less than a predetermined size.

The second loading module 250 is configured to load the second navigation component to the page for display if the size of the page is smaller than a predetermined size.

It can be understood that the specific operation method of each functional module in this embodiment can refer to the detailed description of the corresponding steps in the foregoing method embodiments, and the details are not repeated herein.

Further, the embodiment of the present application further provides a readable storage medium, where the readable storage medium stores a computer program, and when the computer program is executed, the page processing method described above is implemented.

Further, please refer to FIG. 4 , which is a schematic block diagram of a structure of an electronic device 100 according to an embodiment of the present application. In this embodiment, the electronic device 100 may be a mobile phone, a tablet computer, a personal computer (PC), a notebook computer, etc., which is not specifically limited in this embodiment.

As shown in FIG. 4, electronic device 100 can be implemented by bus 110 as a general bus architecture. Depending on the particular application of electronic device 100 and overall design constraints, bus 110 may include any number of interconnecting buses and bridges. Bus 110 connects various circuits together, including processor 120, storage medium 130, and bus interface 140. Alternatively, the electronic device 100 may connect the network adapter 150 or the like via the bus 110 using the bus interface 140. The network adapter 150 can be used to implement a signal processing function of a physical layer in the electronic device 100, and realize transmission and reception of radio frequency signals through an antenna. The user interface 160 can be connected to an external device such as a keyboard, a display, a mouse, or a joystick. The bus 110 can also be connected to various other circuits, such as timing sources, peripherals, voltage regulators, or power management circuits, etc., which are well known in the art and therefore will not be described in detail.

Alternatively, the electronic device 100 can also be configured as a general purpose processing system, such as generally referred to as a chip, the general purpose processing system including: one or more microprocessors providing processing functionality, and an external memory providing at least a portion of the storage medium 130, All of this is connected to other support circuits through an external bus architecture.

Alternatively, the electronic device 100 can be implemented using an ASIC (Application Specific Integrated Circuit) having a processor 120, a bus interface 140, a user interface 160, and at least a portion of the storage medium 130 integrated in a single chip, or The electronic device 100 can be implemented using one or more FPGAs (Field Programmable Gate Arrays), PLDs (Programmable Logic Devices), controllers, state machines, gate logic, discrete hardware components, any other suitable circuitry, Or any combination of circuits capable of performing the various functions described throughout the application.

Among other things, the processor 120 is responsible for managing the bus 110 and general processing (including executing software stored on the storage medium 130). Processor 120 can be implemented using one or more general purpose processors and/or special purpose processors. Examples of processor 120 include a microprocessor, a microcontroller, a DSP processor, and other circuitry capable of executing software. Software should be interpreted broadly to mean instructions, data, or any combination thereof, whether referred to as software, firmware, middleware, microcode, hardware description language, or otherwise.

Storage medium 130 is shown separated from processor 120 in FIG. 4, however, those skilled in the art will readily appreciate that storage medium 130, or any portion thereof, may be located external to electronic device 100. For example, storage medium 130 may include transmission lines, carrier waveforms modulated with data, and/or computer products separate from wireless nodes, all of which may be accessed by processor 120 through bus interface 140. Alternatively, storage medium 130, or any portion thereof, may be integrated into processor 120, for example, may be a cache and/or a general purpose register.

The processor 120 can execute the foregoing embodiment. Specifically, the page processing device 200 can be stored in the storage medium 130, and the processor 120 can be used to execute the page processing device 200.

In the embodiments provided by the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The above described apparatus and method embodiments are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate the architecture of possible implementations of systems, methods, and computer program products according to various embodiments of the present application, Features and operations. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.

In addition, each functional module in each embodiment of the present application may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.

Alternatively, it may be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented in software, it may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in accordance with embodiments of the present application are generated in whole or in part. The computer can be a general purpose computer, a special purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer readable storage medium or transferred from one computer readable storage medium to another computer readable storage medium, for example, the computer instructions can be from a website site, computer, server or data center Transfer to another website site, computer, server, or data center by wire (eg, coaxial cable, fiber optic, digital subscriber line (DSL), or wireless (eg, infrared, wireless, microwave, etc.). The computer readable storage medium can be any available media that can be accessed by a computer or a data storage device such as an electronic device, server, data center, or the like that includes one or more available media. The usable medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a DVD), or a semiconductor medium (such as a solid state disk (SSD)).

It is to be understood that the term "comprising", "including" or any other variants thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device comprising a Elements, but also other elements not explicitly listed, or elements that are inherent to such a process, method, item, or device. An element defined by the phrase "comprising a ..." does not exclude the presence of additional elements in the process, method, item, or device that comprises the element.

It is apparent to those skilled in the art that the present application is not limited to the details of the above-described exemplary embodiments, and the present application can be implemented in other specific forms without departing from the spirit or essential characteristics of the application. Therefore, the present embodiments are to be considered as illustrative and not restrictive, and the scope of the invention is defined by the appended claims instead All changes in the meaning and scope of equivalent elements are included in this application. Any reference signs in the claims should not be construed as limiting the claim.

Industrial applicability:

By applying the technical solution of the present application, different navigation components can be displayed according to the size of the current page, so that the layout of the entire page is more concise, and the page viewer has a consistent reading experience, and the user will always be the content of the page. Area attraction, which can effectively avoid interrupting the reader's interaction with the page.

Claims

A page processing method is characterized in that it is applied to an electronic device, and the method includes:

Get the scrollbar position of the page during scrolling;

Determining whether the scroll bar position reaches a preset condition;

If the preset condition is reached, determining whether the size of the page is not less than a predetermined size;

If the size of the page is not less than a predetermined size, loading the first navigation component to the page for display;

If the size of the page is smaller than a predetermined size, the second navigation component is loaded onto the page for display.
The page processing method according to claim 1, wherein the obtaining a scroll bar position of the page during the scrolling process comprises:

Calling a mouse wheel event response function to detect whether there is a page scrolling event on the page;

When a page scrolling event is detected, the scroll event response function of the window object is called to obtain the scroll bar position.
The page processing method according to claim 1 or 2, wherein the determining whether the scroll bar position reaches a preset condition comprises:

Calculating a distance between the scroll bar position and a start position of a scroll bar of the page;

Determining whether the distance reaches a preset distance;

When the determination result is yes, determining that the scroll bar position reaches a preset condition;

When the judgment result is no, it is determined that the scroll bar position does not reach the preset condition.
The page processing method according to claim 3, wherein the preset distance is a height of a view window.
The page processing method according to any one of claims 1 to 4, wherein, if the size of the page is not smaller than a predetermined size, after loading the first navigation component to the page for display, The method also includes:

Obtaining a size of the page during the zooming process when detecting that the page is zoomed;

Determining whether the size of the page during the zooming process is smaller than the predetermined size;

When the determination result is YES, the first navigation component being displayed is transitioned to the second navigation component based on a preset animation function.
The page processing method according to claim 5, wherein after the transitioning the first navigation component being displayed to the second navigation component based on the preset animation function, the method further comprises:

When the size of the page in the zooming process is not less than the predetermined size, the second navigation component being displayed is transitioned to the first navigation component based on a preset animation function.
The page processing method according to claim 5, wherein the obtaining the size of the page in the zooming process comprises:

Callback function of the resize event of the window object is called to get the size of the page during the zooming process.
The page processing method according to any one of claims 1 to 7, wherein the method further comprises:

Determining whether the page has a screen adaptation mode enabled;

If not turned on, the second navigation component is not displayed.
The page processing method according to claim 8, wherein after the determining whether the page is in the screen adaptation mode, the method further comprises:

If enabled, the first navigation component and the second navigation component are respectively inserted into different locations of the page.
The page processing method according to any one of claims 1 to 9, wherein the method further comprises:

Configuring component information of the first navigation component and the second navigation component on the page in response to a request to configure the first navigation component and the second navigation component, wherein the component information includes a background At least one of a font, a font, and a color.
A page processing device is characterized in that it is applied to an electronic device, and the device includes:

Obtaining a module configured to obtain a scroll bar position of the page during scrolling;

The first determining module is configured to determine whether the scroll bar position reaches a preset condition;

The second determining module is configured to determine, if the preset condition is reached, whether the size of the page is not less than a predetermined size;

The first loading module is configured to load the first navigation component to the page for display if the size of the page is not less than a predetermined size;

The second loading module is configured to load the second navigation component to the page for display if the size of the page is smaller than a predetermined size.
The page processing apparatus according to claim 1, wherein the obtaining module is specifically configured to:

Calling a mouse wheel event response function to detect whether there is a page scrolling event on the page;

When a page scrolling event is detected, the scroll event response function of the window object is called to obtain the scroll bar position.
The page processing apparatus according to claim 11 or 12, wherein the first determining module is specifically configured to:

Calculating a distance between the scroll bar position and a start position of a scroll bar of the page;

Determining whether the distance reaches a preset distance;

When the determination result is yes, determining that the scroll bar position reaches a preset condition;

When the judgment result is no, it is determined that the scroll bar position does not reach the preset condition.
The page processing apparatus according to claim 13, wherein the preset distance is a height of a view window.
The page processing apparatus according to any one of claims 11 to 14, further comprising a transition module configured to:

Obtaining a size of the page during the zooming process when detecting that the page is zoomed;

Determining whether the size of the page during the zooming process is smaller than the predetermined size;

When the determination result is YES, the first navigation component being displayed is transitioned to the second navigation component based on a preset animation function.
The page processing apparatus according to claim 15, wherein the transition module is further configured to:

When the size of the page in the zooming process is not less than the predetermined size, the second navigation component being displayed is transitioned to the first navigation component based on a preset animation function.
The page processing apparatus according to claim 15, wherein the transition module acquires a size of the page during the zooming process, including:

Callback function of the resize event of the window object is called to get the size of the page during the zooming process.
The page processing apparatus according to any one of claims 11-17, further comprising a third determining module configured to:

Determining whether the page has a screen adaptation mode enabled;

If not turned on, the second navigation component is not displayed.
The page processing apparatus according to any one of claims 11 to 18, further comprising a configuration module configured to:

Configuring component information of the first navigation component and the second navigation component on the page in response to a request to configure the first navigation component and the second navigation component, wherein the component information includes a background At least one of a font, a font, and a color.
A readable storage medium, characterized in that the readable storage medium stores a computer program, and when the computer program is executed, the page processing method according to any one of claims 1 to 10 is implemented.