一种页面处理方法及计算设备转让专利
申请号 : CN201911249030.5
文献号 : CN111061415B
文献日 : 2021-07-09
发明人 : 张勋
申请人 : 海南车智易通信息技术有限公司
摘要 :
权利要求 :
1.一种页面处理方法,所述方法适于在计算设备中执行,所述计算设备具有浏览器,所述浏览器具有滚动功能,且包括步骤:标记布置在页面上的待处理的第一元素;
按照显示效果,插入至少一个与所述第一元素相邻的第二元素;
响应于用户对所述第一元素的滑动触摸操作,确定触摸事件的值;
根据所述触摸事件的值,确定第二元素的显示值,所述第二元素的显示值为显示高度的值或者显示宽度的值;
基于所述第二元素的显示值,利用浏览器自身的滚动功能来生成页面的垂直方向上回弹显示效果或者水平方向上回弹显示效果。
2.如权利要求1所述的方法,其中,所述按照显示效果,插入至少一个与第一元素相邻的第二元素的步骤包括:
若显示效果为垂直方向上的回弹显示,则插入两个与所述第一元素在垂直方向上相邻的第二元素;
若显示效果为水平方向上的回弹显示,则插入两个与所述第一元素在水平方向上相邻的第二元素。
3.如权利要求1或2所述的方法,其中,在所述响应于用户对第一元素的滑动触摸操作,确定触摸事件的值的步骤之前,还包括步骤:为所述第一元素设置滑动触摸事件,其中,所述滑动触摸事件包括触摸开始事件、触摸滑动事件和触摸结束事件。
4.如权利要求3所述的方法,其中,所述响应于用户对所述第一元素的滑动触摸操作,确定触摸事件的值的步骤包括:响应于用户对所述第一元素的触摸操作,记录触摸起始位置,作为触摸开始事件的值;
在用户对所述第一元素的滑动过程中,实时记录滑动位置,作为触摸滑动事件的值;
在用户停止对所述第一元素的触摸操作时,设置触摸结束事件的值。
5.如权利要求4所述的方法,其中,所述根据所述触摸事件的值,确定第二元素的显示值的步骤包括:
基于所述触摸开始事件的值和所述触摸滑动事件的值,确定出滑动距离和滑动方向;
基于所述滑动方向,确定待显示的第二元素;
基于所述滑动距离,设置所确定的第二元素的显示高度或显示宽度;以及基于所述触摸结束事件的值,再次设置该第二元素的显示高度或显示宽度。
6.如权利要求5所述的方法,其中,所述基于滑动方向,确定待显示的第二元素的步骤还包括:
当所述滑动方向为垂直向上滑动时,确定位于所述第一元素下方的第二元素为待显示的第二元素;
当所述滑动方向为垂直向下滑动时,确定位于所述第一元素上方的第二元素为待显示的第二元素;
当所述滑动方向为水平向左滑动时,确定位于所述第一元素右方的第二元素为待显示的第二元素;
当所述滑动方向为水平向右滑动时,确定位于所述第一元素左方的第二元素为待显示的第二元素。
7.如权利要求6所述的方法,其中,所述基于滑动距离,设置所确定的第二元素的显示高度或显示宽度的步骤还包括:若所述滑动方向为垂直方向,则设置所述显示高度;
若所述滑动方向为水平方向,则设置所述显示宽度;
其中,按照如下公式来确定所述第二元素的显示高度或显示宽度,y=|y2‑y1|/k,
其中,y表示显示高度或显示宽度,y2表示触摸滑动事件的值,y1表示触摸开始事件的值,k表示距离系数。
8.一种计算设备,包括:
一个或多个处理器;和
存储器;
一个或多个程序,其中所述一个或多个程序存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行根据权利要求1‑7所述方法中的任一方法的指令。
9.一种存储一个或多个程序的计算机可读存储介质,所述一个或多个程序包括指令,所述指令当计算设备执行时,使得所述计算设备执行根据权利要求1‑7所述的方法中的任一方法。
说明书 :
一种页面处理方法及计算设备
技术领域
背景技术
又回到初始位置的效果。目前市面上只有iOS系统和部分浏览器支持这个效果。
拟浏览器滚动。其实现原理是监听页面的触摸或拖拽或滚轮事件,然后,通过
requestAnimationFrame实时改变页面的transform中的位移(x或y)值,在位移值到达临界
值后继续改变其值,最终,在页面滚动或拖放结束后,通过一定的速度把位移值设回到临界
值。
发,这些都是需要库的维护者自行实现。再者,鼠标滚轮的支持也需要启用额外的配置项,
并且在进行屏幕旋转或是其他一些改变屏幕大小的操作时,模拟滚动的相关参数也都需要
进行刷新。大部分库虽然提供了默认的刷新机制,但是某些特殊情况下还是会出现问题,这
就需要开发者凭借实践经验和能力去解决。最后是当滚动块滚动到底或者到顶后不能触发
父元素的滚动,而是直接出现回弹效果,如果要触发父元素的滚动就需要开发者自行实现
或者进行其他配置才能达到目标。
发明内容
户对所述第一元素的滑动触摸操作,确定触摸事件的值;根据触摸事件的值,确定第二元素
的显示值。
直方向上相邻的第二元素;若显示效果为水平方向上的回弹显示,则插入两个与第一元素
在水平方向上相邻的第二元素。
件包括触摸开始事件、触摸滑动事件和触摸结束事件。
开始事件的值;在用户对第一元素的滑动过程中,实时记录滑动位置,作为触摸滑动事件的
值;在用户停止对第一元素的触摸操作时,设置触摸结束事件的值。
于滑动方向,确定待显示的第二元素;基于滑动距离,设置所确定的第二元素的显示高度或
显示宽度;以及基于触摸结束事件的值,再次设置该第二元素的显示高度或显示宽度。
元素;当滑动方向为垂直向下滑动时,确定位于第一元素上方的第二元素为待显示的第二
元素;当滑动方向为水平向左滑动时,确定位于第一元素右方的第二元素为待显示的第二
元素;当滑动方向为水平向右滑动时,确定位于所述元素左方的第二元素为待显示的第二
元素。
方向,则设置显示宽度;其中,按照如下公式来确定第二元素的显示高度或显示宽度,
器执行,一个或多个程序包括用于执行如上所述方法中的任一方法的指令。
的任一方法。
可以得到保证;在所有的平台上均能实现统一的回弹效果;代码少,文件体积小,下载速度
快。
附图说明
旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述,本公开的上述
以及其它目的、特征和优势将变得更加明显。遍及本公开,相同的附图标记通常指代相同的
部件或元素。
具体实施方式
所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围
完整的传达给本领域的技术人员。
和上拉加载。下面以页面垂直滚动的场景为例,简单阐述这两种显示效果。
商类列表或首页中。
各种资讯类、电商类列表或首页中。
一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心
114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、
数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器118可以与处理器
104一起使用,或者在一些实现中,存储器控制器118可以是处理器104的一个内部部分。
器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中,
应用122可以布置为在操作系统120上由一个或多个处理器104利用程序数据124执行指令。
应用122例如可以是浏览器、即时通信应用、相册等。
的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由
一个或者多个A/V端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外
设接口144可以包括串行接口控制器154和并行接口控制器156,它们可以被配置为有助于
经由一个或者多个I/O端口158和诸如输入设备(例如,键盘、鼠标、笔、语音输入设备、触摸
输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设
备146可以包括网络控制器160,其可以被布置为便于经由一个或者多个通信端口164与一
个或者多个其他计算设备162通过网络通信链路的通信。
以包括任何信息递送介质。“调制数据信号”可以这样的信号,它的数据集中的一个或者多
个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例,通信介质可以
包括诸如有线网络或者专线网络之类的有线介质,以及诸如声音、射频(RF)、微波、红外
(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存
储介质和通信介质二者。
计算设备100还可以实现为小尺寸便携(或者移动)电子设备的一部分,这些电子设备可以
是诸如蜂窝电话、个人数字助理(PDA)、个人媒体播放器设备、无线网络浏览设备、个人头戴
设备、应用专用设备、或者可以包括上面任何功能的混合设备。
法200的多条程序指令。
一些页面是水平滚动的场景中,第一元素为处于页面最左侧或最右侧的显示元素。本发明
的实施例对此不做限制。
一元素在垂直方向上相邻的第二元素,即,在该第一元素的上下各插入一个第二元素。若显
示效果为水平方向上的回弹显示,则插入两个与该第一元素在水平方向上相邻的第二元
素,即,在该第一元素的左右各插入一个第二元素。
(可选地,用户可以通过手指或触摸笔等在计算设备100的屏幕上进行触摸操作,本发明的
实施例对此不做限制),只在刚接触时触发一次,利用它可以记录下触摸的起始位置。
touchmove表示检测到用户正在页面上滑动,这个事件会在触摸过程中被多次触发,利用它
可以获取在页面上滑动的实时坐标。touchend表示检测到用户的触摸操作结束,它仅在触
摸结束时被触发一次,利用它可以把第二元素的显示高度设置为0,用来让已经离开原有位
置的页面还原。
示宽度的值。
为垂直向下滑动或水平向右滑动;当d小于0时,确定滑动方向为垂直向上滑动或水平向左
滑动。
素上方的第二元素为待显示的第二元素。当滑动方向为水平向左滑动时,确定位于第一元
素右方的第二元素为待显示的第二元素。当滑动方向为水平向右滑动时,确定位于第一元
素左方的第二元素为待显示的第二元素。
距离设置为第二元素的显示高度,这样会导致第二元素显示过高,不符合实际情况,此时,
就需要系数k去适当减少滑动距离的值。在实际应用中可以根据实际情况设置k的值,本发
明的实施例对此不做限制。
故,此处设置第二元素的显示高度或显示宽度为0。
对此不做限制。
touchend分别表示滑动触摸事件。
的初始状态,图3B和图3C表示下拉过程中,页面的显示状态,其中,用斜线“/”填充部分表示
所显示的第二元素的高度。图3D表示触摸滑动操作结束时,页面又回到初始状态。从图3A到
图3D可以清晰看到,随着下拉滑动的距离增加,第二元素的显示高度也在同步增加。此时,
第二元素的显示宽度为父元素的宽度,即页面的显示宽度。
显示的初始状态,图4B和图4C表示上拉过程中,页面的显示状态,其中,用斜线“/”填充部分
表示所显示的第二元素的高度。图4D表示触摸滑动操作结束时,页面由回到初始状态。从左
到右可以清晰看到,随着上拉滑动的距离增加,第二元素的显示高度也在同步增加。此时,
第二元素的显示宽度为父元素的宽度,即页面的显示宽度。
滑动操作结束时,第二元素的显示宽度为0,页面又回到初始状态,此处不再一一展开赘述。
和兼容性可以得到保证;在所有的平台上均能实现统一的回弹效果;代码少,文件体积小,
下载速度快。
者对其的描述中。然而,并不应将该公开的方法解释成反映如下意图:即所要求保护的本发
明要求比在每个权利要求中所明确记载的特征更多特征。更确切地说,如下面的权利要求
书所反映的那样,发明方面在于少于前面公开的单个实施例的所有特征。因此,遵循具体实
施方式的权利要求书由此明确地并入该具体实施方式,其中每个权利要求本身都作为本发
明的单独实施例。
不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个
子模块。
元或组件组合成一个模块或单元或组件,以及此外可以把它们分成多个子模块或子单元或
子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外,可以采用任何
组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任
何方法或者设备的所有过程或单元进行组合。除非另外明确陈述,本说明书(包括伴随的权
利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代
替。
范围之内并且形成不同的实施例。例如,在下面的权利要求书中,所要求保护的实施例的任
意之一都可以以任意的组合方式来使用。
盘、CD‑ROM、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式,
其中当程序被载入诸如计算机之类的机器,并被所述机器执行时,所述机器变成实践本发
明的设备。
少一个输出装置。其中,存储器被配置用于存储程序代码;处理器被配置用于根据该存储器
中存储的所述程序代码中的指令,执行本发明所述的方法。
数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调
制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据,并且包括任何信息传
递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。
元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外,装置实施例的在
此所述的元素是如下装置的例子:该装置用于实施由为了实施该发明的目的的元素所执行
的功能。
须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。
本说明书中使用的语言主要是为了可读性和教导的目的而选择的,而不是为了解释或者限
定本发明的主题而选择的。因此,在不偏离所附权利要求书的范围和精神的情况下,对于本
技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围,对本
发明所做的公开是说明性的,而非限制性的,本发明的范围由所附权利要求书限定。