CN113918258B - 页面滚动处理方法、装置、终端以及存储介质 - Google Patents

页面滚动处理方法、装置、终端以及存储介质 Download PDF

Info

Publication number
CN113918258B
CN113918258B CN202111166928.3A CN202111166928A CN113918258B CN 113918258 B CN113918258 B CN 113918258B CN 202111166928 A CN202111166928 A CN 202111166928A CN 113918258 B CN113918258 B CN 113918258B
Authority
CN
China
Prior art keywords
rolling
scrolling
page
component
offset
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202111166928.3A
Other languages
English (en)
Other versions
CN113918258A (zh
Inventor
李�杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202111166928.3A priority Critical patent/CN113918258B/zh
Publication of CN113918258A publication Critical patent/CN113918258A/zh
Application granted granted Critical
Publication of CN113918258B publication Critical patent/CN113918258B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • 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/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • 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
    • 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
    • G06F3/04855—Interaction with scrollbars
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请关于一种页面滚动处理方法、装置、终端以及存储介质，涉及计算机技术领域。应用于运行有小程序的终端，所述方法包括：通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容；通过渲染层线程执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界，第一滚动处理包括：获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。本申请避免了实现过程中存在的逻辑层和渲染层之间的数据传输，减少了数据传输时长，降低了出现滚动卡顿的概率，提高了滚动显示效果。

Description

页面滚动处理方法、装置、终端以及存储介质
技术领域
本公开涉及计算机技术领域，尤其涉及页面滚动处理方法、装置、终端以及存储介质。
背景技术
小程序是一种依赖于宿主程序的运行的程序，用户可以通过在所安装的宿主程序中添加各种各样的小程序来体验不同小程序所带来的服务。目前小程序的运行环境包括渲染层和逻辑层，渲染层和逻辑层由两个不同的线程管理。渲染层用于渲染页面结构，逻辑层用于页面的逻辑处理和数据请求等。渲染层和逻辑层分别由两个线程管理，二者之间通过宿主程序的原生层进行通信。例如，宿主程序为微信客户端，添加于微信上的小程序，其渲染层和逻辑层之间需要通过微信客户端进行中转通信。
目前实现页面滚动处理方法为：将待滚动组件设置于Scroll-View组件(一种视图容器)内，逻辑层线程通过定时器周期性调用setData方法改变Scroll-View组件的scrollTop值，并将改变后的scrollTop值传输至渲染层线程，渲染层线程将改变位置后的Scroll-View组件重新渲染显示。这样通过调整Scroll-View组件与待滚动组件的顶部之间的距离，使得Scroll-View组件显示待滚动组件不同位置的内容，从而实现待滚动组件的滚动显示效果。
但是，目前的滚动显示方法的实现过程中会存在逻辑层和渲染层之间的数据传输，而二者之间需要通过宿主程序的原生层实现数据中转。这就导致滚动显示的实现过程中数据传输耗时较长，容易造成滚动卡顿，使得滚动显示效果较差。
发明内容
本公开提供一种页面滚动处理方法、装置、终端以及存储介质，以至少解决相关技术中滚动显示效果较差的问题。本公开的技术方案如下：
根据本公开实施例的第一方面，提供一种页面滚动处理方法，所述方法包括：
通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容，所述页面是基于所述滚动视图组件以及与所述滚动视图组件具有关联层级关系的页面内容组件生成，所述页面内容组件在滚动方向上的长度大于所述滚动视图组件在所述滚动方向上的长度；
通过所述渲染层线程执行第一滚动处理，直至所述滚动视图组件沿所述滚动方向移动至所述页面内容组件的边界，所述第一滚动处理包括：
获取所述滚动视图组件的设定偏移量，
控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，
在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，所述获取所述滚动视图组件的设定偏移量，包括：
获取终端的当前时间、所述滚动视图组件的总偏移量、滚动距离以及设定滚动时长，所述滚动距离为当前所述滚动视图组件与所述边界之间的距离，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离；
将所述当前时间、所述总偏移量、所述滚动距离以及所述设定滚动时长代入设定动画缓动函数进行计算，得到所述设定偏移量。
在一种可能实现方式中，所述控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，包括：
基于所述设定偏移量，更新所述滚动视图组件的变形属性中与所述滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与所述设定偏移量之和。
在一种可能实现方式中，所述方法还包括：
在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量；
通过所述渲染层线程控制所述滚动视图组件沿所述滚动方向移动所述触控偏移量；
通过所述渲染层线程在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，所述在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量，包括：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件在所述滚动方向上的第一当前位置；
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第二当前位置；
通过所述渲染层线程基于所述第一当前位置以及所述第二当前位置，确定所述触控偏移量。
在一种可能实现方式中，所述方法还包括：
在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量以及所述滚动视图组件的惯性滚动距离；
通过所述渲染层线程将所述触控偏移量和所述惯性滚动距离之和，确定为滚动总距离；
通过所述渲染层线程执行第二滚动处理，直至滚动总距离为零，所述第二滚动处理包括：
将终端的当前时间、所述滚动视图组件的总偏移量、所述滚动视图组件的滚动总距离、设定惯性滚动时长代入设定动画缓动函数进行计算，得到惯性滚动偏移量，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离，
控制所述滚动视图组件沿所述滚动方向移动所述惯性滚动偏移量，
在所述页面更新显示所述页面内容组件位于移动后的滚动视图组件中的部分内容，
更新所述滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与所述惯性滚动偏移量的差值。
在一种可能实现方式中，所述在检测到触控件触发的触摸事件时，通过所述渲染层线程获取所述滚动视图组件的惯性滚动距离，包括：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程获取所述终端的第一当前时间；
在检测到触控件触发的触摸结束事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第三当前位置以及所述终端的第二当前时间；
通过所述渲染层线程基于所述第一当前位置、所述第三当前位置、所述第一当前时间以及所述第二当前时间，得到所述滚动视图组件的惯性滑动速度；
通过所述渲染层线程将获取的所述设定惯性滚动时长与所述惯性滑动速度的乘积，确定为所述惯性滚动距离。
在一种可能实现方式中，所述方法还包括：
当所述滚动总距离小于实际可滚动距离时，通过所述渲染层线程更新所述滚动总距离，使得更新后的滚动总距离为所述实际可滚动距离，所述实际可滚动距离为当前所述滚动视图组件与所述边界之间的距离。
在一种可能实现方式中，所述方法还包括：
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述滚动视图组件相对所述页面内容组件的当前位置；
当确定所述当前位置为所述边界所在位置时，通过所述渲染层线程执行所述页面相应的滚动指令。
在一种可能实现方式中，所述页面内容组件与所述滚动视图组件具有关联层级关系，包括：所述页面内容组件为所述滚动视图组件的子组件。
根据本公开实施例的第二方面，提供一种页面滚动处理装置，所述装置包括：
显示模块，用于通过当前运行的小程序的渲染层线程在所述小程序的页面显示页面内容组件位于滚动视图组件中的部分内容，所述页面是基于所述滚动视图组件以及与所述滚动视图组件具有关联层级关系的页面内容组件生成，所述页面内容组件在滚动方向上的长度大于所述滚动视图组件在所述滚动方向上的长度；
滚动处理模块，用于通过所述渲染层线程执行第一滚动处理，直至所述滚动视图组件沿所述滚动方向移动至所述页面内容组件的边界，所述第一滚动处理包括：
获取所述滚动视图组件的设定偏移量，
控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，
在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，所述滚动处理模块，还用于：
获取终端的当前时间、所述滚动视图组件的总偏移量、滚动距离以及设定滚动时长，所述滚动距离为当前所述滚动视图组件与所述边界之间的距离，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离；
将所述当前时间、所述总偏移量、所述滚动距离以及所述设定滚动时长代入设定动画缓动函数进行计算，得到所述设定偏移量。
在一种可能实现方式中，所述滚动处理模块，还用于：
基于所述设定偏移量，更新所述滚动视图组件的变形属性中与所述滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与所述设定偏移量之和。
在一种可能实现方式中，所述装置还包括：
获取模块，用于在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量；
控制模块，用于通过所述渲染层线程控制所述滚动视图组件沿所述滚动方向移动所述触控偏移量；
所述显示模块，还用于通过所述渲染层线程在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，所述获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件在所述滚动方向上的第一当前位置；
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第二当前位置；
通过所述渲染层线程基于所述第一当前位置以及所述第二当前位置，确定所述触控偏移量。
在一种可能实现方式中，所述获取模块，还用于在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量以及所述滚动视图组件的惯性滚动距离；
所述装置还包括：确定模块，用于通过所述渲染层线程将所述触控偏移量和所述惯性滚动距离之和，确定为滚动总距离；
所述滚动处理模块，还用于：通过所述渲染层线程执行第二滚动处理，直至滚动总距离为零，所述第二滚动处理包括：
将终端的当前时间、所述滚动视图组件的总偏移量、所述滚动视图组件的滚动总距离、设定惯性滚动时长代入设定动画缓动函数进行计算，得到惯性滚动偏移量，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离，
控制所述滚动视图组件沿所述滚动方向移动所述惯性滚动偏移量，
在所述页面更新显示所述页面内容组件位于移动后的滚动视图组件中的部分内容，
更新所述滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与所述惯性滚动偏移量的差值。
在一种可能实现方式中，所述获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程获取所述终端的第一当前时间；
在检测到触控件触发的触摸结束事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第三当前位置以及所述终端的第二当前时间；
通过所述渲染层线程基于所述第一当前位置、所述第三当前位置、所述第一当前时间以及所述第二当前时间，得到所述滚动视图组件的惯性滑动速度；
通过所述渲染层线程将获取的所述设定惯性滚动时长与所述惯性滑动速度的乘积，确定为所述惯性滚动距离。
在一种可能实现方式中，所述装置还包括：
更新模块，用于当所述滚动总距离小于实际可滚动距离时，通过所述渲染层线程更新所述滚动总距离，使得更新后的滚动总距离为所述实际可滚动距离，所述实际可滚动距离为当前所述滚动视图组件与所述边界之间的距离。
在一种可能实现方式中，所述获取模块，还用于在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述滚动视图组件相对所述页面内容组件的当前位置；
所述装置还包括：执行模块，用于当确定所述当前位置为所述边界所在位置时，通过所述渲染层线程执行所述页面相应的滚动指令。
在一种可能实现方式中，所述页面内容组件与所述滚动视图组件具有关联层级关系，包括：所述页面内容组件为所述滚动视图组件的子组件。
根据本公开实施例的第三方面，提供了一种终端，包括：
一个或多个处理器；
用于存储所述一个或多个处理器可执行指令的一个或多个存储器；
其中，所述一个或多个处理器被配置为执行上述任一方面的任一种可能实现方式所述的页面滚动处理方法。
根据本公开实施例的第四方面，提供了一种非临时性计算机可读存储介质，当所述存储介质中的指令由终端的处理器执行时，使得终端能够执行上述第一方面的任一种可能实现方式所述的页面滚动处理方法。
根据本公开实施例的第五方面，提供一种应用程序产品，当所述应用程序产品中的指令由终端的处理器执行时，使得终端能够执行上述第一方面的任一种可能实现方式所述的页面滚动处理方法。
本公开的实施例提供的技术方案至少带来以下有益效果：
本申请实施例中，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。并通过渲染层线程执行第一滚动处理。该第一滚动处理包括获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。该技术方案中，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度。通过渲染层线程可以沿滚动方向持续移动滚动视图组件，以持续改变滚动视图组件与其具有关联层级关系的页面内容组件的相对位置，从而使得在页面上显示页面内容组件在滚动方向上不同位置的内容，实现页面内容组件的自动滚动效果。并且由于该技术方案是通过渲染层线程实现的，无需逻辑层线程参与。因此相较于相关技术，避免了实现过程中存在的逻辑层和渲染层之间的数据传输，减少了数据传输时长，降低了出现滚动卡顿的概率，提高了滚动显示效果。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
图1是根据一示例性实施例示出的一种终端的结构框图。
图2是根据一示例性实施例示出的一种页面滚动处理方法的流程图。
图3是根据一示例性实施例示出的一种设定偏移量确定方法的流程图。
图4是根据一示例性实施例示出的另一种页面滚动处理方法的流程图。
图5是根据一示例性实施例示出的一种触控偏移量以及惯性滚动距离确定方法的流程图。
图6是根据一示例性实施例示出的一种页面滚动处理装置的框图。
图7是根据一示例性实施例示出的一种终端的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
本申请实施例提供了一种页面滚动处理方法，该方法可以应用于运行有小程序的终端，则终端显示的页面可以指的是终端当前运行的小程序的页面。当然，本申请实施例提供的页面滚动处理方法也可以应用于运行其他类型的应用程序的终端，则终端显示的页面可以指的是终端当前运行的程序的页面。可选的，终端可以是智能手机、平板电脑、笔记本电脑或者台式电脑等。本申请实施例以页面滚动处理方法应用于运行有小程序的终端，即终端显示的页面可以指的是终端当前运行的小程序的页面为例进行说明。
图1是根据一示例性实施例示出的一种终端的结构框图。如图1所示，终端可以安装并运行有宿主程序101和小程序102。该宿主程序101可以是即时通讯程序(例如，微信等)、社交程序、支付程序中的任意一种。本申请中以宿主程序是即时通讯程序来举例说明。小程序是依赖宿主程序101运行的程序，该小程序可以为多个，本申请实施例中以一个小程序为例进行说明。
小程序102的运行环境可以包括渲染层1021和逻辑层1022。渲染层1021和逻辑层1022由两个不同的线程管理。渲染层1021线程可以用于渲染小程序页面视图。逻辑层1022线程可以用于处理小程序以及小程序页面的数据逻辑处理。二者之间通过宿主程序101包括的原生层1011进行中转通信。其中，渲染层1021可以运行有WXML(WeiXin MarkupLanguage，框架设计的一套标签语言)、WXSS(WeiXin Style Sheets是一套样式语言)以及WXS(WeiXin Scrip，小程序的一套脚本语言)，WXS结合WXML可以构建出页面的结构。逻辑层1022可以运行有JavaScript(JS，一种编程语言)。可选的，本申请实施例提供的页面滚动处理方法可以基于WXS实现。
图2是根据一示例性实施例示出的一种页面滚动处理方法的流程图，如图2所示，该页面滚动处理方法可以用于图1所示的终端，所述方法包括以下步骤。
在步骤S201中，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。
本申请实施例以页面滚动处理方法应用于运行有小程序的终端为例进行说明，则终端通过渲染层线程显示的页面为小程序的页面。
可选的，终端可以在接收到针对小程序标识的小程序触发操作后，生成小程序触发指令。响应于该小程序触发指令，运行小程序。其中，小程序标识可以为小程序的图标标识或者文字标识等。小程序触发操作可以包括但不限于点击操作、长按操作以及滑动操作等。示例的，用户可以采用鼠标或者诸如手指、触控笔等触控件点击小程序标识。使得终端可以接收到针对小程序标识的小程序触发操作，响应于生成的小程序触发指令，运行小程序。
其中，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成。页面内容组件用于容纳待滚动的内容，也即是页面内容组件用于容纳整个页面的内容。滚动视图组件又称视图容器，其用于显示页面内容组件位于滚动视图组件中的部分内容。滚动视图组件与页面内容组件具有关联层级关系可以理解为：页面内容组件为滚动视图组件的子组件。其中，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度。
本申请实施例中，页面内容组件自身不滚动，滚动视图组件相对页面内容组件的初始位置可以为页面内容组件的一端边界位置。通过滚动视图组件沿滚动方向从页面内容组件的一端移动至另一端，以使得滚动视图组件可以显示页面内容组件在滚动方向上不同位置处的内容，实现页面内容组件的视觉滚动效果。
需要说明的，本申请实施例涉及的滚动方向指的是页面内容组件在视觉滚动效果中的滚动方向，该滚动方向与滚动视图组件的移动方向相同。例如，若页面内容组件在视觉滚动效果中，需要沿页面的高度所在方向，即页面垂直方向滚动，则滚动视图组件的移动方向也为滚动视图组件的高度所在方向。例如可以理解为，用户手持竖屏手机，页面内容组件在视觉滚动效果上向下滚动。则滚动视图组件的移动方向也向下。
示例的，滚动视图组件可以为View组件。页面内容组件可以为图片组件。滚动视图组件的高度小于页面内容组件的高度，页面内容组件的滚动方向为页面内容组件的高度所在方向，即页面垂直方向。滚动视图组件的样式设定中，若滚动视图组件相对于页面内容组件的初始位置可以为页面内容组件的顶部边界位置，即滚动视图组件的上边界与页面内容组件的上边界重叠。则页面内容组件的滚动方向为页面内容组件由顶部边界指向底部边界的方向。若滚动视图组件相对于页面内容组件的初始位置可以为页面内容组件的底部边界位置，即滚动视图组件的下边界与页面内容组件的下边界重叠。则页面内容组件的滚动方向为页面内容组件由底部边界指向顶部边界的方向。
本申请在实际应用中，小程序运行后，小程序的渲染层线程可以调用小程序页面中的滚动视图组件和页面内容组件，并传入组件(滚动视图组件和页面内容组件的统称)的样式信息，以加载组件。在组件加载完成时，触发设置改变事件(即prop-change事件)。小程序的渲染层线程响应于prop-change事件，初始化组件样式信息中组件的位置数据。以便于后续执行第一滚动处理，实现页面内容组件的自动滚动。
在步骤S202中，通过渲染层线程执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界。
其中，第一滚动处理包括：获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。
可选的，终端可以通过渲染层线程，周期性地执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界。示例的，终端可以通过渲染层线程设置定时器。通过定时器周期性触发执行第一滚动处理，并在确定滚动视图组件沿滚动方向移动至页面内容组件的边界时，停止执行第一滚动处理。或者，终端通过渲染层线程可以采用requestAnimationFrame方法调用设定函数，该设定函数被调用时用于执行第一滚动处理，以及在滚动视图组件沿滚动方法未移动至页面内容组件的边界时，采用requestAnimationFrame方法调用该设定函数本身。requestAnimationFrame方法用于请求在设定时长后调用设定函数。其中，requestAnimationFrame方法调用设定函数的频率可以为每秒60次，即设定时长为16毫秒(ms)。
本申请实施例中，终端通过渲染层线程执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界的过程可以包括：
终端通过渲染层线程判断滚动视图组件的总偏移量与滚动视图组件在滚动方向上的长度之和，与页面内容组件在滚动方向上的长度是否相等。若否，执行第一滚动处理，并更新总偏移量，使得更新后的总偏移量为更新前的总偏移量与设定偏移量之和，即更新后的总偏移量为设定偏移量与第一滚动处理循环执行次数的乘积。若是，停止执行第一滚动处理，结束滚动显示方法。
其中，滚动视图组件的总偏移量指的是滚动视图组件在所有第一滚动处理中，移动的设定偏移量之和。若滚动方向为页面垂直方向，则滚动视图组件在滚动方向上的长度为滚动视图组件的高度，类似的，页面内容组件在滚动方向上的长度为页面内容组件的高度。类似的，页面内容组件在滚动方向上的长度为页面内容组件的宽度。
示例的，渲染层线程可以通过记录滚动视图组件在每次第一滚动处理中移动的设定偏移量，以得到滚动视图组件的总偏移量。获取滚动视图组件的样式信息，得到滚动视图组件在滚动方向上的长度。获取页面内容组件的样式信息，得到页面内容组件在滚动方向上的长度。比较总偏移量与滚动视图组件在滚动方向上的长度之和，与页面内容组件在滚动方向上的长度的大小。若前者小于后者，表明滚动视图组件沿滚动方向未移动至页面内容组件的边界，则执行第一滚动处理，并更新总偏移量。若前者大于或者等于后者，表明滚动视图组件沿滚动方向移动至页面内容组件的边界，则停止执行第一滚动处理，结束滚动显示方法。
又一示例的，渲染层线程可以采用requestAnimationFrame方法调用设定函数。该设定函数被调用时用于执行第一滚动处理，并在执行结束第一滚动处理后，判断滚动视图组件的总偏移量与滚动视图组件在滚动方向上的长度之和，与页面内容组件在滚动方向上的长度是否相等。若否，则采用requestAnimationFrame方法调用该设定函数本身。若是，结束调用设定函数。
本申请实施例中，第一滚动处理包括：获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。
可选的，设定偏移量可以为预先存储的常量。或者设定偏移量也可以为变量。由于终端通过渲染层线程可以设置滚动视图组件在移动设定偏移量的过程中移动运行曲线，以实现滚动视图组件呈一定各速率的移动动画效果。因此，多次执行第一滚动处理中，获取的多个设定偏移量可以不同。该多个设定偏移量为呈线性或者非线性变换。
示例的，如图3所示，终端通过渲染层线程获取滚动视图组件的设定偏移量的过程可以包括以下步骤S301和步骤S302。
在步骤S301中，获取终端的当前时间、滚动视图组件的总偏移量、滚动距离以及设定滚动时长。
本申请实施例中，滚动距离为当前滚动视图组件与页面内容组件的边界之间的距离，即当前滚动视图组件与页面内容组件沿滚动方向的一侧边界之间的距离。也可以理解为：当前滚动视图组件沿滚动方向的一侧边界与页面内容组件沿滚动方向的一侧边界之间的距离。滚动视图组件的总偏移量为滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离。设定滚动时长为开发人员根据实际情况设定的滚动视图组件沿滚动方向从页面内容组件的一端移动至另一端的时长。例如，设定滚动时长为固定5秒(s)。
可选的，终端通过渲染层线程可以采用getDate方法获取终端的当前时间戳，确定当前时间。该渲染层线程可以通过记录滚动视图组件在每次已执行第一滚动处理中移动的设定偏移量，以得到滚动视图组件的当前总偏移量。该渲染层线程还可以获取页面内容组件沿滚动方向的第一长度以及滚动视图组件沿滚动方向的第二长度，并计算第一长度与，第二长度与当前设定偏移量的之和的差值，得到滚动距离。该渲染层线程获取预先存储的设定滚动时长。
在步骤S302中，将终端的当前时间、滚动视图组件的总偏移量、滚动距离以及设定滚动时长代入设定动画缓动函数进行计算，得到设定偏移量。
可选的，动画缓动函数可以包括linear匀速缓动函数、easeIn缓动函数以及easeOut缓动函数等。其中，linear匀速缓动函数为function Linear(t,b,c,d){return(c*t)/d+b；}。easeIn缓动函数为function easeIn(t,b,c,d){return c*(t/＝d)*t*t+b；}。easeOut缓动函数为function easeOut(t,b,c,d){return-c*(t/＝d)*(t-2)+b；}。
每个动画缓动函数均具有四个参数。该四个参数分别为当前时间(current time)t、初始值(beginning value)b、变化量(change in value)c以及持续时间(duration)d。当前时间t表示动画执行的初始时间。初始值b表示动画的初始位置。变化量c表示动画执行总距离。持续时间d表示动画总执行时间。本申请实施例中，终端的当前时间为当前时间t；滚动视图组件相对待滚动子组价的当前位置为初始值b；滚动距离为变化量c；设定滚动时长为持续时间d。
可选的，终端通过渲染层线程控制滚动视图组件沿滚动方向移动设定偏移量的过程可以包括：终端通过渲染层线程基于设定偏移量，更新滚动视图组件的变形属性(即transfrom属性)中与滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与设定偏移量之和。
本申请实施例中，渲染层线程可以通过调用用于设置组件样式的setStyle接口，更新滚动视图组件的transfrom属性中与滚动方向对应的属性值，以使得滚动视图组件沿滚动方向移动。其中，transfrom属性包括与页面垂直方向对应的属性值translateY，以及与页面水平方向对应的属性值translateX。当更新后的与页面垂直方向对应的属性值translateY大于0时，滚动视图组件向上移动设定偏移量。反之，当更新后的与页面垂直方向对应的属性值translateY小于0时，滚动视图组件向下移动设定偏移量。当更新后的与页面垂直方向对应的属性值translateX大于0时，滚动视图组件向右移动设定偏移量。反之，当更新后的与页面垂直方向对应的属性值translateX小于0时，滚动视图组件向左移动设定偏移量。
综上所述，本申请实施例提供的一种页面滚动处理方法，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。并通过渲染层线程执行第一滚动处理。该第一滚动处理包括获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。该技术方案中，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度。通过渲染层线程可以沿滚动方向持续移动滚动视图组件，以持续改变滚动视图组件与其具有关联层级关系的页面内容组件的相对位置，从而使得在页面上显示页面内容组件在滚动方向上不同位置的内容，实现页面内容组件的自动滚动效果。并且由于该技术方案是通过渲染层线程实现的，无需逻辑层线程参与。因此相较于相关技术，避免了实现过程中存在的逻辑层和渲染层之间的数据传输，减少了数据传输时长，降低了出现滚动卡顿的概率，提高了滚动显示效果。
图4是根据一示例性实施例示出的一种页面滚动处理方法的流程图，如图4所示，该页面滚动处理方法可以用于图1所示的终端中，所述方法包括以下步骤。
在步骤S401中，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。
该步骤的解释和实现方式可以参考上述步骤S201的解释和实现方式，本申请实施例中对此不做赘述。
在步骤S402中，通过渲染层线程执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界。
其中，第一滚动处理包括：获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。该步骤的解释和实现方式可以参考上述步骤S202的解释和实现方式，本申请实施例中对此不做赘述。
本申请实施例中，在检测到触控件触发的触摸事件时，终端通过渲染层线程可以停止执行第一滚动处理，从而基于触摸事件实现不同的页面内容组件的滚动效果。其中，触摸事件可以包括触摸开始事件(即touchstart触摸事件)、触摸移动事件(即touchmove触摸事件)以及触摸结束事件(即touchend触摸事件)。在触控件触摸到页面时会触发touchstart触摸事件。在触摸件在页面上滑动时会触发touchmove触摸事件。在触摸件离开页面时会触发touchend触摸事件。
在第一种可选的实现方式中，在执行完成步骤S402之后，所述方法还包括：
在步骤S403A中，在检测到触控件触发的触摸事件时，通过渲染层线程停止执行第一滚动处理，获取触控件的触控偏移量以及滚动视图组件的惯性滚动距离。
可选的，如图5所示，终端在检测到触控件触发的触摸事件时，通过渲染层线程可以停止执行第一滚动处理，获取触控件的触控偏移量以及滚动视图组件的惯性滚动距离的过程可以包括下述步骤S501至步骤S506。
在步骤S501中，在检测到触控件触发的触摸开始事件时，通过渲染层线程停止执行第一滚动处理，获取触控件在滚动方向上的第一当前位置以及终端的第一当前时间。
在触控件触摸到页面时，可以使得终端通过渲染层线程检测到触控件触发的touchstart触摸事件。此时终端通过渲染层线程停止执行第一滚动处理，获取触控件在滚动方向上的第一当前位置以及终端的第一当前时间。
可选的，若终端通过渲染层线程通过定时器周期性触发执行第一滚动处理，则通过渲染层线程停止执行第一滚动处理的过程可以包括：控制定时器停止计时，以停止执行第一滚动处理。若终端通过渲染层线程采用requestAnimationFrame方法调用设定函数的方式周期性地执行第一滚动处理，则上述设定函数被调用时所执行的步骤可以变为：执行第一滚动处理，以及在滚动视图组件沿滚动方法未移动至页面内容组件的边界，且自动滚动标识处于有效状态时，采用requestAnimationFrame方法调用该设定函数本身。基于此，通过渲染层线程停止执行第一滚动处理的过程可以包括：更新自动滚动标识，使得更新后的自动滚动标识处于无效状态。
本申请实施例中，终端通过渲染层线程可以采用getDate方法获取终端的当前时间戳，确定第一当前时间。该渲染层线程可以获取touchstart触摸事件对应的触控列表。从该触控列表中获取触控件相对于浏览器窗口中滚动方向上的坐标值，该坐标值即为第一当前位置。
在步骤S502中，在检测到触控件触发的触摸移动事件时，通过渲染层线程获取触控件在滚动方向上的第二当前位置。
本申请实施例中，终端通过渲染层线程可以获取touchmove触摸事件对应的触控列表。从该触控列表中获取触控件相对于浏览器窗口中滚动方向上的坐标值，该坐标值即为第二当前位置。
在步骤S503中，通过渲染层线程基于第一当前位置以及第二当前位置，确定触控偏移量。
可选的，触控件在页面上滑动的过程中，可以使得终端通过渲染层线程检测到至少一个触控件触发的touchmove触摸事件。
当仅检测到一个touchmove触摸事件时，终端通过渲染层线程基于第一当前位置以及第二当前位置，确定触控偏移量的过程可以包括：终端通过渲染层线程获取第二当前位置中滚动方向上的坐标值与第一当前位置中滚动方向上的坐标值的差值，将该差值确定为触控偏移量。示例的，假设滚动方向为页面垂直方向。终端通过渲染层线程获取第二当前位置中Y坐标值与第一当前位置中Y坐标值的差值，该差值即为触控偏移量。
当依次检测到多个touchmove触摸事件时，终端通过渲染层线程基于第一当前位置以及第二当前位置，确定触控偏移量的过程可以包括：终端通过渲染层线程基于第一当前位置与检测到的多个touchmove触摸事件对应的第二当前位置，确定每个touchmove触摸事件对应的触控偏移量。
在步骤S504中，在检测到触控件触发的触摸结束事件时，通过渲染层线程获取触控件在滚动方向上的第三当前位置以及终端的第二当前时间。
在触控件离开页面时，可以使得终端通过渲染层线程检测到触控件触发的touchend触摸事件。此时终端通过渲染层线程可以获取触控件在滚动方向上的第三当前位置以及终端的第二当前时间。
本申请实施例中，终端通过渲染层线程可以采用getDate方法获取终端的当前时间戳，确定第二当前时间。该渲染层线程可以获取touchend触摸事件对应的触控列表。从该触控列表中获取触控件相对于浏览器窗口中滚动方向上的坐标值，该坐标值即为第三当前位置。
在步骤S505中，通过渲染层线程基于第一当前位置、第三当前位置、第一当前时间以及第二当前时间，得到滚动视图组件的惯性滑动速度。
本申请实施例中，终端通过渲染层线程基于第一当前位置、第三当前位置、第一当前时间、第二当前时间以及速度计算公式，得到滚动视图组件的惯性滑动速度。其中，速度计算公式满足：V＝(S1–S3)/(T1–T2)。V为滚动视图组件的惯性滑动速度，S1为第一当前位置，S3为第三当前位置，T1为第一当前时间以及T2为第二当前时间。
在步骤S506中，通过渲染层线程将获取的设定惯性滚动时长与惯性滑动速度的乘积，确定为惯性滚动距离。
本申请实施例中，设定惯性滚动时长可以是开发人员根据实际情况预先设定的。例如，设定惯性滚动时长为200ms。
在步骤S404A中，通过渲染层线程将触控偏移量和惯性滚动距离之和，确定为滚动总距离。
在步骤S405A中，通过渲染层线程判断滚动总距离是否小于实际可滚动距离。若是，执行步骤S406A；若否，执行步骤S407A。
本申请实施例中，实际可滚动距离为当前滚动视图组件与页面内容组件沿滚动方向的一侧边界之间的距离。终端通过渲染层线程对当前滚动视图组件的总偏移量以及滚动视图组件沿滚动方向的长度进行求和计算。获取页面内容组件沿滚动方向的长度与求和计算结果的差值，将该差值确定为实际可滚动距离。判断惯性滚动距离与实际可滚动距离的大小。当惯性滚动距离大于实际可滚动距离时，表明滚动视图组件无法移动惯性滚动距离，则通过渲染层线程更新惯性滚动距离，使得更新后的惯性滚动距离为实际可滚动距离。
在步骤S406A中，通过渲染层线程更新滚动总距离，使得更新后的滚动总距离为实际可滚动距离。执行步骤S407。
终端通过渲染层线程将惯性滚动距离更新为实际可滚动距离。
在步骤S407A中，通过渲染层线程执行第二滚动处理，直至滚动总距离为零。
其中，第二滚动处理包括：将终端的当前时间、滚动视图组件的总偏移量、滚动总距离、设定惯性滚动时长代入设定动画缓动函数，得到惯性滚动偏移量，滚动视图组件的总偏移量。控制滚动视图组件沿滚动方向移动惯性滚动偏移量。在页面更新显示页面内容组件位于移动惯性滚动偏移量后的滚动视图组件中的部分内容。更新滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与惯性滚动偏移量的差值。
该步骤的解释和实现方法可以参考上述步骤S301、步骤S302以及步骤S202的解释和实现方式，本申请实施例对此不做赘述。本申请实施例中通过第一种可选的实现方式，使得页面内容组件在跟随触控件移动的效果基础上，增加了页面内容组件的惯性移动效果，提高用户体验。
在第二种可选的实现方式中，在执行完成步骤S402之后，所述方法还包括：
在步骤S403B中，在检测到触控件触发的触摸事件时，通过渲染层线程停止执行第一滚动处理，获取触控件的触控偏移量。
本申请实施例中，终端在检测到触控件触发的触摸事件时，通过渲染层线程停止执行第一滚动处理，获取触控件的触控偏移量的过程可以包括：
在检测到触控件触发的触摸开始事件时，通过渲染层线程停止执行第一滚动处理，获取触控件在滚动方向上的第一当前位置。在检测到触控件触发的触摸移动事件时，通过渲染层线程获取触控件在滚动方向上的第二当前位置。通过渲染层线程基于第一当前位置以及第二当前位置，确定触控偏移量。该终端在检测到触控件触发的触摸事件时，获取触控件的触控偏移量的过程可以参考前述步骤S501、步骤S502以及步骤S503的解释和实现方式，本申请实施例对此不做赘述。
在步骤S404B中，通过渲染层线程控制滚动视图组件沿滚动方向移动触控偏移量。
该步骤的解释和实现方式可以参考上述步骤S202中，终端通过渲染层线程控制滚动视图组件沿滚动方向移动设定偏移量的解释和实现方式，本申请实施例中对此不做赘述。
在步骤S405B中，通过渲染层线程在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。
该步骤的解释和实现方式可以参考上述步骤S202中，终端通过渲染层线程在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容的解释和实现方式，本申请实施例中对此不做赘述。
需要说明的是，在步骤S404B之前，所述方法可以还包括：判断触控偏移量是否小于实际可滚动距离。若是，则通过渲染层线程更新触控偏移量，使得更新后的触控偏移量为实际可滚动距离，执行步骤S404B。若否，直至执行步骤S404B。也即是，步骤S404B替换为：在触控偏移量是否大于或者等于实际可滚动距离，通过渲染层线程控制滚动视图组件沿滚动方向移动触控偏移量。
此外，还需要说明的是，在依次检测到多个触摸移动事件的情况下，每确定一个触摸移动事件的触控偏移量均需要执行一次步骤S404B和步骤S405B。这样可以使得滚动视图组件跟随触控件移动，实现页面内容组件跟随触控件移动的滚动效果。
本申请实施例中，在采用触控件控制页面内容显示组件移动的过程中，可能会使得滚动视图组件移动至页面显示组件的边界位置。则终端可以在滚动视图组件移动至页面显示组件的边界位置后，控制滚动视图组件以及页面显示组件生成的页面移动。所述方法还包括：
在步骤S1中，在检测到触控件触发的触摸移动事件时，通过渲染层线程获取滚动视图组件相对页面内容组件的当前位置。
在触控件在页面滑动时，可以使得终端通过渲染层线程检测到触控件触发的touchmove触摸事件。此时终端通过渲染层线程可以获取滚动视图组件相对页面内容组件的当前位置。
可选的，滚动视图组件相对页面内容组件的当前位置可以通过滚动视图组件沿滚动方向的一侧边界与页面内容组件沿滚动方向的一侧边界之间距离表征。则终端通过渲染层线程可以获取滚动视图组件的当前总偏移量以及滚动视图组件在滚动方向上的长度。对当前总偏移量和该长度进行求和计算，得到求和结果。计算页面内容组件沿滚动方向的长度与求和结果的目标差值。该目标差值即可表征滚动视图组件相对页面内容组件的当前位置。
需要说明的，终端通过渲染层线程不仅可以通过记录滚动视图组件在每次第一滚动处理中移动的设定偏移量，以得到滚动视图组件的总偏移量。还可以通过获取滚动视图组件的transfrom属性中与滚动方向对应的属性值，该属性值即为滚动视图组件的总偏移量。
在步骤S2中，判断当前位置是否为边界所在位置。若是，执行步骤S3；若否，执行步骤S404A或者步骤S404B。
可选的，终端通过渲染层判断当前位置是否为边界所在位置的过程可以包括：终端通过渲染层判断滚动视图组件沿滚动方向的一侧边界与页面内容组件沿滚动方向的一侧边界之间距离是否为0。若该距离为0，则表明滚动视图组件相对页面内容组件的当前位置为页面内容组件沿滚动方向的一侧的边界位置。若该距离不为0，则表明滚动视图组件相对页面内容组件的当前位置不为页面内容组件沿滚动方向的一侧的边界位置。
示例的，终端通过渲染层判断目标差值是否为0。若该目标差值0，则表明滚动视图组件相对页面内容组件的当前位置为页面内容组件沿滚动方向的一侧的边界位置。若该目标差值不为0，则表明滚动视图组件相对页面内容组件的当前位置不为页面内容组件沿滚动方向的一侧的边界位置。
在步骤S3中，通过渲染层线程执行页面相应的滚动指令。
终端通过渲染层线程执行页面相应的滚动指令，使得页面沿滚动方向滚动。
综上所述，本申请实施例提供的一种页面滚动处理方法，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。并通过渲染层线程执行第一滚动处理。该第一滚动处理包括获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。该技术方案中，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度。通过渲染层线程可以沿滚动方向持续移动滚动视图组件，以持续改变滚动视图组件与其具有关联层级关系的页面内容组件的相对位置，从而使得在页面上显示页面内容组件在滚动方向上不同位置的内容，实现页面内容组件的自动滚动效果。并且由于该技术方案是通过渲染层线程实现的，无需逻辑层线程参与。因此相较于相关技术，避免了实现过程中存在的逻辑层和渲染层之间的数据传输，减少了数据传输时长，降低了出现滚动卡顿的概率，提高了滚动显示效果。
图6是根据一示例性实施例示出的一种页面滚动处理装置的框图。参照图6，装置包括：显示模块601和滚动处理模块602。
显示模块601，用于通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度；
滚动处理模块602，用于通过渲染层线程执行第一滚动处理，直至滚动视图组件沿滚动方向移动至页面内容组件的边界，第一滚动处理包括：
获取滚动视图组件的设定偏移量，
控制滚动视图组件沿滚动方向移动设定偏移量，
在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，滚动处理模块602，还用于：
获取终端的当前时间、滚动视图组件的总偏移量、滚动距离以及设定滚动时长，滚动距离为当前滚动视图组件与边界之间的距离，总偏移量为滚动视图组件的当前位置相对滚动视图组件的初始位置的总移动距离；
将当前时间、总偏移量、滚动距离以及设定滚动时长代入设定动画缓动函数进行计算，得到设定偏移量。
在一种可能实现方式中，滚动处理模块602，还用于：
基于设定偏移量，更新滚动视图组件的变形属性中与滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与设定偏移量之和。
在一种可能实现方式中，装置还包括：
获取模块，用于在检测到触控件触发的触摸事件时，通过渲染层线程停止执行第一滚动处理，获取触控件的触控偏移量；
控制模块，用于通过渲染层线程控制滚动视图组件沿滚动方向移动触控偏移量；
显示模块601，还用于通过渲染层线程在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。
在一种可能实现方式中，获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过渲染层线程停止执行第一滚动处理，获取触控件在滚动方向上的第一当前位置；
在检测到触控件触发的触摸移动事件时，通过渲染层线程获取触控件在滚动方向上的第二当前位置；
通过渲染层线程基于第一当前位置以及第二当前位置，确定触控偏移量。
在一种可能实现方式中，获取模块，还用于在检测到触控件触发的触摸事件时，通过渲染层线程停止执行第一滚动处理，获取触控件的触控偏移量以及滚动视图组件的惯性滚动距离。
装置还包括：确定模块，用于通过所述渲染层线程将触控偏移量和惯性滚动距离之和，确定为滚动总距离；
滚动处理模块602，还用于：通过渲染层线程执行第二滚动处理，直至滚动总距离为零，第二滚动处理包括：
将终端的当前时间、滚动视图组件的总偏移量、滚动视图组件的滚动总距离、设定惯性滚动时长代入设定动画缓动函数进行计算，得到惯性滚动偏移量，总偏移量为滚动视图组件的当前位置相对滚动视图组件的初始位置的总移动距离，
控制滚动视图组件沿滚动方向移动惯性滚动偏移量，
在页面更新显示页面内容组件位于移动后的滚动视图组件中的部分内容，
更新滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与惯性滚动偏移量的差值。
在一种可能实现方式中，获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过渲染层线程获取终端的第一当前时间；
在检测到触控件触发的触摸结束事件时，通过渲染层线程获取触控件在滚动方向上的第三当前位置以及终端的第二当前时间；
通过渲染层线程基于第一当前位置、第三当前位置、第一当前时间以及第二当前时间，得到滚动视图组件的惯性滑动速度；
通过渲染层线程将获取的设定惯性滚动时长与惯性滑动速度的乘积，确定为惯性滚动距离。
在一种可能实现方式中，装置还包括：
更新模块，用于当滚动总距离小于实际可滚动距离时，通过渲染层线程更新滚动总距离，使得更新后的滚动总距离为实际可滚动距离，实际可滚动距离为当前滚动视图组件与边界之间的距离。
在一种可能实现方式中，获取模块，还用于在检测到触控件触发的触摸移动事件时，通过渲染层线程获取滚动视图组件相对页面内容组件的当前位置；
装置还包括：执行模块，用于当确定当前位置为边界所在位置时，通过渲染层线程执行页面相应的滚动指令。
在一种可能实现方式中，所述页面内容组件与所述滚动视图组件具有关联层级关系，包括：所述页面内容组件为所述滚动视图组件的子组件。
综上所述，本申请实施例提供的一种页面滚动处理装置，通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容。并通过渲染层线程执行第一滚动处理。该第一滚动处理包括获取滚动视图组件的设定偏移量，控制滚动视图组件沿滚动方向移动设定偏移量，在页面显示页面内容组件位于移动后的滚动视图组件中的部分内容。该技术方案中，页面是基于滚动视图组件以及与滚动视图组件具有关联层级关系的页面内容组件生成，页面内容组件在滚动方向上的长度大于滚动视图组件在滚动方向上的长度。通过渲染层线程可以沿滚动方向持续移动滚动视图组件，以持续改变滚动视图组件与其具有关联层级关系的页面内容组件的相对位置，从而使得在页面上显示页面内容组件在滚动方向上不同位置的内容，实现页面内容组件的自动滚动效果。并且由于该技术方案是通过渲染层线程实现的，无需逻辑层线程参与。因此相较于相关技术，避免了实现过程中存在的逻辑层和渲染层之间的数据传输，减少了数据传输时长，降低了出现滚动卡顿的概率，提高了滚动显示效果。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
图7是根据一示例性实施例示出的一种终端的框图。该终端700可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端700还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常，终端700包括有：处理器701和存储器702。
处理器701可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器701可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器701也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器701可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器701还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器702可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器702还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器702中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器701所执行以实现本申请中方法实施例提供的页面滚动处理方法。
在一些实施例中，终端700还可选包括有：外围设备接口703和至少一个外围设备。处理器701、存储器702和外围设备接口703之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口703相连。具体地，外围设备包括：射频电路704、显示屏705、摄像头706、音频电路707、定位组件708和电源709中的至少一种。
外围设备接口703可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器701和存储器702。在一些实施例中，处理器701、存储器702和外围设备接口703被集成在同一芯片或电路板上；在一些其他实施例中，处理器701、存储器702和外围设备接口703中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。
射频电路704用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路704通过电磁信号与通信网络以及其他通信设备进行通信。射频电路704将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路704包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路704可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路704还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。
显示屏705用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏705是触摸显示屏时，显示屏705还具有采集在显示屏705的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器701进行处理。此时，显示屏705还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏705可以为一个，设置终端700的前面板；在另一些实施例中，显示屏705可以为至少两个，分别设置在终端700的不同表面或呈折叠设计；在再一些实施例中，显示屏705可以是柔性显示屏，设置在终端700的弯曲表面上或折叠面上。甚至，显示屏705还可以设置成非矩形的不规则图形，也即异形屏。显示屏705可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件706用于采集图像或视频。可选地，摄像头组件706包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件706还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。
音频电路707可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器701进行处理，或者输入至射频电路704以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端700的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器701或射频电路704的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路707还可以包括耳机插孔。
定位组件708用于定位终端700的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件708可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源709用于为终端700中的各个组件进行供电。电源709可以是交流电、直流电、一次性电池或可充电电池。当电源709包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中，终端700还包括有一个或多个传感器7010。该一个或多个传感器7010包括但不限于：加速度传感器7011、陀螺仪传感器7012、压力传感器7013、指纹传感器7014、光学传感器7015以及接近传感器7016。
加速度传感器7011可以检测以终端700建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器7011可以用于检测重力加速度在三个坐标轴上的分量。处理器701可以根据加速度传感器7011采集的重力加速度信号，控制显示屏705以横向视图或纵向视图进行用户界面的显示。加速度传感器7011还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器7012可以检测终端700的机体方向及转动角度，陀螺仪传感器7012可以与加速度传感器7011协同采集用户对终端700的3D动作。处理器701根据陀螺仪传感器7012采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器7013可以设置在终端700的侧边框和/或显示屏705的下层。当压力传感器7013设置在终端700的侧边框时，可以检测用户对终端700的握持信号，由处理器701根据压力传感器7013采集的握持信号进行左右手识别或快捷操作。当压力传感器7013设置在显示屏705的下层时，由处理器701根据用户对显示屏705的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器7014用于采集用户的指纹，由处理器701根据指纹传感器7014采集到的指纹识别用户的身份，或者，由指纹传感器7014根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器701授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器7014可以被设置终端700的正面、背面或侧面。当终端700上设置有物理按键或厂商Logo时，指纹传感器7014可以与物理按键或厂商Logo集成在一起。
光学传感器7015用于采集环境光强度。在一个实施例中，处理器701可以根据光学传感器7015采集的环境光强度，控制显示屏705的显示亮度。具体地，当环境光强度较高时，调高显示屏705的显示亮度；当环境光强度较低时，调低显示屏705的显示亮度。在另一个实施例中，处理器701还可以根据光学传感器7015采集的环境光强度，动态调整摄像头组件706的拍摄参数。
接近传感器7016，也称距离传感器，通常设置在终端700的前面板。接近传感器7016用于采集用户与终端700的正面之间的距离。在一个实施例中，当接近传感器7016检测到用户与终端700的正面之间的距离逐渐变小时，由处理器701控制显示屏705从亮屏状态切换为息屏状态；当接近传感器7016检测到用户与终端700的正面之间的距离逐渐变大时，由处理器701控制显示屏705从息屏状态切换为亮屏状态。
本领域技术人员可以理解，图7中示出的结构并不构成对终端700的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
在示例性实施例中，还提供了一种非临时性计算机可读存储介质，当该存储介质中的指令由终端的处理器执行时，使得终端能够执行上述各个方法实施例提供的页面滚动处理方法。
例如，该非临时性计算机可读存储介质可以是ROM(Read-Only Memory,只读内存)、RAM(Random Access Memory，随机存取存储器)、CD-ROM(Compact Disc Read-OnlyMemory，只读光盘)、磁带、软盘和光数据存储设备等。
在示例性实施例中，还提供了一种应用程序产品，当该应用程序产品中的指令由终端的处理器执行时，使得终端能够执行上述各个方法实施例提供的页面滚动处理方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (23)

1.一种页面滚动处理方法，其特征在于，所述方法包括：
通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容，所述页面是基于所述滚动视图组件以及与所述滚动视图组件具有关联层级关系的页面内容组件生成，所述页面内容组件在滚动方向上的长度大于所述滚动视图组件在所述滚动方向上的长度；
通过所述渲染层线程执行第一滚动处理，直至所述滚动视图组件沿所述滚动方向移动至所述页面内容组件的边界，所述第一滚动处理包括：
获取所述滚动视图组件的设定偏移量，
控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，
在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
2.根据权利要求1所述的方法，其特征在于，所述获取所述滚动视图组件的设定偏移量，包括：
获取终端的当前时间、所述滚动视图组件的总偏移量、滚动距离以及设定滚动时长，所述滚动距离为当前所述滚动视图组件与所述边界之间的距离，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离；
将所述当前时间、所述总偏移量、所述滚动距离以及所述设定滚动时长代入设定动画缓动函数进行计算，得到所述设定偏移量。
3.根据权利要求1或2所述的方法，其特征在于，所述控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，包括：
基于所述设定偏移量，更新所述滚动视图组件的变形属性中与所述滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与所述设定偏移量之和。
4.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量；
通过所述渲染层线程控制所述滚动视图组件沿所述滚动方向移动所述触控偏移量；
通过所述渲染层线程在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
5.根据权利要求4所述的方法，其特征在于，所述在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量，包括：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件在所述滚动方向上的第一当前位置；
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第二当前位置；
通过所述渲染层线程基于所述第一当前位置以及所述第二当前位置，确定所述触控偏移量。
6.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量以及所述滚动视图组件的惯性滚动距离；
通过所述渲染层线程将所述触控偏移量和所述惯性滚动距离之和，确定为滚动总距离；
通过所述渲染层线程执行第二滚动处理，直至滚动总距离为零，所述第二滚动处理包括：
将终端的当前时间、所述滚动视图组件的总偏移量、所述滚动视图组件的滚动总距离、设定惯性滚动时长代入设定动画缓动函数进行计算，得到惯性滚动偏移量，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离，
控制所述滚动视图组件沿所述滚动方向移动所述惯性滚动偏移量，
在所述页面更新显示所述页面内容组件位于移动后的滚动视图组件中的部分内容，
更新所述滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与所述惯性滚动偏移量的差值。
7.根据权利要求6所述的方法，其特征在于，所述在检测到触控件触发的触摸事件时，通过所述渲染层线程获取所述滚动视图组件的惯性滚动距离，包括：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程获取所述终端的第一当前时间；
在检测到触控件触发的触摸结束事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第三当前位置以及所述终端的第二当前时间；
通过所述渲染层线程基于所述第一当前位置、所述第三当前位置、所述第一当前时间以及所述第二当前时间，得到所述滚动视图组件的惯性滑动速度；
通过所述渲染层线程将获取的所述设定惯性滚动时长与所述惯性滑动速度的乘积，确定为所述惯性滚动距离。
8.根据权利要求7所述的方法，其特征在于，所述方法还包括：
当所述滚动总距离小于实际可滚动距离时，通过所述渲染层线程更新所述滚动总距离，使得更新后的滚动总距离为所述实际可滚动距离，所述实际可滚动距离为当前所述滚动视图组件与所述边界之间的距离。
9.根据权利要求4或6所述的方法，其特征在于，所述方法还包括：
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述滚动视图组件相对所述页面内容组件的当前位置；
当确定所述当前位置为所述边界所在位置时，通过所述渲染层线程执行所述页面相应的滚动指令。
10.根据权利要求1所述的方法，其特征在于，所述页面内容组件与所述滚动视图组件具有关联层级关系，包括：所述页面内容组件为所述滚动视图组件的子组件。
11.一种页面滚动处理装置，其特征在于，所述装置包括：
显示模块，用于通过渲染层线程在页面显示页面内容组件位于滚动视图组件中的部分内容，所述页面是基于所述滚动视图组件以及与所述滚动视图组件具有关联层级关系的页面内容组件生成，所述页面内容组件在滚动方向上的长度大于所述滚动视图组件在所述滚动方向上的长度；
滚动处理模块，用于通过所述渲染层线程执行第一滚动处理，直至所述滚动视图组件沿所述滚动方向移动至所述页面内容组件的边界，所述第一滚动处理包括：
获取所述滚动视图组件的设定偏移量，
控制所述滚动视图组件沿所述滚动方向移动所述设定偏移量，
在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
12.根据权利要求11所述的装置，其特征在于，所述滚动处理模块，还用于：
获取终端的当前时间、所述滚动视图组件的总偏移量、滚动距离以及设定滚动时长，所述滚动距离为当前所述滚动视图组件与所述边界之间的距离，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离；
将所述当前时间、所述总偏移量、所述滚动距离以及所述设定滚动时长代入设定动画缓动函数进行计算，得到所述设定偏移量。
13.根据权利要求11或12所述的装置，其特征在于，所述滚动处理模块，还用于：
基于所述设定偏移量，更新所述滚动视图组件的变形属性中与所述滚动方向对应的属性值，以使得更新后的属性值为更新前的属性值与所述设定偏移量之和。
14.根据权利要求11所述的装置，其特征在于，所述装置还包括：
获取模块，用于在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量；
控制模块，用于通过所述渲染层线程控制所述滚动视图组件沿所述滚动方向移动所述触控偏移量；
所述显示模块，还用于通过所述渲染层线程在所述页面显示所述页面内容组件位于移动后的滚动视图组件中的部分内容。
15.根据权利要求14所述的装置，其特征在于，所述获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件在所述滚动方向上的第一当前位置；
在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第二当前位置；
通过所述渲染层线程基于所述第一当前位置以及所述第二当前位置，确定所述触控偏移量。
16.根据权利要求11所述的装置，其特征在于，
所述获取模块，还用于在检测到触控件触发的触摸事件时，通过所述渲染层线程停止执行所述第一滚动处理，获取所述触控件的触控偏移量以及所述滚动视图组件的惯性滚动距离；
所述装置还包括：确定模块，用于通过所述渲染层线程将所述触控偏移量和所述惯性滚动距离之和，确定为滚动总距离；
所述滚动处理模块，还用于：通过所述渲染层线程执行第二滚动处理，直至滚动总距离为零，所述第二滚动处理包括：
将终端的当前时间、所述滚动视图组件的总偏移量、所述滚动视图组件的滚动总距离、设定惯性滚动时长代入设定动画缓动函数进行计算，得到惯性滚动偏移量，所述总偏移量为所述滚动视图组件的当前位置相对所述滚动视图组件的初始位置的总移动距离，
控制所述滚动视图组件沿所述滚动方向移动所述惯性滚动偏移量，
在所述页面更新显示所述页面内容组件位于移动后的滚动视图组件中的部分内容，
更新所述滚动总距离，使得更新后的滚动总距离为更新前的滚动总距离与所述惯性滚动偏移量的差值。
17.根据权利要求16所述的装置，其特征在于，所述获取模块，还用于：
在检测到触控件触发的触摸开始事件时，通过所述渲染层线程获取所述终端的第一当前时间；
在检测到触控件触发的触摸结束事件时，通过所述渲染层线程获取所述触控件在所述滚动方向上的第三当前位置以及所述终端的第二当前时间；
通过所述渲染层线程基于所述第一当前位置、所述第三当前位置、所述第一当前时间以及所述第二当前时间，得到所述滚动视图组件的惯性滑动速度；
通过所述渲染层线程将获取的所述设定惯性滚动时长与所述惯性滑动速度的乘积，确定为所述惯性滚动距离。
18.根据权利要求17所述的装置，其特征在于，所述装置还包括：
更新模块，用于当所述滚动总距离小于实际可滚动距离时，通过所述渲染层线程更新所述滚动总距离，使得更新后的滚动总距离为所述实际可滚动距离，所述实际可滚动距离为当前所述滚动视图组件与所述边界之间的距离。
19.根据权利要求14或16所述的装置，其特征在于，
所述获取模块，还用于在检测到触控件触发的触摸移动事件时，通过所述渲染层线程获取所述滚动视图组件相对所述页面内容组件的当前位置；
所述装置还包括：执行模块，用于当确定所述当前位置为所述边界所在位置时，通过所述渲染层线程执行所述页面相应的滚动指令。
20.根据权利要求11所述的装置，其特征在于，所述页面内容组件与所述滚动视图组件具有关联层级关系，包括：所述页面内容组件为所述滚动视图组件的子组件。
21.一种终端，其特征在于，包括：
处理器；
用于存储所述处理器可执行指令的存储器;
其中，所述处理器被配置为执行所述指令，以实现如权利要求1至10中任一项所述的页面滚动处理方法。
22.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由终端的处理器执行时，使得终端能够执行如权利要求1至10中任一项所述的页面滚动处理方法。
23.一种计算机程序产品，包括计算机程序/指令，其特征在于，所述计算机程序/指令被处理器执行时实现权利要求1至10中任一项所述的页面滚动处理方法。
CN202111166928.3A 2021-09-30 2021-09-30 页面滚动处理方法、装置、终端以及存储介质 Active CN113918258B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111166928.3A CN113918258B (zh) 2021-09-30 2021-09-30 页面滚动处理方法、装置、终端以及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111166928.3A CN113918258B (zh) 2021-09-30 2021-09-30 页面滚动处理方法、装置、终端以及存储介质

Publications (2)

Publication Number Publication Date
CN113918258A CN113918258A (zh) 2022-01-11
CN113918258B true CN113918258B (zh) 2023-12-19

Family

ID=79237893

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111166928.3A Active CN113918258B (zh) 2021-09-30 2021-09-30 页面滚动处理方法、装置、终端以及存储介质

Country Status (1)

Country Link
CN (1) CN113918258B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116684677B (zh) * 2022-09-20 2024-06-11 荣耀终端有限公司 一种电子设备动效播放方法、电子设备及存储介质
CN116088997B (zh) * 2023-04-07 2023-07-21 深圳市微克科技有限公司 一种页面滚动显示方法、装置、存储介质和电子设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置
CN109165364A (zh) * 2018-09-12 2019-01-08 广州视源电子科技股份有限公司 一种页面渲染方法、装置、设备和存储介质
CN109614563A (zh) * 2018-12-05 2019-04-12 北京达佳互联信息技术有限公司 显示网页的方法、装置、设备及存储介质
CN109948101A (zh) * 2019-03-21 2019-06-28 Oppo广东移动通信有限公司 页面切换方法、装置、存储介质及电子设备
CN111880712A (zh) * 2020-08-07 2020-11-03 北京达佳互联信息技术有限公司 页面显示方法、装置、电子设备及存储介质
CN112861057A (zh) * 2021-02-10 2021-05-28 北京百度网讯科技有限公司 基于小程序的页面渲染方法、装置、设备及存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9418171B2 (en) * 2008-03-04 2016-08-16 Apple Inc. Acceleration of rendering of web-based content

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103678631A (zh) * 2013-12-19 2014-03-26 华为技术有限公司 页面渲染方法及装置
CN109165364A (zh) * 2018-09-12 2019-01-08 广州视源电子科技股份有限公司 一种页面渲染方法、装置、设备和存储介质
CN109614563A (zh) * 2018-12-05 2019-04-12 北京达佳互联信息技术有限公司 显示网页的方法、装置、设备及存储介质
CN109948101A (zh) * 2019-03-21 2019-06-28 Oppo广东移动通信有限公司 页面切换方法、装置、存储介质及电子设备
CN111880712A (zh) * 2020-08-07 2020-11-03 北京达佳互联信息技术有限公司 页面显示方法、装置、电子设备及存储介质
CN112861057A (zh) * 2021-02-10 2021-05-28 北京百度网讯科技有限公司 基于小程序的页面渲染方法、装置、设备及存储介质

Also Published As

Publication number Publication date
CN113918258A (zh) 2022-01-11

Similar Documents

Publication Publication Date Title
US11231845B2 (en) Display adaptation method and apparatus for application, and storage medium
US9262867B2 (en) Mobile terminal and method of operation
US10331231B2 (en) Mobile terminal and method for determining scrolling speed
CN111880712B (zh) 页面显示方法、装置、电子设备及存储介质
US20110298830A1 (en) Single Point Input Variable Zoom
CN113918258B (zh) 页面滚动处理方法、装置、终端以及存储介质
CN110968229A (zh) 一种壁纸设置方法及电子设备
CN110738971B (zh) 用于墨水屏的页面刷新方法及装置
CN110968815B (zh) 页面刷新方法、装置、终端及存储介质
CN112764654A (zh) 组件的吸附操作方法、装置、终端及存储介质
US11720219B2 (en) Method, apparatus and device for displaying lyric, and storage medium
CN113467682B (zh) 控制地图覆盖物移动的方法、装置、终端及存储介质
CN108509127B (zh) 启动录屏任务的方法、装置及计算机设备
CN111158575B (zh) 终端执行处理的方法、装置、设备以及存储介质
CN111158552B (zh) 位置调整方法和装置
WO2021218926A1 (zh) 图像显示方法、装置和计算机设备
CN111064658B (zh) 显示控制方法及电子设备
CN110647262B (zh) 页面显示的方法及装置
CN111601114A (zh) 应用于直播间的用户操作响应方法及装置
CN113687902B (zh) 资源展示方法、装置、计算机设备及存储介质
CN109725820B (zh) 获取列表条目的方法和装置
CN113220203B (zh) 活动入口展示方法、装置、终端及存储介质
CN110781343B (zh) 音乐的评论信息的显示方法、装置、设备及存储介质
CN113064537B (zh) 媒体资源播放方法、装置、设备、介质及产品
CN114495993A (zh) 进度调节方法、装置、设备及计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant