CN107977150A - A kind of view scrolling method, device and electronic equipment - Google Patents

Abstract

This specification embodiment discloses a kind of view scrolling method, device and electronic equipment, after the terminal device for carrying the browser for supporting HTML5 receives view rolling operation, according to the scroll zones defined based on primary rolling assembly, judge whether the view rolling operation has slided into the boundary line of scroll zones；If the determination result is YES, the origin of the spring-back area defined based on primary rolling assembly is preserved；According to the further view rolling operation of user, continue to slide based on predetermined spring-back area；When user discharges view rolling operation, spring-back area drives scroll zones to revert to mark position.

Description

A view scrolling method, device and electronic equipment

technical field

This specification relates to the field of computer technology, and in particular to a view scrolling method, device and electronic equipment.

Background technique

With the development of Internet technology, pages (such as web pages, application pages, etc.) that support HTML5 (Hypertext Markup Language 5.0, Hypertext Transfer Protocol version 5) often load a lot of information, such as pictures, text, etc. However, due to the limited screen size of the terminal device, it is impossible to clearly display all the content on the page through the current display interface of the screen. Therefore, users can browse all the content on the page by scrolling.

In the prior art, since the view scrolling components in HTML5-based browsers are not very complete, it cannot support all mobile terminals to realize the animation effects of view scrolling and dragging and rebounding. Therefore, the view scrolling of the mobile terminal is usually implemented by means of a third-party view scrolling component such as iscroll. Specifically, iscroll is used to completely intercept user scrolling, dragging and dropping operations, and use CSS (Cascading Style Sheets, Cascading Style Sheets) to position and move to simulate the scrolling effect of a web page view based on HTML5.

Based on the prior art, a solution that can better implement view scrolling is needed.

Contents of the invention

The embodiments of the present specification provide a view scrolling method, device and electronic equipment, which are used to solve the following technical problem: a solution for better realization of view scrolling is needed.

In order to solve the above-mentioned technical problems, the embodiments of this specification are implemented as follows:

A view scrolling method provided by an embodiment of this specification includes:

Receive the scrolling operation of the view, and scroll the preset scrolling area based on the native scrolling component;

When the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, the preset marking position of the rebound area is acquired; wherein, the boundary line of the scrolling area is determined based on the view content contained in the preset scrolling area;

Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region;

Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.

A view scrolling device provided in an embodiment of this specification includes:

The receiving module receives the scrolling operation of the view and scrolls the preset scrolling area based on the native scrolling component;

The marking module, when the boundary line of the scrolling area is scrolled to align with the boundary line of the visible area, acquires the mark position of the preset rebound area; wherein, the boundary line of the scrolling area is based on the view contained in the preset scrolling area determined by the content;

The rebound module restores the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region;

Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.

An electronic device provided in an embodiment of this specification includes:

at least one processor; and,

a memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to:

Receive the scrolling operation of the view, and scroll the preset scrolling area based on the native scrolling component;

When the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, the preset marking position of the rebound area is acquired; wherein, the boundary line of the scrolling area is determined based on the view content contained in the preset scrolling area;

Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region;

Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.

The above-mentioned at least one technical solution adopted in the embodiment of this specification can achieve the following beneficial effects: the rebound area and the scrolling area are preset according to the native scroll view scrolling component carried by the browser supporting HTML5; the scrolling operation of the view is realized by using the native scroll view scrolling component, There is no need to rely on third-party view scrolling components or plug-ins to intercept user scrolling operations, which can effectively improve the performance of view scrolling and provide a better smooth scrolling experience; further, based on native scroll view scrolling components, using preset CSS3 The animation rendering method enables the rebound area to achieve a preset rebound effect, which can satisfy the user's animation experience of view pull-down and view rebound when using a mobile terminal.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of this specification or the prior art, the following will briefly introduce the drawings that need to be used in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only These are some embodiments described in this specification. Those skilled in the art can also obtain other drawings based on these drawings without any creative effort.

Figure 1 is a schematic diagram of the layout of the display interface involved in the solution of this specification in a practical application scenario;

FIG. 2 is a schematic flowchart of a view scrolling method provided by an embodiment of this specification;

3a and 3b are schematic diagrams of a mobile terminal application scenario provided by the embodiment of this specification;

Fig. 4 is a schematic diagram of top boundary line alignment provided by the embodiment of this specification;

Fig. 5 is a schematic diagram of a pull-down top boundary line provided by the embodiment of this specification;

Fig. 6 is a schematic diagram of bottom boundary line alignment provided by the embodiment of this specification;

Fig. 7 is a schematic diagram of a bottom boundary line pull-down provided by the embodiment of this specification;

FIG. 8 is a schematic structural diagram of a view scrolling device provided by an embodiment of this specification.

Detailed ways

In order to enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below in conjunction with the drawings in the embodiments of this specification. Obviously, the described The embodiments are only some of the embodiments of the present application, but not all of them. Based on the embodiments of this specification, all other embodiments obtained by persons of ordinary skill in the art without creative efforts shall fall within the scope of protection of this application.

FIG. 1 is a schematic diagram of a display interface layout involved in the solution of this specification in a practical application scenario. The display interface layout includes a scrolling area, a rebound area, a visible area, and an invisible area. After the mobile terminal device receives the user's view scrolling operation, the scrolling area and its corresponding display interface will scroll; the view scrolling operation is realized by the scroll view native scrolling component carried by the browser supporting HTML5.

In the interface shown in FIG. 1 , the part that can be displayed through the display interface is called a visible area. The part of the webpage content that cannot be directly displayed to the user but needs to be displayed to the user through a scrolling operation is called an invisible area. The scrolling area is determined according to the content of the view, and is used to mark the scrolling distance of the page content during the scrolling operation of the view, and to determine whether the page is scrolled to the top or bottom boundary. The rebound area can be regarded as an area for realizing a predetermined rebound rendering effect.

It should be noted that during the scrolling operation, the native scroll view scrolling component cannot directly determine the scrolling distance of the displayed content through the interface. Then, through the above defined scrolling area, the displayed content can be determined according to the scrolling distance of the scrolling area scrolling distance. When the boundary line of the scrolling area is aligned with the boundary line of the visible area, if the user continues to scroll the view, the rebound area will continue to scroll with the scrolling area; if the user releases the scrolling operation of the view, the rebound area will carry the scrolling area back It bounces to a position aligned with the boundary line of the visible area, and the rebound animation adopts CSS3 animation rebound.

The technical solution of this embodiment can be applied to mobile terminal devices supporting HTML5, such as mobile phones and tablet computers. In order to better illustrate the technical solution with examples, the following embodiments use mobile phones as an actual application scenario for illustration.

Based on the overall architecture, the solutions of this specification will be described in detail below.

The embodiment of this specification provides a view scrolling method, and a schematic flowchart of the method is shown in FIG. 2 .

Fig. 2 is a schematic flowchart of a view scrolling method provided by the embodiment of this specification, and the method may specifically include the following steps:

Step S202: Receive a view scrolling operation, and scroll a preset scrolling area based on a native scrolling component.

In practical applications, if there are many pages such as web pages, it is usually impossible to fully display all the content to the user through the current display interface of the terminal screen, especially for mobile terminal devices with small screens. Therefore, it is necessary to sequentially display the content of the webpage to the user by means of view scrolling.

Native scrolling components can generally be considered as scrolling components supported by HTML. For example, it may be based on a scroll view scrolling component carried by a browser supporting HTML5. Further, in one or more embodiments of this specification, receiving the scrolling operation of the view and scrolling the preset scrolling area based on the native scrolling component may specifically include: receiving the scrolling distance corresponding to the scrolling operation of the view, based on the browser carrying HTML5 The scroll view scrolling component scrolls the preset scrolling area; wherein, the scrolling area is used to determine the view range for implementing the scrolling operation.

For example, in the scenario where a browser supporting HTML5 is applied to a mobile terminal, as shown in Figure 3a, when the view does not scroll, the top border of the web page is aligned with the top border of the visible area; when an HTML5-based browser is used to carry The native scroll view scrolling component implements the view scrolling operation. After the view scrolls (as shown in Figure 3b), the "first title" originally displayed in the visible area scrolls to the invisible area at the top, and the invisible area originally located at the bottom The "Fourth Title" is displayed in the viewable area. Since the native scroll view scrolling component has better compatibility, the scrolling operation process can effectively improve the user experience.

Step S204: When the boundary line of the scrolling area is scrolled to align with the boundary line of the visible area, obtain the preset mark position of the rebound area; wherein, the boundary line of the scrolling area is based on the view content contained in the preset scrolling area definite.

For example, when the user browses to the top or bottom of the webpage (of course, the left and right boundaries of the webpage can also be included) through a browser supporting HTML5, that is, when the boundary line of the scrolling area is aligned with the boundary line of the visible area, according to the preset Set animation mode, the boundary line of the scrolling area can continue to scroll beyond the visible area. In order to be able to return to the current position, it is necessary to save the current marker position of the preset rebound area.

It should be noted that, in the embodiment of the present application, the term "going beyond" can be understood as that the boundary line of the scrolling area crosses the boundary line of the visible area and enters the visible range of the visible area.

The mark position mentioned here can be the mark position when the top or bottom boundary line of the scrolling area is aligned with the top or bottom boundary line of the rebound area, and the mark position can be a mark action point or a mark action line. For example, assuming that the coordinates of the upper left corner of the visible area are used as the origin position of the rebound area, when the top boundary line of the scrolling area is aligned with the top boundary line of the visible area, the origin position (ie, the mark position) of the rebound area is saved.

Step S206: Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region.

In practical applications, there are various rendering effects. Specifically, the rendering effects can be set to size scaling, position adjustment, blurring, setting transparency, etc. according to user needs. The rebound area is used to assist in achieving preset rendering effects. For example, when the position or size of the rebound region changes, according to the preset rendering effect, the pull-down and rebound process of the rebound region can present an effect similar to the rebound of a rubber band.

The range of the rebound area can be defined according to actual needs. Generally speaking, the defined range of the rebound area is not larger than the range of the scrolling area, but not smaller than the range of the visible area.

Based on the above steps, the rebound area and scrolling area are preset according to the native scroll view scrolling component carried by browsers that support HTML5. Then, using the native scroll view scrolling component to realize the view scrolling operation does not need to rely on third-party view scrolling components or plug-ins. Intercepting the user's scrolling operation can effectively improve the performance of view scrolling and provide a better smooth scrolling experience; further, based on the native scroll view scrolling component, and using the preset CSS3 animation rendering method, the rebound area can realize the preset The rebound effect set can satisfy the user's animation experience of view drop-down and view rebound when using a mobile terminal.

In one or more embodiments of the present specification, when the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, obtaining the preset marker position of the rebound area may specifically include: based on the preset The view content contained in the scrolling area determines the boundary line of the scrolling area; when the boundary line of the scrolling area is aligned with the boundary line of the visible area or the boundary line of the rebound area, acquire and save the rebound The marked position of the area; wherein, the rebound area is used to determine the viewing range for realizing the rebound effect.

As mentioned above, it can be seen that the range of the scrolling area is determined according to the content of the view. Specifically, for example, the height of the corresponding scrolling area can be determined according to the number of pixels required to fully display the content of the view, and then it can be determined according to the height of the scrolling area. The position of its top and bottom border lines and the number of pixels scrolled (ie, the scroll distance).

When the boundary line of the scrolling area is aligned with the boundary line of the visible area, the preset mark position of the rebound area is saved, and the mark position can be used as a reference position during rebound.

In addition to being used to determine the marker position of the bounce, the bounce area can also be used to determine the view range to achieve the bounce effect. For example, assuming that the range of the preset rebound area is the same as the range of the visible area, according to the positional relationship between the rebound area and the scroll area, when the scroll area scrolls to the top boundary, as shown in Figure 4, for The view that realizes the rebound effect is the part from the top of the view corresponding to the current visible area to the bottom of the visible area; similarly, when the scrolling area scrolls to the bottom boundary, as shown in Figure 6, the view used to realize the rebound effect is The part from the bottom of the view corresponding to the current visible area to the top of the visible area; in the above two cases, the rebound area corresponds to different view contents. Therefore, in practical applications, the view content used to realize the rebound effect is determined according to the positional relationship between the rebound area and the scroll area.

In one or more embodiments of this specification, the rendering effect achieved on the rebound area based on the scrolling operation of the view may specifically include: adjusting the rebound according to the scrolling operation of the view based on a preset rendering method The location and/or size of the region.

As mentioned above, the preset rendering methods may include: size scaling, position adjustment, blurring, setting transparency, etc. In practical applications, multiple rendering methods can also be used at the same time, for example, while implementing position adjustment (ie, displacement), the transparency of the view corresponding to the rebound area is also adjusted to 50% transparency. In practical applications, users can choose according to their own needs, and the rendering methods listed here are just examples, and are not intended to limit this application.

In one or more embodiments of this specification, the preset rendering method includes a preset CSS3 animation method;

Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region may specifically include:

When the effect achieved by the preset rendering method is to adjust the position of the rebound area, according to the end of the view scrolling operation, or the movement distance of the rebound area reaches the preset offset, the rebound The popup area is restored according to the preset CSS3 animation method;

When the effect achieved by the preset rendering method is to adjust the size of the rebound area, according to the end of the scrolling operation of the view, or the magnification factor of the size of the rebound area reaches the preset magnification threshold, the rebound The popup area is restored according to the preset CSS3 animation method;

According to the corresponding relationship between the rolling area and the rebound area, the rebound area drives the scroll area to return to the marked position;

Wherein, the mark position includes: the origin position and the reference line position of the rebound area.

It should be noted that, in practical applications, there is usually an inheritance relationship between the rebound area and the scroll area. Specifically, the scroll area can inherit the data information of the rebound area, and the data information may include, for example: marker position or coordinate information and many more.

For ease of understanding, the preset rendering method is to adjust the position of the rebound area as an example. Figure 4 is a schematic diagram of top boundary line alignment provided by the embodiment of this specification. A schematic diagram of the pull-down top boundary line; FIG. 6 is a schematic diagram of a bottom boundary line alignment provided by the embodiment of this specification, and FIG. 7 is a schematic diagram of a bottom boundary line pull-down corresponding to FIG. 6 . When the boundary line of the scrolling area is scrolled to a position aligned with the boundary line of the visible area, if the rebound area continues to slide based on the preset CSS3 animation, as shown in Figure 5 and Figure 7, due to the rebound area and the scroll area There is an inheritance relationship between them. When the rebound area slides, it will slide with the scroll area. When the rebound region is restored according to the saved mark position, the scrolling region is restored according to the inherited mark position of the rebound region, and the state shown in Fig. 4 and Fig. 6 is restored. In this way, the effect presented to the user is that the scrolling operation and the rebounding operation are always performed on the view content corresponding to the scrolling area, which can improve the user's visual experience.

In practical applications, there may be various conditions for rebounding in the rebounding region. In one embodiment, when the user finds that he has slid to the borderline of the browsed webpage (that is, the borderline of the scrolling area), the user will actively release the scrolling operation of the view, and according to the preset CSS3 animation method, the rebound area carries The scroll area is restored to the original saved marker position together.

In another embodiment, assuming that the offset for releasing the rebound area is set, when the user continues to slide the rebound area beyond the set offset value, the rebound area will automatically restore to the Mark the location.

It should be noted that the position of the mark can usually be a certain point in the rebound area, such as the coordinate point in the upper left corner; of course, the top boundary line or bottom boundary line of the rebound area can also be used as the position of the baseline, which can also play a role The role of the marker position.

In one or more embodiments of this specification, when the boundary line of the scrolling area does not scroll beyond the boundary line of the visible area, the rebound area does not move relative to the visible area, and the scrolling area A region moves relative to the rebound region and the viewable region.

In practical applications, the scrolling area is usually larger than the visible area and the rebound area, and the rebound area is usually the same size as the visible area. When scrolling the view, if the top and bottom boundaries of the scrolling area have not been scrolled, only the scrolling area will scroll according to the user's view scrolling operation, and the rebound area and the visible area will not move. If after scrolling to the boundary line of the scrolling area, save the mark position of the rebound area, and according to the corresponding relationship between the current scrolling area and the rebound area (for example, the inheritance relationship), the rebound area carries the scroll area to continue scrolling, this , the rebound area does not move relative to the scrolling area, but the rebound area moves relative to the visible area.

According to the above-mentioned embodiments, it can be seen that the rebound area and scrolling area are preset based on the native scrollview scrolling component carried by browsers supporting HTML5; the view scrolling operation is realized by using the native scroll view scrolling component, without relying on third-party view scrolling components or plug-ins Intercepting the user's scrolling operation can effectively improve the performance of view scrolling and provide a better smooth scrolling experience; further, based on the native scroll view scrolling component, using the preset CSS3 animation rendering method, the rebound area can realize the preset The rebound effect set can satisfy the user's animation experience of view drop-down and view rebound when using a mobile terminal.

Based on the same idea, the embodiment of this specification also provides a view scrolling device, as shown in FIG. 8 , including:

The receiving module 801 receives a view scrolling operation, and scrolls a preset scrolling area based on a native scrolling component;

The marking module 802, when the boundary line of the scrolling area is scrolled to align with the boundary line of the visible area, acquires the marking position of the preset rebound area; wherein, the boundary line of the scrolling area is based on the preset scrolling area contained The view content is determined;

The rebound module 803 restores the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region;

Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.

In one or more embodiments of this specification, the native scrolling component includes a scroll view scrolling component;

The receiving module 801 receives the view scrolling operation, and scrolls the preset scrolling area based on the native scrolling component, specifically including:

The receiving module 801 receives the scrolling distance corresponding to the view scrolling operation, and scrolls the preset scrolling area based on the scroll view scrolling component carried by the browser supporting HTML5;

Wherein, the scrolling area is used to determine a view range for implementing a scrolling operation.

In one or more embodiments of this specification, the marking module 802 acquires the preset marking position of the rebound area when the boundary line of the scrolling area is scrolled to align with the boundary line of the visible area, specifically including:

Determine the boundary line of the scrolling area based on the view content included in the preset scrolling area;

The marking module 802, when the boundary line of the scrolling area is aligned with the boundary line of the visible area or the boundary line of the rebound area, acquire and save the marking position of the rebound area;

Wherein, the rebound area is used to determine a view range for realizing the rebound effect.

In one or more embodiments of this specification, the device further includes a rendering module 804, which implements a rendering effect on the rebound area based on the scrolling operation of the view, specifically including:

Based on a preset rendering manner, the rendering module 804 adjusts the position and/or size of the rebound area according to the scrolling operation of the view.

In one or more embodiments of this specification, the preset rendering method is a preset CSS3 animation method;

The rebound module 803 restores the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region, specifically including:

When the effect achieved by the preset rendering method is to adjust the position of the rebound area, according to the end of the view scrolling operation, or the movement distance of the rebound area reaches the preset offset, the rebound The popup area is restored according to the preset CSS3 animation method;

When the effect achieved by the preset rendering method is to adjust the size of the rebound area, according to the end of the scrolling operation of the view, or the magnification factor of the size of the rebound area reaches the preset magnification threshold, the rebound The popup area is restored according to the preset CSS3 animation method;

According to the corresponding relationship between the rolling area and the rebound area, the rebound area drives the scroll area to return to the marked position;

Wherein, the mark position includes: the origin position and the reference line position of the rebound area.

In one or more embodiments of this specification, the device further includes:

When the boundary line of the scrolling area does not scroll beyond the boundary line of the visible area, the rebound area does not move relative to the visible area, and the scroll area does not move relative to the rebound area and the The visible area moves.

The rebound area and scrolling area are preset according to the native scroll view scrolling component carried by browsers that support HTML5; the native scroll view scrolling component is used to realize the view scrolling operation, and there is no need to rely on third-party view scrolling components or plug-ins to intercept the user's scrolling operation , can effectively improve the scrolling performance of the view, and have a better smooth scrolling experience; further, based on the native scroll view scrolling component, using the preset CSS3 animation method, the rebound area can achieve the preset rebound effect, which can satisfy The animation experience of view drop-down and view bounce when users use mobile terminals.

Based on the same idea, the embodiment of this specification also provides an electronic device, including:

at least one processor; and,

a memory communicatively coupled to the at least one processor; wherein,

The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to:

Receive the scrolling operation of the view, and scroll the preset scrolling area based on the native scrolling component;

When the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, the preset marking position of the rebound area is acquired; wherein, the boundary line of the scrolling area is determined based on the view content contained in the preset scrolling area;

Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region;

Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.

The foregoing describes specific embodiments of this specification. Other implementations are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in an order different from that in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. Multitasking and parallel processing are also possible or may be advantageous in certain embodiments.

Each embodiment in this specification is described in a progressive manner, the same and similar parts of each embodiment can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the embodiments of the apparatus, electronic equipment, and non-volatile computer storage medium, since they are basically similar to the method embodiments, the description is relatively simple, and for relevant parts, please refer to part of the description of the method embodiments.

The device, electronic equipment, and non-volatile computer storage medium provided in the embodiments of this specification correspond to the method. Therefore, the device, electronic equipment, and non-volatile computer storage medium also have beneficial technical effects similar to those of the corresponding method, because The beneficial technical effects of the method have been described in detail above, therefore, the beneficial technical effects of the corresponding device, electronic equipment, and non-volatile computer storage medium will not be repeated here.

In the 1990s, the improvement of a technology can be clearly distinguished as an improvement in hardware (for example, improvements in circuit structures such as diodes, transistors, and switches) or improvements in software (improvement in method flow). However, with the development of technology, the improvement of many current method flows can be regarded as the direct improvement of the hardware circuit structure. Designers almost always get the corresponding hardware circuit structure by programming the improved method flow into the hardware circuit. Therefore, it cannot be said that the improvement of a method flow cannot be realized by hardware physical modules. For example, a Programmable Logic Device (Programmable Logic Device, PLD) (such as a Field Programmable Gate Array (Field Programmable Gate Array, FPGA)) is such an integrated circuit, and its logic function is determined by programming the device by a user. It is programmed by the designer to "integrate" a digital system on a PLD, instead of asking a chip manufacturer to design and make a dedicated integrated circuit chip. Moreover, nowadays, instead of making integrated circuit chips by hand, this kind of programming is mostly realized by "logic compiler (logic compiler)" software, which is similar to the software compiler used when writing programs. The original code of the computer must also be written in a specific programming language, which is called a hardware description language (Hardware Description Language, HDL), and there is not only one kind of HDL, but many kinds, such as ABEL (Advanced Boolean Expression Language) , AHDL (Altera Hardware Description Language), Confluence, CUPL (Cornell University Programming Language), HDCal, JHDL (Java Hardware Description Language), Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc., currently the most commonly used is VHDL (Very-High-Speed Integrated Circuit Hardware Description Language) and Verilog. It should also be clear to those skilled in the art that only a little logical programming of the method flow in the above-mentioned hardware description languages and programming into an integrated circuit can easily obtain a hardware circuit for realizing the logic method flow.

The controller may be implemented in any suitable way, for example the controller may take the form of a microprocessor or processor and a computer readable medium storing computer readable program code (such as software or firmware) executable by the (micro)processor , logic gates, switches, Application Specific Integrated Circuit (ASIC), programmable logic controllers, and embedded microcontrollers, examples of controllers include but are not limited to the following microcontrollers: ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20 and Silicone Labs C8051F320, the memory controller can also be implemented as part of the memory's control logic. Those skilled in the art also know that, in addition to realizing the controller in a purely computer-readable program code mode, it is entirely possible to make the controller use logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded The same function can be realized in the form of a microcontroller or the like. Therefore, such a controller can be regarded as a hardware component, and the devices included in it for realizing various functions can also be regarded as structures within the hardware component. Or even, means for realizing various functions can be regarded as a structure within both a software module realizing a method and a hardware component.

The systems, devices, modules, or units described in the above embodiments can be specifically implemented by computer chips or entities, or by products with certain functions. A typical implementing device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or Combinations of any of these devices.

For the convenience of description, when describing the above devices, functions are divided into various units and described separately. Of course, when implementing one or more embodiments of this specification, the functions of each unit can be implemented in one or more software and/or hardware.

Those skilled in the art should understand that the embodiments of this specification may be provided as methods, systems, or computer program products. Accordingly, the embodiments of the present description may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, embodiments of the present description may take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

The specification is described with reference to flowcharts and/or block diagrams of methods, devices (systems), and computer program products according to embodiments of the specification. It should be understood that each procedure and/or block in the flowchart and/or block diagram, and a combination of procedures and/or blocks in the flowchart and/or block diagram can be realized by computer program instructions. These computer program instructions may be provided to a general purpose computer, special purpose computer, embedded processor, or processor of other programmable data processing equipment to produce a machine such that the instructions executed by the processor of the computer or other programmable data processing equipment produce a An apparatus for realizing the functions specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.

These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to operate in a specific manner, such that the instructions stored in the computer-readable memory produce an article of manufacture comprising instruction means, the instructions The device realizes the function specified in one or more procedures of the flowchart and/or one or more blocks of the block diagram.

These computer program instructions can also be loaded onto a computer or other programmable data processing device, causing a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process, thereby The instructions provide steps for implementing the functions specified in the flow chart or blocks of the flowchart and/or the block or blocks of the block diagrams.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

Memory may include non-permanent storage in computer readable media, in the form of random access memory (RAM) and/or nonvolatile memory such as read only memory (ROM) or flash RAM. Memory is an example of computer readable media.

Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can be implemented by any method or technology for storage of information. Information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory (ROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Flash memory or other memory technology, Compact Disc Read-Only Memory (CD-ROM), Digital Versatile Disc (DVD) or other optical storage, Magnetic tape cartridge, tape magnetic disk storage or other magnetic storage device or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media excludes transitory computer-readable media, such as modulated data signals and carrier waves.

It should also be noted that the term "comprises", "comprises" or any other variation thereof is intended to cover a non-exclusive inclusion such that a process, method, article, or apparatus comprising a set of elements includes not only those elements, but also includes Other elements not expressly listed, or elements inherent in the process, method, commodity, or apparatus are also included. Without further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article or apparatus comprising said element.

The specification may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The description may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including storage devices.

Each embodiment in this specification is described in a progressive manner, the same and similar parts of each embodiment can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and for relevant parts, refer to part of the description of the method embodiment.

The above descriptions are only examples of the present specification, and are not intended to limit the present application. For those skilled in the art, various modifications and changes may occur in this application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the scope of the claims of the present application.

Claims (13)

1. A view scrolling method, comprising: Receive the scrolling operation of the view, and scroll the preset scrolling area based on the native scrolling component; When the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, the preset marking position of the rebound area is acquired; wherein, the boundary line of the scrolling area is determined based on the view content contained in the preset scrolling area; Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region; Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component. 2. The method according to claim 1, wherein said native scrolling component comprises a scroll view scrolling component; Receive view scrolling operations, based on native scrolling component scrolling preset scrolling area, including: receiving the scrolling distance corresponding to the view scrolling operation, and scrolling the preset scrolling area based on the scroll view scrolling component carried by the browser supporting HTML5; Wherein, the scrolling area is used to determine a view range for implementing a scrolling operation. 3. The method according to claim 1, when the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, obtaining the preset marker position of the rebound area, specifically comprising: Determine the boundary line of the scrolling area based on the view content included in the preset scrolling area; When the boundary line of the scrolling area is aligned with the boundary line of the visible area or the boundary line of the rebound area, acquire and save the mark position of the rebound area; Wherein, the rebound area is used to determine a view range for realizing the rebound effect. 4. The method according to claim 1, based on the rendering effect achieved by the view scrolling operation on the rebound area, specifically comprising: Based on a preset rendering manner, the position and/or size of the rebound area is adjusted according to the scrolling operation of the view. 5. The method according to claim 4, wherein the preset rendering mode is a preset CSS3 animation mode; Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region, specifically includes: When the effect achieved by the preset rendering method is to adjust the position of the rebound area, according to the end of the view scrolling operation, or the movement distance of the rebound area reaches the preset offset, the rebound The popup area is restored according to the preset CSS3 animation method; When the effect achieved by the preset rendering method is to adjust the size of the rebound area, according to the end of the scrolling operation of the view, or the magnification factor of the size of the rebound area reaches the preset magnification threshold, the rebound The popup area is restored according to the preset CSS3 animation method; According to the corresponding relationship between the rolling area and the rebound area, the rebound area drives the scroll area to return to the marked position; Wherein, the mark position includes: the origin position and the reference line position of the rebound area. 6. The method of claim 3, further comprising: When the boundary line of the scrolling area does not scroll beyond the boundary line of the visible area, the rebound area does not move relative to the visible area, and the scroll area does not move relative to the rebound area and the The visible area moves. 7. A view scrolling device comprising: The receiving module receives the scrolling operation of the view and scrolls the preset scrolling area based on the native scrolling component; The marking module, when the boundary line of the scrolling area is scrolled to align with the boundary line of the visible area, acquires the mark position of the preset rebound area; wherein, the boundary line of the scrolling area is based on the view contained in the preset scrolling area determined by the content; The rebound module restores the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region; Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component. 8. The device according to claim 7, wherein said native scrolling component comprises a scroll view scrolling component; The receiving module receives the scrolling operation of the view, and scrolls the preset scrolling area based on the native scrolling component, specifically includes: the receiving module, receiving the scrolling distance corresponding to the scrolling operation of the view, based on the scroll view scrolling component carried by the browser supporting HTML5, scrolling the described A preset scrolling area; wherein, the scrolling area is used to determine a view range for implementing a scrolling operation. 9. The device according to claim 7, the marking module, when the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, acquiring the preset marking position of the rebound area, specifically comprising: based on The view content contained in the preset scrolling area determines the boundary line of the scrolling area; the marking module, when the boundary line of the scrolling area and the boundary line of the visible area or the boundary of the rebound area When the lines are aligned, the marking module acquires and saves the marking position of the rebound area; wherein, the rebound area is used to determine the viewing range for realizing the rebound effect. 10. The device according to claim 7, further comprising a rendering module, based on the rendering effect of the view scrolling operation on the rebound area, specifically comprising: based on a preset rendering method, the rendering module The position and/or size of the rebound area is adjusted according to the scrolling operation of the view. 11. The device according to claim 10, wherein the preset rendering mode is a preset CSS3 animation mode; The rebound module restores the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region, specifically including: When the effect achieved by the preset rendering method is to adjust the position of the rebound area, the rebound module, according to the end of the scrolling operation of the view, or the movement distance of the rebound area reaches the preset offset Shift, the rebound area is restored according to the preset CSS3 animation method; When the effect achieved by the preset rendering method is to adjust the size of the rebound area, the rebound module, according to the end of the scrolling operation of the view, or the magnification of the size of the rebound area reaches the preset Amplify the threshold, and the rebound area will be restored according to the preset CSS3 animation mode; According to the corresponding relationship between the rolling area and the rebound area, the rebound area drives the scroll area to return to the marked position; Wherein, the mark position includes: the origin position and the reference line position of the rebound area. 12. The apparatus of claim 9, further comprising: When the boundary line of the scrolling area does not scroll beyond the boundary line of the visible area, the rebound area does not move relative to the visible area, and the scroll area does not move relative to the rebound area and the The visible area moves. 13. An electronic device comprising: at least one processor; and, a memory communicatively coupled to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: Receive the scrolling operation of the view, and scroll the preset scrolling area based on the native scrolling component; When the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, the preset marking position of the rebound area is acquired; wherein, the boundary line of the scrolling area is determined based on the view content contained in the preset scrolling area; Restoring the rebound region according to the marker position corresponding to the rebound region based on the rendering effect of the view scroll operation on the rebound region; Wherein, the scrolling area and the rebounding area are preset based on the native scrolling component.