WO2019085580A1 - 一种视图滚动方法、装置以及电子设备 - Google Patents

一种视图滚动方法、装置以及电子设备 Download PDF

Info

Publication number
WO2019085580A1
WO2019085580A1 PCT/CN2018/099984 CN2018099984W WO2019085580A1 WO 2019085580 A1 WO2019085580 A1 WO 2019085580A1 CN 2018099984 W CN2018099984 W CN 2018099984W WO 2019085580 A1 WO2019085580 A1 WO 2019085580A1
Authority
WO
WIPO (PCT)
Prior art keywords
area
rebound
scrolling
scroll
preset
Prior art date
Application number
PCT/CN2018/099984
Other languages
English (en)
French (fr)
Inventor
田亮
Original Assignee
阿里巴巴集团控股有限公司
田亮
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 阿里巴巴集团控股有限公司, 田亮 filed Critical 阿里巴巴集团控股有限公司
Publication of WO2019085580A1 publication Critical patent/WO2019085580A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Definitions

  • the present specification relates to the field of computer technologies, and in particular, to a view scrolling method, apparatus, and electronic device.
  • HTML5 Hypertext Markup Language 5.0, Hypertext Transfer Protocol version 5
  • web pages such as: web pages, application pages, etc.
  • HTML5 Hypertext Markup Language 5.0, Hypertext Transfer Protocol version 5
  • the current display interface of the screen cannot clearly display all the contents of the page at the same time. Therefore, the user can browse through all the content on the page by scrolling.
  • the view scrolling component in the HTML5-based browser is not very complete, it is not possible to support all mobile terminals to implement view scrolling and drag and drop animation effects. Therefore, the view scrolling of the mobile terminal is usually implemented by means of a third-party view scrolling component such as iscroll. Specifically, it is an iscroll that completely intercepts user scrolling, dragging and dropping, and uses CSS (Cascading Style Sheets) to locate the movement of the HTML5-based web page view.
  • CSS CSS
  • the embodiment of the present specification provides a view scrolling method, an apparatus, and an electronic device for solving the following technical problems: a solution capable of better implementing view scrolling is required.
  • the scroll area and the rebound area are preset based on the native scrolling component.
  • a marking module configured to acquire a mark position of a preset rebound region when the scroll region boundary line is scrolled to be aligned with the visible region boundary line; wherein the scroll region boundary line is based on a preset scroll region included view Content determined;
  • a rebounding module based on the rendering effect of the view scrolling operation on the rebound region, and restoring the rebound region according to the marked position corresponding to the rebound region;
  • the scroll area and the rebound area are preset based on the native scrolling component.
  • At least one processor and,
  • 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:
  • the scroll area and the rebound area are preset based on the native scrolling component.
  • the at least one technical solution adopted by the embodiment of the present specification can achieve the following beneficial effects: preset a rebound region and a scroll region according to a native scroll view scroll component carried by an HTML5-enabled browser; and implement a view scroll operation by using a native scroll view scroll component, There is no need to rely on third-party view scrolling components or plug-ins to intercept the user's scrolling operation, which can effectively improve the performance of view scrolling and have a better smooth scrolling experience. Further, based on the native scroll view scrolling component, the default CSS3 is utilized.
  • the animation rendering mode enables the rebound region to achieve a preset rebound effect, which can satisfy the animation experience of the user's view pulldown and view rebound when using the mobile terminal.
  • FIG. 1 is a schematic diagram of a layout of a display interface involved in a practical application scenario
  • FIG. 2 is a schematic flowchart diagram of a view scrolling method according to an embodiment of the present disclosure
  • 3a and 3b are schematic diagrams of a mobile terminal application scenario according to an embodiment of the present disclosure.
  • FIG. 4 is a schematic diagram of alignment of top boundary lines provided by an embodiment of the present specification.
  • FIG. 5 is a schematic diagram of a top boundary line pull-down according to an embodiment of the present disclosure.
  • FIG. 6 is a schematic diagram of alignment of bottom boundary lines according to an embodiment of the present disclosure.
  • FIG. 7 is a schematic diagram of a bottom boundary line pull-down provided by an embodiment of the present specification.
  • FIG. 8 is a schematic structural diagram of a view scrolling apparatus according to an embodiment of the present disclosure.
  • FIG. 1 is a schematic diagram of a display interface layout involved in a practical application scenario of the solution of the present specification.
  • the display interface layout includes a scroll area, a rebound area, a visible area, and an invisible area.
  • a portion that can be displayed through the display interface is referred to as a visible area.
  • the part of the webpage content that cannot be directly displayed to the user, and the part that needs to be displayed to the user by scrolling operation is called an invisible area.
  • the scroll area is determined based on the content of the view, used to mark the distance the page content scrolls during the view scroll operation, and to determine whether the page scrolls to the top or bottom border.
  • the rebound area can be considered as an area for realizing a predetermined rebound rendering effect.
  • the native scroll view scrolling component cannot directly determine the scrolling distance of the display content directly through the interface, and then, by defining the scrolling area, the display content can be determined according to the scrolling distance of the scrolling area.
  • the scrolling distance When the boundary line of the scroll area is aligned with the boundary line of the visible area, if the user continues the view scrolling operation, the rebound area will carry the scroll area together to continue scrolling; if the user releases the view scrolling operation, the rebound area carries the scroll area back The bullet is snapped to the position of the visible area boundary line, and the rebound animation is rebounded with CSS3 animation.
  • the technical solution of the embodiment can be applied to a mobile terminal device such as a mobile phone or a tablet computer, and the mobile phone device supporting the HTML5 is described in the following embodiments.
  • the embodiment of the present 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 according to an embodiment of the present disclosure. The method may specifically include the following steps:
  • Step S202 Receive a view scrolling operation, and scroll the preset scrolling area based on the native scrolling component.
  • Native scrolling components are generally considered to be scrolling components that HTML can support. For example, it can be a scroll view scrolling component that is carried based on an HTML5-enabled browser. Further, in one or more embodiments of the present specification, receiving a view scrolling operation, and scrolling the preset scrolling area based on the native scrolling component may specifically include: receiving a scrolling distance corresponding to the scrolling operation of the view, and carrying the browser based on the HTML5-supporting browser a scroll view scrolling component that scrolls the preset scrolling area; wherein the scrolling area is used to determine a range of views that implements a scrolling operation.
  • 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. Thanks to the better compatibility of the native scroll view scrolling component, the scrolling process can effectively improve the user experience.
  • Step S204 acquiring a mark position of the preset rebound area when the scroll area boundary line is scrolled to be aligned with the visible area boundary line; wherein the scroll area boundary line is based on the view content included in the preset scroll area definite.
  • the scroll area boundary line can continue to scroll out of the viewable area.
  • a browser supporting HTML5 (of course, it can also include the left and right boundary lines of the webpage)
  • the scroll area boundary line can continue to scroll out of the viewable area.
  • the boundary line of the rolling area crosses the boundary line of the visible area and enters the visible range of the visible area.
  • the mark position mentioned here may be a mark position when the top or bottom boundary line of the scroll area is aligned with the top or bottom boundary line of the rebound area, and the mark position may be a mark-action point or a mark-action line.
  • the origin position of the rebound area ie, the mark position
  • Step S206 Restore the rebound region according to the mark position corresponding to the rebound region according to the rendering effect implemented by the view scrolling operation on the rebound region.
  • rendering effects which can be set to size scaling, position adjustment, blurring, setting transparency, and the like according to user requirements.
  • the rebound area is used to assist in achieving the preset rendering effect. 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 exhibit a similar rubber band rebound effect.
  • the range of the rebound area can be defined according to actual needs. Generally, the rebound area definition range is not larger than the range of the scroll area, but not smaller than the range of the visible area.
  • the rebound area and the scrolling area are preset, then the view scrolling operation is implemented by using the native scroll view scrolling component without relying on the third-party view scrolling component or plug-in pair.
  • the user's scrolling operation intercepts, which can effectively improve the performance of view scrolling, and has a better smooth scrolling experience; further, based on the native scroll view scrolling component, and using the preset CSS3 animation rendering mode, the rebound area is realized.
  • the rebound effect can satisfy the user's animation experience of view drop-down and view rebound when using the mobile terminal.
  • acquiring the mark position of the preset rebound area may specifically include: based on the preset a scrolling area includes a view content, determining a boundary line of the scrolling area; acquiring and saving the rebounding when a boundary line of the scrolling area is aligned with the visible area boundary line or the rebound area boundary line a marked position of the region; wherein the rebound region is used to determine a range of views that achieves a rebound effect.
  • the range of the scroll area is determined according to the view content.
  • the height of the corresponding scroll area may be determined according to the number of pixels required when the view content is completely displayed, and thus may be determined according to the height of the scroll area.
  • the position of the top and bottom boundary lines and the number of pixels that have been scrolled ie, the scroll distance).
  • the mark position of the preset rebound area is saved, and the mark position can be used as a reference position at the time of rebound.
  • the rebound region can also be used to determine the range of views that achieve the rebound effect.
  • the range of the preset rebound region is the same as the range of the visible region, according to the positional relationship between the rebound region and the scroll region, when the scroll region is scrolled to the top boundary, as shown in FIG. 4,
  • 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 scroll area is scrolled to the bottom boundary, as shown in FIG. 6, the view for realizing the rebound effect is 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 for realizing the rebound effect is determined according to the positional relationship between the rebound region and the scroll region.
  • the rendering effect implemented by the view scrolling operation on the rebound region may specifically include: adjusting the rebound according to the view scrolling operation based on a preset rendering manner. The location and/or size of the area.
  • the preset rendering manner may include: size scaling, position adjustment, blurring, setting transparency, and the like.
  • multiple rendering modes can also be used at the same time, such as: when the position adjustment (ie, displacement) is implemented, the view transparency corresponding to the rebound region is also adjusted to 50% transparency.
  • the user can select according to his own needs.
  • the rendering modes listed here are merely illustrative and are not intended to limit the application.
  • the preset rendering manner includes a preset CSS3 animation mode
  • the effect of the preset rendering mode is to adjust the position of the rebound region, according to the end of the view scrolling operation, or the moving distance of the rebound region reaches a preset offset, the back The bullet area is restored according to the preset CSS3 animation mode;
  • the effect of the preset rendering mode is to adjust the size of the rebound region, according to the end of the view scrolling operation, or the size of the rebound region is increased to a preset magnification threshold, the back The bullet area is restored according to the preset CSS3 animation mode;
  • the rebound region drives the scroll region to be restored to the mark position according to a correspondence between the scroll region and the rebound region;
  • the marking position includes: an origin position of the rebound region, and a reference line position.
  • the scroll region can inherit the data information of the rebound region, and the data information may include, for example, a mark position or coordinate information. and many more.
  • FIG. 4 is a schematic diagram of alignment of top boundary lines provided by an embodiment of the present specification
  • FIG. 5 is a schematic diagram corresponding to FIG.
  • FIG. 6 is a schematic diagram of a bottom boundary line alignment provided by an embodiment of the present specification
  • FIG. 7 is a schematic diagram of a bottom boundary line corresponding to FIG.
  • the scroll region is restored according to the marked position of the inherited rebound region, and restored to the state shown in FIGS. 4 and 6.
  • the effect presented to the user is that the scrolling operation and the rebounding operation of the view content corresponding to the scrolling area are always performed, and the visual experience effect of the user can be improved.
  • the rebound region there are various conditions for rebound in the rebound region.
  • the user after the user finds that the boundary line of the browsed webpage has been slid (ie, the boundary of the scrolling area), the user actively releases the view scrolling operation, and the rebound area is carried according to the preset CSS3 animation mode. The scroll area is restored back to the original saved mark position.
  • the offset of the release rebound region is set.
  • the rebound region automatically carries the scroll region and is restored to Mark the location.
  • the mark position may be a certain point of the rebound area, such as the upper left coordinate point; of course, the top boundary line or the bottom boundary line of the rebound area may also be used as the position of the reference line, and the same can be used.
  • the role of the marker position may be a certain point of the rebound area, such as the upper left coordinate point; of course, the top boundary line or the bottom boundary line of the rebound area may also be used as the position of the reference line, and the same can be used. The role of the marker position.
  • the scrolling area when the scroll area boundary line does not roll out of the visible area boundary line, the rebound area does not move relative to the visible area, the scrolling The area moves relative to the rebound area and the visible area.
  • 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.
  • the view scrolling operation is performed, if the boundary lines such as the top and bottom of the scroll area have not been scrolled, only the scroll area is scrolled according to the user's view scrolling operation, and the rebound area and the visible area do not move.
  • the marked position of the rebounding area is saved, and according to the correspondence between the current scrolling area and the rebounding area (eg, inheritance relationship), the rebounding area carries the scrolling area and continues to scroll together, this At this time, the rebound region does not move relative to the scroll region, and the rebound region moves relative to the visible region.
  • the native scroll view scroll component carried by the HTML5-enabled browser presets the rebound area and the scroll area; and the native scroll view scroll component implements the view scroll operation without relying on the third-party view scroll component or
  • the plug-in intercepts the user's scrolling operation, which can effectively improve the performance of view scrolling, and has a better smooth scrolling experience.
  • the preset CSS3 animation rendering mode is used to realize the rebound region. The preset rebound effect can satisfy the animation experience of the user's view pull-down and view rebound when using the mobile terminal.
  • the embodiment of the present specification further provides a view scrolling device, as shown in FIG. 8, comprising:
  • the receiving module 801 receives a view scrolling operation, and scrolls the preset scrolling area based on the native scrolling component;
  • the marking module 802 acquires a mark position of the preset rebound region when the scroll region boundary line is scrolled to be aligned with the visible region boundary line; wherein the scroll region boundary line is based on the preset scroll region The content of the view is determined;
  • the rebound module 803 restores the rebound region according to the mark position corresponding to the rebound region based on the rendering effect of the view scrolling operation on the rebound region;
  • the scroll area and the rebound area are preset based on the native scrolling component.
  • the native scrolling component includes a scroll view scrolling component
  • the receiving module 801 receives a view scrolling operation, and scrolls the preset scrolling area based on the native scrolling component, and specifically includes:
  • the receiving module 801 receives a scrolling distance corresponding to the view scrolling operation, and scrolls the preset scrolling area based on the scroll view scrolling component carried by the HTML5-enabled browser;
  • the scroll area is used to determine a view range in which a scroll operation is implemented.
  • the marking module 802 when the boundary line of the scrolling area is scrolled to be aligned with the boundary line of the visible area, acquires the marking position of the preset rebounding area, and specifically includes:
  • the marking module 802 acquires and saves a mark position of the rebound region when a boundary line of the scroll region is aligned with the visible region boundary line or the rebound region boundary line;
  • the rebound area is used to determine a view range that implements a rebound effect.
  • the device further includes a rendering module 804, and the rendering effect implemented by the scrolling operation on the rebound region is specifically included in the following:
  • the rendering module 804 adjusts the position and/or size of the rebound region according to the view scrolling operation.
  • the preset rendering mode is a preset CSS3 animation mode
  • the rebounding module 803 is configured to restore the rebounding area according to the marking position corresponding to the rebounding area according to the rendering effect of the view scrolling operation on the rebounding area, which specifically includes:
  • the effect of the preset rendering mode is to adjust the position of the rebound region, according to the end of the view scrolling operation, or the moving distance of the rebound region reaches a preset offset, the back The bullet area is restored according to the preset CSS3 animation mode;
  • the effect of the preset rendering mode is to adjust the size of the rebound region, according to the end of the view scrolling operation, or the size of the rebound region is increased to a preset magnification threshold, the back The bullet area is restored according to the preset CSS3 animation mode;
  • the rebound region drives the scroll region to be restored to the mark position according to a correspondence between the scroll region and the rebound region;
  • the marking position includes: an origin position of the rebound region, and a reference line position.
  • the apparatus further includes:
  • the rebound area and scroll area according to the native scroll view scrolling component carried by the HTML5-enabled browser; use the native scroll view scrolling component to implement the view scrolling operation without relying on the third-party view scrolling component or plug-in to intercept the user's scrolling operation It can effectively improve the performance of view scrolling, and has a better smooth scrolling experience; further, based on the native scroll view scrolling component, using the preset CSS3 animation mode, the rebound region can achieve the preset rebound effect, which can satisfy The user's view of the drop-down and view-rebound animation when using the mobile terminal.
  • an electronic device including:
  • At least one processor and,
  • 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:
  • the scroll area and the rebound area are preset based on the native scrolling component.
  • the device, the electronic device, the non-volatile computer storage medium and the method provided by the embodiments of the present specification are corresponding, and therefore, the device, the electronic device, the non-volatile computer storage medium also have a beneficial technical effect similar to the corresponding method,
  • the beneficial technical effects of the method have been described in detail above, and therefore, the beneficial technical effects of the corresponding device, the electronic device, and the non-volatile computer storage medium will not be described herein.
  • PLD Programmable Logic Device
  • FPGA Field Programmable Gate Array
  • HDL Hardware Description Language
  • the controller can be implemented in any suitable manner, for example, the controller can take the form of, for example, a microprocessor or processor and a computer readable medium storing computer readable program code (eg, software or firmware) executable by the (micro)processor.
  • computer readable program code eg, software or firmware
  • examples of controllers include, but are not limited to, the following microcontrollers: ARC 625D, Atmel AT91SAM, The Microchip PIC18F26K20 and the Silicone Labs C8051F320, the memory controller can also be implemented as part of the memory's control logic.
  • the controller can be logically programmed by means of logic gates, switches, ASICs, programmable logic controllers, and embedding.
  • Such a controller can therefore be considered a hardware component, and the means for implementing various functions included therein can also be considered as a structure within the hardware component.
  • a device for implementing various functions can be considered as a software module that can be both a method of implementation and a structure within a hardware component.
  • the system, device, module or unit illustrated in the above embodiments may be implemented by a computer chip or an entity, or by a product having a certain function.
  • a typical implementation device is a computer.
  • the computer can 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 A combination of any of these devices.
  • embodiments of the specification can be provided as a method, system, or computer program product.
  • embodiments of the present specification can take the form of an entirely hardware embodiment, an entirely software embodiment, or a combination of software and hardware.
  • embodiments of the present specification can 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.) including computer usable program code.
  • the computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing device to operate in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture comprising the instruction device.
  • the apparatus implements the functions specified in one or more blocks of a flow or a flow and/or block diagram of the flowchart.
  • These computer program instructions can also be loaded onto a computer or other programmable data processing device such that a series of operational steps are performed on a computer or other programmable device to produce computer-implemented processing for execution on a computer or other programmable device.
  • the instructions provide steps for implementing the functions specified in one or more of the flow or in a block or blocks of a flow diagram.
  • a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
  • processors CPUs
  • input/output interfaces network interfaces
  • memory volatile and non-volatile memory
  • the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory.
  • RAM random access memory
  • ROM read only memory
  • Memory is an example of a computer readable medium.
  • Computer readable media includes both permanent and non-persistent, removable and non-removable media.
  • Information storage can be implemented by any method or technology.
  • the information can be computer readable instructions, data structures, modules of programs, 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 disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device.
  • computer readable media does not include temporary storage of computer readable media, such as modulated data signals and carrier waves.
  • program modules include routines, programs, objects, components, data structures, and the like that perform particular tasks or implement particular abstract data types. It is also possible to practice the description in a distributed computing environment in which tasks are performed by remote processing devices that are connected through a communication network. In a distributed computing environment, program modules can be located in both local and remote computer storage media including storage devices.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种视图滚动方法、装置以及电子设备，当携带有支持HTML5的浏览器的终端设备接收到视图滚动操作后，根据基于原生滚动组件定义的滚动区域，判断该视图滚动操作是否滑动到了滚动区域的边界线；若判断结果为是，保存基于原生滚动组件定义的回弹区域的原点坐标；根据用户进一步的视图滚动操作，基于预定的回弹区域继续滑动；当用户释放视图滚动操作，回弹区域带动滚动区域还原到标记位置。

Description

一种视图滚动方法、装置以及电子设备 技术领域
本说明书涉及计算机技术领域，尤其涉及一种视图滚动方法、装置以及电子设备。
背景技术
随着互联网技术的发展，支持HTML5(Hypertext Markup Language 5.0，超文本传输协议第5版)的页面(如：网页、应用页面等)中，往往会加载很多信息，例如：图片、文字等等，但由于终端设备的屏幕尺寸有限，故通过屏幕当前显示界面无法同时清晰地展示出页面中的所有内容。因此，用户可通过滚动操作的方式，浏览页面中的所有内容。
在现有技术中，由于基于HTML5的浏览器中的视图滚动组件并不是很齐全，不能够支持所有移动终端实现视图滚动以及拖拉回弹的动画效果。因此，移动终端的视图滚动通常是借助于iscroll等第三方视图滚动组件实现的。具体来说，是通过iscroll，完全拦截用户滚动、拖放等操作，并使用CSS(Cascading Style Sheets，层叠样式表)定位移动的方式模拟基于HTML5的网页视图滚动效果。
基于现有技术，需要能够更好的实现视图滚动的方案。
发明内容
本说明书实施例提供一种视图滚动方法、装置以及电子设备，用于解决以下技术问题：需要能够更好的实现视图滚动的方案。
为解决上述技术问题，本说明书实施例是这样实现的：
本说明书实施例提供的一种视图滚动方法，包括：
接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
本说明书实施例提供的一种视图滚动装置，包括：
接收模块，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
标记模块，在当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
回弹模块，基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
本说明书实施例提供的一种电子设备，包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：根据支持HTML5的浏览器携带的原生scroll view滚动组件预设回弹区域和滚动区域；利用原生scroll view滚动组件实现视图滚动操作，不需要依赖第三方视图滚动组件或插件对用户的滚动操作进行拦截，可以有效提升视图滚动的性能，具有更好的流畅滚动的体验；进一步地，基于原生scroll view滚动组件，利用预设的CSS3动画渲染方式，使得回弹区 域实现预设的回弹效果，可以满足用户使用移动终端时的视图下拉和视图回弹的动画体验。
附图说明
为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本说明书的方案在一种实际应用场景下涉及的显示界面布局示意图；
图2为本说明书实施例提供的一种视图滚动方法的流程示意图；
图3a、3b为本说明书实施例提供的一种移动终端应用场景的示意图；
图4为本说明书实施例提供的一种顶部边界线对齐的示意图；
图5为本说明书实施例提供的一种顶部边界线下拉的示意图；
图6为本说明书实施例提供的一种底部边界线对齐的示意图；
图7为本说明书实施例提供的一种底部边界线下拉的示意图；
图8为本说明书实施例提供的一种视图滚动装置的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
图1为本说明书的方案在一种实际应用场景下涉及的显示界面布局的示意图。该显示界面布局包括滚动区域、回弹区域、可视区域、不可视区域。移动终端设备接收到用户的视图滚动操作后，滚动区域及其对应的显示界面发生滚动；该视图滚动操作通过支 持HTML5的浏览器携带的scroll view原生滚动组件实现。
在图1所示的界面中，能够通过显示界面显示的部分被称作可视区域。网页内容中不能够直接展示给用户的，需要通过滚动操作展示给用户的部分称作不可视区域。滚动区域根据视图内容来确定的，用来标记视图滚动操作时页面内容滚动的距离，以及判断页面是否滚动到顶部或者底部边界。回弹区域可认为是用于实现预定的回弹渲染效果的区域。
需要说明的是，在进行滚动操作的过程中，原生scroll view滚动组件无法直接通过界面直接确定显示内容的滚动距离，那么，通过定义的上述滚动区域，则可根据滚动区域的滚动距离确定显示内容的滚动距离。当滚动区域的边界线与可视区域的边界线对齐时，如果用户继续进行视图滚动操作，则回弹区域将携带滚动区域一起继续滚动；如果用户释放视图滚动操作，回弹区域携带滚动区域回弹到与可视区域边界线对齐的位置，该回弹动画采用CSS3动画回弹。
本实施例技术方案可应用于手机、平板电脑等支持HTML5的移动终端设备，为了更好的进行举例说明技术方案，下面的各个实施例中将手机作为一种实际应用场景进行说明。
基于该整体架构，下面对本说明书的方案进行详细说明。
本说明书实施例提供了一种视图滚动方法，该方法的流程示意图如图2所示。
图2为本说明书实施例提供的一种视图滚动方法的流程示意图，该方法具体可以包括以下步骤：
步骤S202：接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域。
在实际应用中，如果网页等页面的内容比较多时，通常无法将所有的内容通过终端屏幕的当前显示界面完全展现给用户，尤其是屏幕较小的移动终端设备。因此，需要采用视图滚动的方式将网页内容依次展示给用户。
原生滚动组件，通常可认为是HTML所能支持的滚动组件。例如，可以是基于支持HTML5的浏览器携带的scroll view滚动组件。进一步地，在本说明书一个或者多个实施例中，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域，具体可以包括：接收视图滚动操作对应的滚动距离，基于支持HTML5的浏览器携带的scroll view滚动组件，滚动所述预设的滚动区域；其中，所述滚动区域用于确定实现滚动操作的视图范围。
例如，在支持HTML5的浏览器应用于移动终端的场景下，如图3a所示，为视图未发生滚动时，网页顶部边界与可视区域顶部边界是对齐的；当采用基于HTML5的浏览器携带的原生scroll view滚动组件实现视图滚动操作，视图发生滚动后(如图3b所示)，原来显示在可视区域的“第一标题”滚动到顶部的不可视区域，原来位于底部的不可视区域的“第四标题”显示在可视区域中。由于原生scroll view滚动组件具有更好的兼容性，滚动运行流程，能够有效提升用户体验。
步骤S204：当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的。
例如，当用户通过支持HTML5的浏览器浏览到网页的顶部或底部(当然，也可以包括网页的左右边界线)时，也就是滚动区域的边界线与可视区域的边界线对齐时，根据预设动画方式，滚动区域边界线可以继续滚动越出可视区域。为了能够返回到当前的位置，所以需要保存预设的回弹区域的当前标记位置。
需要说明的是，在本申请实施例中所说的越出可以理解为滚动区域的边界线越过可视区域的边界线，进入到可视区域的可视范围内。
这里所说的标记位置，可以是滚动区域的顶部或底部边界线与回弹区域顶部或底部边界线对齐时的标记位置，并且该标记位置可以是一个标记作用的点或者一条标记作用的线。例如，假设以可视区域的左上角坐标作为回弹区域的原点位置，当滚动区域顶部边界线与可视区域的顶部边界线对齐时，保存回弹区域的原点位置(即，标记位置)。
步骤S206：基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域。
在实际应用中，渲染效果可以有多种，具体可根据用户需求将渲染效果设置为尺寸缩放、位置调整、模糊化、设定透明度等等。回弹区域用于辅助实现预设的渲染效果。例如，当回弹区域的位置或尺寸发生变化后，根据预设的渲染效果，使得回弹区域的下拉和回弹过程可以呈现类似橡皮筋回弹的效果。
该回弹区域的范围大小是可以根据实际需要进行定义的，一般来说，回弹区域定义范围不大于滚动区域的范围，但是不小于可视区域的范围。
基于上述步骤，根据支持HTML5的浏览器携带的原生scroll view滚动组件预设回弹区域和滚动区域，那么，利用原生scroll view滚动组件实现视图滚动操作，不需要依 赖第三方视图滚动组件或插件对用户的滚动操作进行拦截，可以有效提升视图滚动的性能，具有更好的流畅滚动的体验；进一步地，基于原生scroll view滚动组件，并利用预设的CSS3动画渲染方式，使得回弹区域实现预设的回弹效果，可以满足用户在使用移动终端时的视图下拉和视图回弹的动画体验。
在本说明书一个或者多个实施例中，当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置，具体可以包括：基于所述预设的滚动区域包含的视图内容，确定所述滚动区域的边界线；当所述滚动区域的边界线与所述可视区域边界线或者所述回弹区域边界线对齐时，获取并保存所述回弹区域的标记位置；其中，所述回弹区域用于确定实现回弹效果的视图范围。
如前文所述可知滚动区域的范围是根据视图内容确定的，具体来说，例如可以根据完全显示视图内容时所需的像素数来确定对应的滚动区域的高度，进而可以根据滚动区域的高度确定其顶部和底部边界线的位置以及滚动过的像素数(即，滚动距离)。
当滚动区域的边界线与可视区域的边界线对齐时，保存预设的回弹区域的标记位置，该标记位置可以作为回弹时的参考位置。
回弹区域除了可以用来确定回弹的标记位置外，还可以用于确定实现回弹效果的视图范围。例如，假设预设的回弹区域的范围与可视区域的范围大小相同，根据回弹区域与滚动区域之间的位置关系，当滚动区域滚动到顶部边界时，如图4所示，用于实现回弹效果的视图为当前可视区域对应的视图顶部到可视区域底部的部分；同理，当滚动区域滚动到底部边界时，如图6所示，用于实现回弹效果的视图为当前可视区域对应的视图底部到可视区域顶部的部分；上述两种情况下回弹区域分别对应不同的视图内容。因此，在实际应用中，用于实现回弹效果的视图内容是根据回弹区域与滚动区域的位置关系来确定的。
在本说明书一个或者多个实施例中，基于所述视图滚动操作对所述回弹区域实现的渲染效果，具体可以包括：基于预设的渲染方式，根据所述视图滚动操作调整所述回弹区域的位置和/或尺寸。
如前文所述，预设的渲染方式可以包括：尺寸缩放、位置调整、模糊化、设定透明度等。在实际应用中，还可以同时使用多种渲染方式，如：在实现位置调整(即，位移)的同时，也将回弹区域对应的视图透明度调整为50％透明。在实际应用中用户可以根据自己的需求进行选择，这里所列举的渲染方式只是进行举例说明，并不作为对本申请的 限制。
在本说明书一个或者多个实施例中，所述预设的渲染方式包括预设的CSS3动画方式；
基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置还原所述回弹区域，具体可以包括：
当所述预设的渲染方式实现的效果为调整所述回弹区域的位置时，根据结束所述视图滚动操作，或者所述回弹区域的移动距离达到预设的偏移量，所述回弹区域按照所述预设的CSS3动画方式还原；
当所述预设的渲染方式实现的效果为调整所述回弹区域的尺寸时，根据结束所述视图滚动操作，或者所述回弹区域的尺寸放大倍数达到预设的放大阈值，所述回弹区域按照所述预设的CSS3动画方式还原；
根据所述滚动区域与所述回弹区域之间的对应关系，所述回弹区域带动所述滚动区域还原到所述标记位置；
其中，所述标记位置包括：所述回弹区域的原点位置、基准线位置。
需要说明的是，在实际应用中，通常回弹区域与滚动区域之间具有继承关系，具体来说，滚动区域能够继承回弹区域的数据信息，该数据信息例如可以包括：标记位置或者坐标信息等等。
为了便于理解，下面以预设的渲染方式为调整回弹区域位置为例进行说明，图4为本说明书实施例提供的一种顶部边界线对齐的示意图，图5为对应于图4的一种顶部边界线下拉的示意图；图6为本说明书实施例提供的一种底部边界线对齐的示意图，图7为对应于图6的一种底部边界线下拉的示意图。当滚动区域的边界线滚动到与可视区域的边界线对齐的位置后，若该回弹区域继续基于预设CSS3动画进行滑动，如图5和图7所示，由于回弹区域与滚动区域之间存在继承关系，回弹区域进行滑动的同时，会携带滚动区域一起进行滑动。当回弹区域根据保存的标记位置进行回弹还原时，滚动区域再根据继承的回弹区域的标记位置进行还原，还原到如图4和图6所示的状态。这样，呈现给用户的效果是一直在对滚动区域对应的视图内容进行滚动操作和回弹操作，能够提升用户视觉体验效果。
在实际应用中，回弹区域进行回弹的条件可有多种。在一种实施例中，当用户发现已经滑动到所浏览网页的边界线(即，滚动区域边界线)后，用户会主动释放该视图滚 动操作，根据预设的CSS3动画方式，回弹区域携带滚动区域一起恢复到原来保存的标记位置。
在另一种实施例中，假设设定了释放回弹区域的偏移量，当用户持续滑动回弹区域超过该设定的偏移量值后，回弹区域会自动携带滚动区域一起还原到标记位置。
需要说明的是，标记位置通常可以是回弹区域的某一个点，如左上角坐标点；当然，也可以将回弹区域的顶部边界线或者底部边界线作为基准线的位置，同样可以起到标记位置的作用。
在本说明书一个或者多个实施例中，当所述滚动区域边界线未滚动越出所述可视区域边界线时，所述回弹区域相对于所述可视区域不发生移动，所述滚动区域相对于所述回弹区域和所述可视区域发生移动。
在实际应用中，滚动区域通常大于可视区域和回弹区域，回弹区域通常与可视区域大小相同。在进行视图滚动操作时，如果还没有滚动到滚动区域的顶部、底部等边界线，则只有滚动区域根据用户的视图滚动操作进行滚动，回弹区域与可视区域不发生移动。如果滚动到滚动区域的边界线后，保存回弹区域的标记位置，并且根据当前滚动区域与回弹区域之间的对应关系(如，继承关系)，回弹区域携带滚动区域一起继续滚动，此时，回弹区域相对于滚动区域不发生移动，回弹区域相对于可视区域发生移动。
根据以上所述实施例可知，基于支持HTML5的浏览器携带的原生scroll view滚动组件预设回弹区域和滚动区域；利用原生scroll view滚动组件实现视图滚动操作，不需要依赖第三方视图滚动组件或插件对用户的滚动操作进行拦截，可以有效提升视图滚动的性能，具有更好的流畅滚动的体验；进一步地，基于原生scroll view滚动组件，利用预设的CSS3动画渲染方式，使得回弹区域实现预设的回弹效果，可以满足用户使用移动终端时的视图下拉和视图回弹的动画体验。
基于同样的思路，本说明书实施例还提供一种视图滚动装置，如图8所示，包括：
接收模块801，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
标记模块802，在当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
回弹模块803，基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
在本说明书一个或者多个实施例中，所述原生滚动组件包括scroll view滚动组件；
接收模块801，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域，具体包括：
接收模块801，接收视图滚动操作对应的滚动距离，基于支持HTML5的浏览器携带的scroll view滚动组件，滚动所述预设的滚动区域；
其中，所述滚动区域用于确定实现滚动操作的视图范围。
在本说明书一个或者多个实施例中，标记模块802，在当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置，具体包括：
基于所述预设的滚动区域包含的视图内容，确定所述滚动区域的边界线；
标记模块802，在当所述滚动区域的边界线与所述可视区域边界线或者所述回弹区域边界线对齐时，获取并保存所述回弹区域的标记位置；
其中，所述回弹区域用于确定实现回弹效果的视图范围。
在本说明书一个或者多个实施例中，所述装置还包括渲染模块804，基于所述视图滚动操作对所述回弹区域实现的渲染效果，具体包括：
基于预设的渲染方式，所述渲染模块804根据所述视图滚动操作调整所述回弹区域的位置和/或尺寸。
在本说明书一个或者多个实施例中，所述预设的渲染方式为预设的CSS3动画方式；
回弹模块803，基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置还原所述回弹区域，具体包括：
当所述预设的渲染方式实现的效果为调整所述回弹区域的位置时，根据结束所述视图滚动操作，或者所述回弹区域的移动距离达到预设的偏移量，所述回弹区域按照所述预设的CSS3动画方式还原；
当所述预设的渲染方式实现的效果为调整所述回弹区域的尺寸时，根据结束所述视图滚动操作，或者所述回弹区域的尺寸放大倍数达到预设的放大阈值，所述回弹区域按照所述预设的CSS3动画方式还原；
根据所述滚动区域与所述回弹区域之间的对应关系，所述回弹区域带动所述滚动区 域还原到所述标记位置；
其中，所述标记位置包括：所述回弹区域的原点位置、基准线位置。
在本说明书一个或者多个实施例中，所述装置还包括：
当所述滚动区域边界线未滚动越出所述可视区域边界线时，所述回弹区域相对于所述可视区域不发生移动，所述滚动区域相对于所述回弹区域和所述可视区域发生移动。
根据支持HTML5的浏览器携带的原生scroll view滚动组件预设回弹区域和滚动区域；利用原生scroll view滚动组件实现视图滚动操作，不需要依赖第三方视图滚动组件或插件对用户的滚动操作进行拦截，可以有效提升视图滚动的性能，具有更好的流畅滚动的体验；进一步地，基于原生scroll view滚动组件，利用预设的CSS3动画方式，使得回弹区域实现预设的回弹效果，可以满足用户使用移动终端时的视图下拉和视图回弹的动画体验。
基于同样的思路，本说明书实施例还提供一种电子设备，包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本说明书实施例提供的装置、电子设备、非易失性计算机存储介质与方法是对应的，因此，装置、电子设备、非易失性计算机存储介质也具有与对应方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述对应装置、电子设备、非易失性计算机存储介质的有益技术效果。
在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable Gate Array，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如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)等，目前最普遍使用的是VHDL(Very-High-Speed Integrated Circuit Hardware Description Language)与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。
控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计 算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。
为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书一个或多个实施例时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
本领域内的技术人员应明白，本说明书实施例可提供为方法、系统、或计算机程序产品。因此，本说明书实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、 对象、组件、数据结构等等。也可以在分布式计算环境中实践说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
以上所述仅为本说明书实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (13)

  1. 一种视图滚动方法，包括：
    接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
    当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
    基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
    其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
  2. 如权利要求1所述的方法，所述原生滚动组件包括scroll view滚动组件；
    接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域，具体包括：
    接收视图滚动操作对应的滚动距离，基于支持HTML5的浏览器携带的scroll view滚动组件，滚动所述预设的滚动区域；
    其中，所述滚动区域用于确定实现滚动操作的视图范围。
  3. 如权利要求1所述的方法，当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置，具体包括：
    基于所述预设的滚动区域包含的视图内容，确定所述滚动区域的边界线；
    当所述滚动区域的边界线与所述可视区域边界线或者所述回弹区域边界线对齐时，获取并保存所述回弹区域的标记位置；
    其中，所述回弹区域用于确定实现回弹效果的视图范围。
  4. 如权利要求1所述的方法，基于所述视图滚动操作对所述回弹区域实现的渲染效果，具体包括：
    基于预设的渲染方式，根据所述视图滚动操作调整所述回弹区域的位置和/或尺寸。
  5. 如权利要求4所述的方法，所述预设的渲染方式为预设的CSS3动画方式；
    基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置还原所述回弹区域，具体包括：
    当所述预设的渲染方式实现的效果为调整所述回弹区域的位置时，根据结束所述视图滚动操作，或者所述回弹区域的移动距离达到预设的偏移量，所述回弹区域按照所述预设的CSS3动画方式还原；
    当所述预设的渲染方式实现的效果为调整所述回弹区域的尺寸时，根据结束所述视图滚动操作，或者所述回弹区域的尺寸放大倍数达到预设的放大阈值，所述回弹区域按照所述预设的CSS3动画方式还原；
    根据所述滚动区域与所述回弹区域之间的对应关系，所述回弹区域带动所述滚动区域还原到所述标记位置；
    其中，所述标记位置包括：所述回弹区域的原点位置、基准线位置。
  6. 如权利要求3所述的方法，所述方法还包括：
    当所述滚动区域边界线未滚动越出所述可视区域边界线时，所述回弹区域相对于所述可视区域不发生移动，所述滚动区域相对于所述回弹区域和所述可视区域发生移动。
  7. 一种视图滚动装置，包括：
    接收模块，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
    标记模块，在当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
    回弹模块，基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
    其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
  8. 如权利要求7所述的装置，所述原生滚动组件包括scroll view滚动组件；
    接收模块，接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域，具体包括：接收模块，接收视图滚动操作对应的滚动距离，基于支持HTML5的浏览器携带的scroll view滚动组件，滚动所述预设的滚动区域；其中，所述滚动区域用于确定实现滚动操作的视图范围。
  9. 如权利要求7所述的装置，所述标记模块，在当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置，具体包括：基于所述预设的滚动区域包含的视图内容，确定所述滚动区域的边界线；所述标记模块，在当所述滚动区域的边界线与所述可视区域边界线或者所述回弹区域边界线对齐时，所述标记模块获取并保存所述回弹区域的标记位置；其中，所述回弹区域用于确定实现回弹效果的视图范围。
  10. 如权利要求7所述的装置，所述装置还包括渲染模块，基于所述视图滚动操作对所述回弹区域实现的渲染效果，具体包括：基于预设的渲染方式，所述渲染模块根据所述视图滚动操作调整所述回弹区域的位置和/或尺寸。
  11. 如权利要求10所述的装置，所述预设的渲染方式为预设的CSS3动画方式；
    回弹模块，基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置还原所述回弹区域，具体包括：
    当所述预设的渲染方式实现的效果为调整所述回弹区域的位置时，所述回弹模块，根据结束所述视图滚动操作，或者所述回弹区域的移动距离达到预设的偏移量，所述回弹区域按照所述预设的CSS3动画方式还原；
    当所述预设的渲染方式实现的效果为调整所述回弹区域的尺寸时，所述回弹模块，根据结束所述视图滚动操作，或者所述回弹区域的尺寸放大倍数达到预设的放大阈值，所述回弹区域按照所述预设的CSS3动画方式还原；
    根据所述滚动区域与所述回弹区域之间的对应关系，所述回弹区域带动所述滚动区域还原到所述标记位置；
    其中，所述标记位置包括：所述回弹区域的原点位置、基准线位置。
  12. 如权利要求9所述的装置，所述装置还包括：
    当所述滚动区域边界线未滚动越出所述可视区域边界线时，所述回弹区域相对于所述可视区域不发生移动，所述滚动区域相对于所述回弹区域和所述可视区域发生移动。
  13. 一种电子设备，包括：
    至少一个处理器；以及，
    与所述至少一个处理器通信连接的存储器；其中，
    所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
    接收视图滚动操作，基于原生滚动组件滚动预设的滚动区域；
    当所述滚动区域边界线滚动到与可视区域边界线对齐时，获取预设的回弹区域的标记位置；其中，所述滚动区域边界线基于预设的滚动区域包含的视图内容确定的；
    基于所述视图滚动操作对所述回弹区域实现的渲染效果，根据所述回弹区域对应的所述标记位置，还原所述回弹区域；
    其中，所述滚动区域和所述回弹区域基于所述原生滚动组件预设得到。
PCT/CN2018/099984 2017-10-31 2018-08-10 一种视图滚动方法、装置以及电子设备 WO2019085580A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201711047598.XA CN107977150A (zh) 2017-10-31 2017-10-31 一种视图滚动方法、装置以及电子设备
CN201711047598.X 2017-10-31

Publications (1)

Publication Number Publication Date
WO2019085580A1 true WO2019085580A1 (zh) 2019-05-09

Family

ID=62012954

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/099984 WO2019085580A1 (zh) 2017-10-31 2018-08-10 一种视图滚动方法、装置以及电子设备

Country Status (3)

Country Link
CN (1) CN107977150A (zh)
TW (1) TW201918854A (zh)
WO (1) WO2019085580A1 (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107977150A (zh) * 2017-10-31 2018-05-01 阿里巴巴集团控股有限公司 一种视图滚动方法、装置以及电子设备
CN109062653B (zh) * 2018-08-20 2022-02-25 珠海市筑巢科技有限公司 长图文信息显示方法、计算机装置及计算机可读存储介质
CN111221600B (zh) * 2018-11-26 2023-05-23 福建省天奕网络科技有限公司 一种LayaAir引擎滚动的管理方法及终端
CN110099162B (zh) * 2019-03-18 2021-04-30 努比亚技术有限公司 一种页面显示处理方法及穿戴式设备
CN109976609A (zh) * 2019-03-18 2019-07-05 努比亚技术有限公司 滑动操作响应方法、可穿戴设备以及计算机可读存储介质
CN111506242A (zh) * 2020-05-28 2020-08-07 支付宝(杭州)信息技术有限公司 实现页面视图的弹性滚动效果的方法及装置和电子设备
CN111782097A (zh) * 2020-06-30 2020-10-16 北京达佳互联信息技术有限公司 图像资源切换方法及装置
CN112882636B (zh) * 2021-02-18 2022-05-17 上海哔哩哔哩科技有限公司 图片处理方法及装置
CN113157166B (zh) * 2021-05-20 2022-03-29 读书郎教育科技有限公司 一种智能终端实现自适应笔记的方法、存储介质及电子设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101578578A (zh) * 2007-01-07 2009-11-11 苹果公司 用于滚动操作的应用编程接口
CN103777868A (zh) * 2012-10-23 2014-05-07 福建星网视易信息系统有限公司 一种以页面为单位且具有后台加载和缓存逻辑的划屏方法
CN107219983A (zh) * 2017-06-20 2017-09-29 武汉斗鱼网络科技有限公司 列表显示方法及装置
CN107977150A (zh) * 2017-10-31 2018-05-01 阿里巴巴集团控股有限公司 一种视图滚动方法、装置以及电子设备

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8082518B2 (en) * 2008-08-29 2011-12-20 Microsoft Corporation Scrollable area multi-scale viewing
US8624925B2 (en) * 2009-10-16 2014-01-07 Qualcomm Incorporated Content boundary signaling techniques
US9310988B2 (en) * 2013-09-10 2016-04-12 Google Inc. Scroll end effects for websites and content
CN106708478B (zh) * 2015-07-21 2020-06-05 阿里巴巴集团控股有限公司 滚动视图显示方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101578578A (zh) * 2007-01-07 2009-11-11 苹果公司 用于滚动操作的应用编程接口
CN103777868A (zh) * 2012-10-23 2014-05-07 福建星网视易信息系统有限公司 一种以页面为单位且具有后台加载和缓存逻辑的划屏方法
CN107219983A (zh) * 2017-06-20 2017-09-29 武汉斗鱼网络科技有限公司 列表显示方法及装置
CN107977150A (zh) * 2017-10-31 2018-05-01 阿里巴巴集团控股有限公司 一种视图滚动方法、装置以及电子设备

Also Published As

Publication number Publication date
CN107977150A (zh) 2018-05-01
TW201918854A (zh) 2019-05-16

Similar Documents

Publication Publication Date Title
WO2019085580A1 (zh) 一种视图滚动方法、装置以及电子设备
CN108228050B (zh) 一种图片缩放方法、装置以及电子设备
US9015618B2 (en) Methods and apparatus for processing application windows
US9092121B2 (en) Copy and paste experience
US20180052579A1 (en) Provision of extended content on a flexible display
US20180011818A1 (en) Webpage Update Method And Apparatus
CN107818008B (zh) 页面加载方法及装置
WO2016110202A1 (zh) 一种显示页面的方法、客户端及设备
WO2019085653A1 (zh) 页面信息显示方法、装置和客户端
CN107977137B (zh) 应用页面的对象展示方法、装置和设备
US20150286342A1 (en) System and method for displaying application data through tile objects
TWI691206B (zh) 浮水印添加處理方法、裝置及客戶端
US20170249076A1 (en) User interfaces for presenting content items to users
WO2017101390A1 (zh) 一种图片显示方法及装置
CN106339149A (zh) 一种显示控制方法、装置及电子设备
US8745525B1 (en) Presenting graphical windows on a device
CN110851058A (zh) 一种页面虚拟滚动方法、装置及设备
CN106874023B (zh) 动态页面加载方法和装置
CN110647704B (zh) 一种页面更新方法、装置及设备
CN110262749B (zh) 一种网页操作方法、装置、容器、设备及介质
CN113672323A (zh) 一种页面展示的方法及装置
CN114115643A (zh) 一种组件显示方法、装置、电子设备和可读介质
CN113190321A (zh) 一种用于应用程序页面上拉刷新的方法及设备
CN110909274A (zh) 页面浏览方法、装置及电子设备
CN108446152B (zh) 页面显示方法及装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18874147

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18874147

Country of ref document: EP

Kind code of ref document: A1