CN111208928A - 页面滚动的控制方法 - Google Patents

页面滚动的控制方法 Download PDF

Info

Publication number
CN111208928A
CN111208928A CN201911374633.8A CN201911374633A CN111208928A CN 111208928 A CN111208928 A CN 111208928A CN 201911374633 A CN201911374633 A CN 201911374633A CN 111208928 A CN111208928 A CN 111208928A
Authority
CN
China
Prior art keywords
length
controller
display
display content
moving
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.)
Granted
Application number
CN201911374633.8A
Other languages
English (en)
Other versions
CN111208928B (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.)
Guangdong Kamfu Technology Co ltd
Original Assignee
Guangdong Kamfu 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 Guangdong Kamfu Technology Co ltd filed Critical Guangdong Kamfu Technology Co ltd
Priority to CN201911374633.8A priority Critical patent/CN111208928B/zh
Publication of CN111208928A publication Critical patent/CN111208928A/zh
Application granted granted Critical
Publication of CN111208928B publication Critical patent/CN111208928B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction 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/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction 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/0485Scrolling or panning

Landscapes

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

Abstract

本申请提供了一种页面滚动的控制方法,根据显示区域的长度确定控制器的展示形式和控制器的长度;根据显示区域的长度和显示内容的长度,确定移动滑块与显示内容之间的滑动映射比例;按展示形式展示控制器;每当获取到移动滑块的滑动距离,根据滑动映射比例确定显示内容的滑动距离,并根据显示内容的滑动距离调整显示内容在显示区域内的显示内容。本申请根据显示区域的长度和显示内容的长度,确定移动滑块与显示内容之间的滑动映射比例;每当获取到移动滑块的滑动距离,根据滑动映射比例确定显示内容的滑动距离,并根据显示内容的滑动距离调整显示内容在显示区域内的显示内容,实现了滑动距离与滚动距离的动态调整。

Description

页面滚动的控制方法
技术领域
本发明涉及计算机技术领域,尤其涉及一种页面滚动的控制方法。
背景技术
随着智能手机的快速发展,数据和信息量越来越大,如何能快速、准确且轻松的获取和阅读目标信息成为广大用户进一步的追求,目前主要通过各类数据和信息类应用程序,手动点击想要查看的内容。
发明内容
为了准确推荐,本申请实施例提出了一种页面滚动的控制方法。
为了达到上述目的,本发明采用的主要技术方案包括:
一种页面滚动的控制方法,所述方法包括:
S101,根据显示区域的长度确定控制器的展示形式和控制器的长度,所述控制器的展示形式为移动滑块,或者,移动滑块和2个方向相反的移动箭头;
S102,根据显示区域的长度和显示内容的长度,确定所述移动滑块与所述显示内容之间的滑动映射比例;所述显示区域长度小于所述显示内容的长度;
S103,按所述展示形式展示所述控制器;
S104,每当获取到所述移动滑块的滑动距离,根据所述滑动映射比例确定所述显示内容的滑动距离,并根据所述显示内容的滑动距离调整所述显示内容在所述显示区域内的显示内容。
可选地,所述S101具体包括:
S101-1,获取移动滑块的默认滑动长度h0,以及箭头的默认长度h′0
S101-2,若显示区域的长度h1≥h0+2*h′0,则确定所述控制器的展示形式为移动滑块和2个方向相反的移动箭头,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h2-2*h′0;若显示区域的长度h1<h0+2*h′0,则根据显示内容的长度确定所述控制器的展示形式和所述控制器的长度。
可选地,所述S101-2中根据显示内容的长度确定所述控制器的展示形式和所述控制器的长度,包括:
S101-2-1,获取显示区域面积和显示内容面积;
S101-2-2,若显示区域面积<显示内容面积*0.5*h1/h0,确定所述控制器的展示形式为移动滑块,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h1
S101-2-3,若显示区域面积≥显示内容面积*0.5*h1/h0,确定所述控制器的展示形式为移动滑块和2个方向相反的移动箭头,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h2-2*h′0
可选地,所述S102具体包括:
确定所述移动滑块与所述显示内容之间的滑动映射比例
Figure BDA0002340595230000021
其中,α为映射系数。
可选地,所述
Figure BDA0002340595230000022
可选地,所述显示区域位于页面中,或者,位于控件中,或者,位于界面中。
可选地,所述控制器支持click事件。
可选地,若屏幕支持touch事件,则所述控制器支持touch事件。
可选地,若屏幕不支持touch事件,则所述控制器支持mouse事件。
可选地,若所述控制器的移动滑块为横向滑动,则所述长度为横向长度;若所述控制器的移动滑块为纵向滑动,所述长度为纵向长度。
本发明的有益效果是:根据显示区域的长度和显示内容的长度,确定移动滑块与显示内容之间的滑动映射比例;每当获取到移动滑块的滑动距离,根据滑动映射比例确定显示内容的滑动距离,并根据显示内容的滑动距离调整显示内容在显示区域内的显示内容,实现了滑动距离与滚动距离的动态调整。
附图说明
下面将参照附图描述本申请的具体实施例,其中:
图1示出了本申请一实施例提供的一种页面滚动的控制方法的流程示意图;
图2示出了本申请一个实施例提供的一种控制器的结构示意图;
图3示出了本申请一个实施例提供的一种控制器的显示界面示意图;
图4示出了本申请一个实施例提供的不同控制器的示意图。
具体实施方式
随着智能手机的快速发展,数据和信息量越来越大,如何能快速、准确且轻松的获取和阅读目标信息成为广大用户进一步的追求,目前主要通过各类数据和信息类应用程序,手动点击想要查看的内容。
本实施例提供一种页面滚动的控制方法,参见图1,实现流程如下:
S101,根据显示区域的长度确定控制器的展示形式和控制器的长度。
其中,控制器的展示形式为移动滑块,或者,移动滑块和2个方向相反的移动箭头,如图2所示。
具体的,
S101-1,获取移动滑块的默认滑动长度h0,以及箭头的默认长度h′0
S101-2,若显示区域的长度h1≥h0+2*h′0,则确定控制器的展示形式为移动滑块和2个方向相反的移动箭头,且控制器的长度h2=h1,移动滑块的移动长度h3=h2-2*h′0
若显示区域的长度h1<h0+2*h′0,则根据显示内容的长度确定控制器的展示形式和控制器的长度。
其中,根据显示内容的长度确定控制器的展示形式和控制器的长度包括:
S101-2-1,获取显示区域面积和显示内容面积。
S101-2-2,若显示区域面积<显示内容面积*0.5*h1/h0,确定控制器的展示形式为移动滑块,且控制器的长度h2=h1,移动滑块的移动长度h3=h1
S101-2-3,若显示区域面积≥显示内容面积*0.5*h1/h0,确定控制器的展示形式为移动滑块和2个方向相反的移动箭头,且控制器的长度h2=h1,移动滑块的移动长度h3=h2-2*h′0
本步骤中,预先设定跟一个滑动长度h0和箭头长度h′0。且控制器有多种模式,如正常模式为移动滑块和2个方向相反的移动箭头。精简模式仅为移动滑块。不同的模式用于不同的场景。
如显示区域的长度不小于滑动长度+2倍的箭头长度,则说明显示区域比预设的控制器要大或者相等,则采用正常模式的控制器,即控制器的展示形式为移动滑块和2个方向相反的移动箭头,且控制器的长度就是显示区域的长度,由于控制器由移动滑块和2个方向相反的移动箭头构成,因此,移动滑块的移动长度是控制器长度-2倍的箭头长度。
如显示区域的长度小于滑动长度+2倍的箭头长度,则说明显示区域比预设的控制器要小,此时,获取显示区域面积和显示内容面积,如果显示区域面积<显示内容面积*0.5*h1/h0,确定显示区域面积较小,应采用精简模式的控制器,即控制器的展示形式为移动滑块,且控制器的长度依然为显示区域的长度,由于控制器只有移动滑块,因此移动滑块的移动长度就是控制器的长度。若显示区域面积≥显示内容面积*0.5*h1/h0,确定控制器的展示形式为移动滑块和2个方向相反的移动箭头,且控制器的长度依然为显示区域的长度,由于控制器由移动滑块和2个方向相反的移动箭头构成,因此,移动滑块的移动长度是控制器长度-2倍的箭头长度。
通过S101可以根据现实区域,显示内容动态的确定移动滑块的滑动长度,是的滑块涉及更加符合当前的情况,提升用户体验。如图4所示的不同长度和展示形式的控制器。
S102,根据显示区域的长度和显示内容的长度,确定移动滑块与显示内容之间的滑动映射比例。
其中,显示区域长度小于显示内容的长度。
其中,确定移动滑块与显示内容之间的滑动映射比例
Figure BDA0002340595230000051
α为映射系数。
例如,
Figure BDA0002340595230000052
现有方案中,移动滑块与显示内容之间的滑动映射比例仅根据移动滑块的距离与显示区域的距离确定,此种方式,不考虑显示内容,当显示内容刚刚超过显示区域时,稍微滑动移动滑块,出现大量的空白情况。而本实施例采用的映射比例,充分考虑显示内容,对于滑动同样的滑动距离,若超出显示区域的内容多,则显示内容滚动的多,若超出显示区域的内容少,则显示内容滚动的少。
S103,按展示形式展示控制器。
S104,每当获取到移动滑块的滑动距离,根据滑动映射比例确定显示内容的滑动距离,并根据显示内容的滑动距离调整显示内容在显示区域内的显示内容。
需要说明的是,本实施例中的显示区域位于页面中,或者,位于控件中,或者,位于界面中。即控制器可用于文本/页面/控件的滚动操作。如图3所示,控制器可用于文本/页面/控件的滚动操作。
另外,控制器支持click事件。若屏幕支持touch事件,则控制器支持touch事件。若屏幕不支持touch事件,则控制器支持mouse事件。以支持操控不同类型的屏幕
此外,若控制器的移动滑块为横向滑动,则长度为横向长度。若控制器的移动滑块为纵向滑动,长度为纵向长度。
本实施例提供的控制器长度根据实际页面显示区域伸缩,可适应任意尺寸的界面。
本实施例提供的方法,根据显示区域的长度和显示内容的长度,确定移动滑块与显示内容之间的滑动映射比例;每当获取到移动滑块的滑动距离,根据滑动映射比例确定显示内容的滑动距离,并根据显示内容的滑动距离调整显示内容在显示区域内的显示内容,实现了滑动距离与滚动距离的动态调整。
需要明确的是,本发明并不局限于上文所描述并在图中示出的特定配置和处理。为了简明起见,这里省略了对已知方法的详细描述。在上述实施例中,描述和示出了若干具体的步骤作为示例。但是,本发明的方法过程并不限于所描述和示出的具体步骤,本领域的技术人员可以在领会本发明的精神后,作出各种改变、修改和添加,或者改变步骤之间的顺序。
还需要说明的是,本发明中提及的示例性实施例,基于一系列的步骤或者装置描述一些方法或系统。但是,本发明不局限于上述步骤的顺序,也就是说,可以按照实施例中提及的顺序执行步骤,也可以不同于实施例中的顺序,或者若干步骤同时执行。
最后应说明的是:以上所述的各实施例仅用于说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述实施例所记载的技术方案进行修改,或者对其中部分或全部技术特征进行等同替换;而这些修改或替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (10)

1.一种页面滚动的控制方法,其特征在于,所述方法包括:
S101,根据显示区域的长度确定控制器的展示形式和控制器的长度,所述控制器的展示形式为移动滑块,或者,移动滑块和2个方向相反的移动箭头;
S102,根据显示区域的长度和显示内容的长度,确定所述移动滑块与所述显示内容之间的滑动映射比例;所述显示区域长度小于所述显示内容的长度;
S103,按所述展示形式展示所述控制器;
S104,每当获取到所述移动滑块的滑动距离,根据所述滑动映射比例确定所述显示内容的滑动距离,并根据所述显示内容的滑动距离调整所述显示内容在所述显示区域内的显示内容。
2.根据权利要求1所述的方法,其特征在于,所述S101具体包括:
S101-1,获取移动滑块的默认滑动长度h0,以及箭头的默认长度h′0
S101-2,若显示区域的长度h1≥h0+2*h′0,则确定所述控制器的展示形式为移动滑块和2个方向相反的移动箭头,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h2-2*h′0;若显示区域的长度h1<h0+2*h′0,则根据显示内容的长度确定所述控制器的展示形式和所述控制器的长度。
3.根据权利要求2所述的方法,其特征在于,所述S101-2中根据显示内容的长度确定所述控制器的展示形式和所述控制器的长度,包括:
S101-2-1,获取显示区域面积和显示内容面积;
S101-2-2,若显示区域面积<显示内容面积*0.5*h1/h0,确定所述控制器的展示形式为移动滑块,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h1
S101-2-3,若显示区域面积≥显示内容面积*0.5*h1/h0,确定所述控制器的展示形式为移动滑块和2个方向相反的移动箭头,且所述控制器的长度h2=h1,所述移动滑块的移动长度h3=h2-2*h′0
4.根据权利要求1所述的方法,其特征在于,所述S102具体包括:
确定所述移动滑块与所述显示内容之间的滑动映射比例
Figure FDA0002340595220000021
其中,α为映射系数。
5.根据权利要求1所述的方法,其特征在于,所述
Figure FDA0002340595220000022
6.根据权利要求1所述的方法,其特征在于,所述显示区域位于页面中,或者,位于控件中,或者,位于界面中。
7.根据权利要求1所述的方法,其特征在于,所述控制器支持click事件。
8.根据权利要求1所述的方法,其特征在于,若屏幕支持touch事件,则所述控制器支持touch事件。
9.根据权利要求1所述的方法,其特征在于,若屏幕不支持touch事件,则所述控制器支持mouse事件。
10.根据权利要求1至9任一权利要求所述的方法,其特征在于,若所述控制器的移动滑块为横向滑动,则所述长度为横向长度;若所述控制器的移动滑块为纵向滑动,所述长度为纵向长度。
CN201911374633.8A 2019-12-27 2019-12-27 页面滚动的控制方法 Active CN111208928B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911374633.8A CN111208928B (zh) 2019-12-27 2019-12-27 页面滚动的控制方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911374633.8A CN111208928B (zh) 2019-12-27 2019-12-27 页面滚动的控制方法

Publications (2)

Publication Number Publication Date
CN111208928A true CN111208928A (zh) 2020-05-29
CN111208928B CN111208928B (zh) 2021-05-18

Family

ID=70786497

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911374633.8A Active CN111208928B (zh) 2019-12-27 2019-12-27 页面滚动的控制方法

Country Status (1)

Country Link
CN (1) CN111208928B (zh)

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101078965A (zh) * 2006-05-24 2007-11-28 鸿富锦精密工业(深圳)有限公司 非线性页面定位系统及方法
CN101261563A (zh) * 2007-01-19 2008-09-10 Lg电子株式会社 一种移动终端及在其中滚动数据的方法
CN101369214A (zh) * 2008-09-22 2009-02-18 华为技术有限公司 控制部件的显示方法和装置
CN103927111A (zh) * 2013-01-11 2014-07-16 三星电子株式会社 用于在电子设备中显示滚动信息的方法和设备
CN103927107A (zh) * 2013-01-14 2014-07-16 联想(北京)有限公司 一种信息处理方法及电子设备
CN104331233A (zh) * 2014-10-27 2015-02-04 天津三星通信技术研究有限公司 便携式终端及其内容预览方法
CN105824531A (zh) * 2016-03-15 2016-08-03 网易(杭州)网络有限公司 数值调整方法及装置
CN107003803A (zh) * 2014-12-15 2017-08-01 微软技术许可有限责任公司 用于动态内容的滚动条
CN109308148A (zh) * 2018-09-06 2019-02-05 北京酷我科技有限公司 一种水滴下拉刷新实现方法

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101078965A (zh) * 2006-05-24 2007-11-28 鸿富锦精密工业(深圳)有限公司 非线性页面定位系统及方法
CN101261563A (zh) * 2007-01-19 2008-09-10 Lg电子株式会社 一种移动终端及在其中滚动数据的方法
CN101369214A (zh) * 2008-09-22 2009-02-18 华为技术有限公司 控制部件的显示方法和装置
CN103927111A (zh) * 2013-01-11 2014-07-16 三星电子株式会社 用于在电子设备中显示滚动信息的方法和设备
CN103927107A (zh) * 2013-01-14 2014-07-16 联想(北京)有限公司 一种信息处理方法及电子设备
CN104331233A (zh) * 2014-10-27 2015-02-04 天津三星通信技术研究有限公司 便携式终端及其内容预览方法
CN107003803A (zh) * 2014-12-15 2017-08-01 微软技术许可有限责任公司 用于动态内容的滚动条
CN105824531A (zh) * 2016-03-15 2016-08-03 网易(杭州)网络有限公司 数值调整方法及装置
CN109308148A (zh) * 2018-09-06 2019-02-05 北京酷我科技有限公司 一种水滴下拉刷新实现方法

Also Published As

Publication number Publication date
CN111208928B (zh) 2021-05-18

Similar Documents

Publication Publication Date Title
US9612713B2 (en) Intelligent window management
US10048847B2 (en) Intelligent window sizing and control
CN107256159B (zh) 一种移动浏览器上下文切换的方法和系统
US20070109275A1 (en) Method for controlling a touch screen user interface and device thereof
US8698746B1 (en) Automatic calibration curves for a pointing device
US20100251167A1 (en) Scrollbar user interface for multitouch devices
US9201562B2 (en) Value specification in a responsive interface control
US20140250372A1 (en) Methods and systems for page navigation of dynamically laid-out content
CN103077696A (zh) 用于调节显示屏亮度的方法和设备以及显示系统
CN110856030B (zh) 一种弹幕区域的调整方法、装置及可读介质
CN105117062A (zh) 一种屏幕亮度调节方法及移动终端
CN104636048A (zh) 一种页面内容滚动显示的方法和装置
CN104159161A (zh) 视频图像帧的定位方法和装置
CN103686281A (zh) 模拟鼠标控制智能电视的方法、遥控器和移动终端
CN112083989A (zh) 一种界面的调节方法和装置
CN105306734B (zh) 基于手机app界面的图片显示方法
CN102999308B (zh) 用于决定控制域中控制输出的方法及控制装置
CN111208928B (zh) 页面滚动的控制方法
US10147164B2 (en) Electronic device and data-erasing method
CN105094548A (zh) 一种信息处理的方法及电子设备
KR20170133776A (ko) 단말기의 다중 터치 조작에 따른 처리방법 및 그 장치
CN107765974B (zh) 一种滑动控件的移动方法和装置
CN105653249B (zh) 字符大小的调整方法及装置
CN109885227A (zh) 内容显示方法、显示终端及计算机存储介质
WO2013103036A1 (ja) 表示制御装置、情報端末装置、集積回路、表示制御方法、プログラム、および記録媒体

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
PE01 Entry into force of the registration of the contract for pledge of patent right
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: Control methods for page scrolling

Effective date of registration: 20230518

Granted publication date: 20210518

Pledgee: Guangdong Nanhai rural commercial bank Limited by Share Ltd. Guicheng branch

Pledgor: GUANGDONG KAMFU TECHNOLOGY Co.,Ltd.

Registration number: Y2023980040910