CN114281460A - 页面显示方法和系统 - Google Patents
页面显示方法和系统 Download PDFInfo
- Publication number
- CN114281460A CN114281460A CN202111588963.4A CN202111588963A CN114281460A CN 114281460 A CN114281460 A CN 114281460A CN 202111588963 A CN202111588963 A CN 202111588963A CN 114281460 A CN114281460 A CN 114281460A
- Authority
- CN
- China
- Prior art keywords
- page
- scrolling
- scroll
- window
- target
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 57
- 238000005096 rolling process Methods 0.000 claims abstract description 25
- 230000036961 partial effect Effects 0.000 claims abstract description 10
- 230000000694 effects Effects 0.000 claims description 19
- 238000004590 computer program Methods 0.000 claims description 10
- 238000009877 rendering Methods 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 7
- 230000001960 triggered effect Effects 0.000 claims description 7
- 230000003993 interaction Effects 0.000 description 11
- 230000008569 process Effects 0.000 description 11
- 238000010586 diagram Methods 0.000 description 8
- 230000000750 progressive effect Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 5
- 230000006399 behavior Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000006073 displacement reaction Methods 0.000 description 2
- 230000010365 information processing Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000003796 beauty Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000008094 contradictory effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000012634 fragment Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
- 230000002829 reductive effect Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例公开了一种页面显示方法，包括：获取目标页面，并确定所述目标页面的页面高度；若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。本申请实施例还提供了页面显示系统、计算机设备及计算机可读存储介质。本申请实施例提供的上述技术方案，包括以下优点：有效地提高视窗中的内容的曝光率，自行判别并进入自动滚动模式，从而可以有效地提高用户体验。
Description
技术领域
本申请涉及页面处理领域，尤其涉及一种页面显示方法、系统、计算机设备及计算机可读存储介质。
背景技术
随着互联网技术的快速发展，用户可以通过页面查询信息、网上购物、对话等。然而，受设备的显示屏幕的高度限制，以及这些页面包括的内容长度往往大于设备的显示屏幕的高度，使得用户在通过设备浏览这些页面时常常需要滚动页面。
用户可以通过鼠标拖曳或在触控屏上滑动进行手动滚动页面，非常不方便，用户体验不好。
发明内容
本申请实施例的目的是提供一种页面显示方法、系统、计算机设备及计算机可读存储介质，解决上述问题。
本申请实施例的一个方面提供了一种页面显示方法，包括：
获取目标页面，并确定所述目标页面的页面高度；
若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及
通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
可选地，还包括：
确定针对目标页面的用户滚动输入；及
响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面。
可选地，所述通过自动滚动模式滚动所述目标页面，包括：
若滚动到所述视窗中的内容包括符合预设规则的内容，则暂停滚动或降低滚动速度。
可选地，所述通过自动滚动模式滚动所述目标页面，包括：
将待显示内容从下到上移动并以预定动画效果进入到所述视窗中；
其中，所述待显示内容为所述目标页面中位于所述视窗外并欲滚动到所述视窗的部分区域。
可选地，所述目标页面包括对话页面，所述对话页面用于从上到下分列多条对话，所述待显示内容包括目标对话；所述将待显示内容从下到上移动并以预定动画效果进入到所述视窗中，包括：
确定所述目标对话，所述目标对话为所述视窗当前显示的最后一条对话的下一条对话；
伴随透明度逐渐增加的动画效果，将所述目标对话从所述视窗外自动移动到所述视窗内。
可选地，所述将待显示内容从下到上移动并以预定动画效果进入到所述视窗中，还包括：
当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长；
在所述暂停达到所述预设时长的情况下，继续执行所述自动滚动，以显示后续对话。
可选地，所述当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长，包括：
确定所述目标对话的对话类型；及
根据所述目标对话的对话类型，调整所述预设时长。
可选地，所述通过自动滚动模式滚动所述目标页面，还包括：
在页面渲染之前，通过requestAnimationFrame为所述目标对话配置一个自动滚动任务；
基于所述自动滚动任务，对所述目标页面进行自动滚动；其中：
当所述自动滚动任务开始时，配置表示处于自动滚动模式的第一标识；
当所述自动滚动任务结束时，配置表示未处于所述自动滚动模式的第二标识。
可选地，所述确定针对目标页面的用户滚动输入，包括：
接收基于滚动事件触发的滚动回调；
基于所述滚动回调，确定所述自动滚动的当前标识；
在所述当前标识为第一标识的情形下，确定所述滚动事件来源于所述自动滚动；
在所述当前标识为所述第二标识的情形下，确定所述滚动事件来源于用户滚动输入。
可选地，所述响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面，包括：
在所述滚动事件来源于用户滚动输入的情形下，从所述自动滚动模式切换到所述手动滚动模式。
可选地，还包括：
在所述手动滚动模式下，确定所述目标页面的移动方向；
若所述移动方向为从下向上，则以预定动画效果显示从所述视窗外进入所述视窗内的对话。
可选地，还包括：在所述目标页面停止滚动达到目标时长，则执行所述自动滚动模式。
本申请实施例的一个方面又提供了一种页面显示系统，包括：
获取模块，用于获取目标页面，并确定所述目标页面的页面高度；
进入模块，用于若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及
自动滚动模块，用于通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
本申请实施例的一个方面又提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述页面显示方法的步骤。
本申请实施例的一个方面又提供了一种计算机可读存储介质，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述页面显示方法的步骤。
本申请实施例提供的页面显示方法、系统、计算机设备及计算机可读存储介质，包括以下技术效果：自行判别并进入自动滚动模式，从而可以有效地提高用户体验。采用自动滚动模式，将未进入过视窗的内容自动滚动到视窗中，将视窗中的内容自动滚动到视窗外，实现不同内容的交换，提高视窗中的内容的曝光率。
附图说明
图1示意性示出了根据本申请实施例的页面显示方法的应用环境图；
图2示意性示出了根据本申请实施例一的页面显示方法的流程图；
图2A示意性示出了根据本申请实施例一的页面显示方法的另一流程图；
图3为图2A中步骤S200的子流程图；
图4为图2A中步骤S200的子流程图；
图5为图4中步骤S400的子流程图；
图6为目标对话进入到视窗前后的对比图；
图7为图4中步骤S400的子流程图；
图8为图7中步骤S700的子流程图；
图9为在自动滚动模式下的流程示例；
图10为图2A中步骤S200的子流程图；
图11为图2A中步骤S202的子流程图；
图12为基于滚动回调的判断流程图；
图13为图2A中步骤S204的子流程图；
图14示意性示出了根据本申请实施例一的页面显示方法的新增步骤流程图；
图15示意性示出了根据本申请实施例一的页面显示方法的新增步骤流程图；
图16示意性示出了根据本申请实施例二的页面显示系统的框图；
图17示意性示出了根据本申请实施例三的适于实现页面显示方法的计算机设备的硬件架构示意图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请实施例中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个申请实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
本发明人发现，当页面内容过长时，用户主动滚动页面，体验交叉。为此，本申请提出了自动判别进入自动滚动模式。但是，本发明人进一步发现，页面自动滚动过程中，无法在自动滚动行为实时监测到用户的手动滚动行为并停止自动滚动。
有鉴于此，本申请提供新的页面显示方案，在该新的页面显示方案中：
(1)自动滚动当前不可见的内容至页面视窗内，吸引用户关注更多内容。
(2)当用户手动滚动时，用户的手动滚动交互与自动滚动交互冲突，以用户交互优先，停止自动滚动。
(3)用户手动滚动加载更多内容时，内容仍然以渐进式动画方式呈现，展示方式更具有趣味性和吸引力。
内容可以是对话。
(4)对话是逐个渐进式出现在视窗内，不在视窗内的对话自动滚动出现在视窗中，提高对话的曝光率。
(5)自动滚动时在关键对话可以停顿时间较长，引导用户交互。
(6)在页面自动滚动时，能够实时监测到用户的手动滚动行为，以用户交互为主，停止自动滚动，且在用户手动滚动加载更多对话时，依然伴随渐入式出现动画。
以下为本申请定义的一些术语的术语解释：
页面高度：手机内展示的页面整体长度，可能大于手机屏幕的高度，此时页面可以滚动。
视窗：显示屏幕的可视区域，视窗宽高＝手机屏幕的宽高，页面长度大于手机屏幕高度时一般可滚动至可视区域。
页面滚动高度：页面滚动后，页面顶部距离手机顶部的距离。
渐入式出现：页面内容出现时的动画效果，聊天内容对话显示时不是直接显示，而是伴随透明度从0渐变为1，位移从下至上。
自动滚动模式：在用户无操作的情况下，页面自动滚动露出下一条对话，停顿一段时间后自动滚动到下一条对话。
手动滚动模式：用户进入页面后，想查看历史消息时，可手动向上滑动，此时页面停止消息自动滚动，如果用户想加速查看消息，也可手动向下滑动页面，对话也会加速渐入式出现在视窗内。
requestAnimationFrame：浏览器的一个API，可以传入一个方法，该方法会在浏览器渲染前执行。
图1示意性示出了根据本申请实施例的环境应用示意图。
提供商网络2可以通过网络连接计算机设备4。
提供商网络2可以通过网络提供网页服务，如信息查询，终端6的页面对话等。
提供商网络2，可以由一个或多个服务器组成。该一个或多个服务器可以包括虚拟化计算实例。虚拟化计算实例可以包括虚拟机，诸如计算机系统的仿真，操作系统，服务器等。一个或多个可以基于定义用于仿真的特定软件(例如，操作系统，专用应用程序，服务器)的虚拟映像和/或其他数据来加载虚拟机。随着对不同类型的处理服务的需求改变，可以在一个或多个服务器上加载和/或终止不同的虚拟机。可以实现管理程序以管理同一服务器上的不同虚拟机的使用。
所述网络可以包括各种网络设备，例如路由器，交换机，多路复用器，集线器，调制解调器，网桥，中继器，防火墙，代理设备和/或等等。所述网络可以包括物理链路，例如同轴电缆链路，双绞线电缆链路，光纤链路，它们的组合和/或类似物。所述网络可以包括无线链路，例如蜂窝链路，卫星链路，Wi-Fi链路和/或类似物。
计算机设备4可以被配置为访问提供商网络2的内容和服务，其可以包括任何类型的计算设备，诸如智能手机、平板设备、膝上型计算机、机顶盒、智能电视等。
计算机设备4可以与一个或多个用户相关联。单个用户可以使用计算机设备4中的一个或多个来访问提供商网络2。计算机设备4可以使用不同的网络来访问提供商网络2。
计算机设备4可以安装有浏览器或特定应用程序(APP)，通过浏览器或特定应用程序显示内容，如对话等。计算机设备4可以包括用户接口22，该用户接口22可以包括或外接输入元件，如触控屏、鼠标等。例如，所述输入元件可以被配置为接收用户的页面滚动指令，所述页面滚动指令可以使计算机设备4滚动页面。
下面，本申请将以计算机设备4为执行主体，提供部分页面显示方案。
在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。
实施例一
图2示意性示出了根据本申请实施例一的页面显示方法的流程图。
如图2所示，该页面显示方法可以包括步骤S000～S200，其中：
步骤S000，获取目标页面，并确定所述目标页面的页面高度。
步骤S100，若所述页面高度大于视窗的视窗高度，则进入自动滚动模式。
步骤S200，通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
视窗，是在用户界面的一个可见的范围。
视窗可以为二维的对象，被安置在桌面之上。大多数的视窗都可以随用户的操作而更改大小、移动、隐藏、恢复和关闭。当两个视窗重叠的时候，就如日常生活中一样，其中一个要位于另一个之上，而下方的则会有些地方被上方的视窗遮盖。
在全屏模式下，所述视窗的大小等于所述计算机设备的显示屏幕的大小。
在非全屏模式下，所述视窗的大小可以被自定义，小于所述计算机设备的显示屏幕的大小。
当所述目标页面的页面高度大于所述视窗的视窗高度时，所述视窗仅能同时显示所述目标页面的部分区域。通过页面滚动可以调整所述目标页面中显示在所述视窗的内容。
在本实施例中，通过比较页面高度和视窗高度，自行判别并进入自动滚动模式，有效地提高用户体验。采用自动滚动模式，将未进入过视窗的内容自动滚动到视窗中，将视窗中的内容自动滚动到视窗外，实现不同内容的交换，提高视窗中的内容的曝光率。即自动滚动当前不可见的内容至所述视窗中，吸引用户关注更多内容。
所述自动滚动可以实现对所述目标页面的匀速移动。
所述自动滚动也可以实现对所述目标页面的非匀速移动，如匀速移动与暂停移动交错。
作为示例，如图2A，所述方法还可以包括步骤S202～S204，其中：
步骤S202，确定针对目标页面的用户滚动输入。
在所述目标页面处于自动滚动模式时，用户也可手动向上滚动页面，从而查看已经滚动出所述视窗外的内容；也可手动向下滚动页面，从而加速后续内容的查看。
所述用户滚动输入，可以基于鼠标拖动，可以是触控屏的滑动，或其他方式的滚动操作。
步骤S204，响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面。
在所述目标页面自动滚动时，通过实时确定用户的手动滚动行为。
当手动滚动时，手动滚动交互与自动滚动交互冲突，此时以手动滚动交互优先，停止自动滚动。
本实施例中，在所述目标页面自动滚动时，确定是否存在手动滚动。若存在手动滚动，则自动将自动滚动模式切换到手动滚动模式，避免自动滚动和手动滚动之间的冲突。
不需要用户通过主动操作关闭自动滚动模式，而是自动监测和自动切换，提高用户体验。
以下进一步提供一些可选的实施例。
作为可选的示例，如图3所示，所述步骤S200可以包括：步骤S300，若滚动到所述视窗中的内容包括符合预设规则的内容，则暂停滚动或降低滚动速度。所述预设规则可以由用户自定义，如关键词、类别等。在该可选的实施例中，通过暂停滚动或降低滚动速度，可以引导用户关注重点内容，而避免了因为重点内容过快地滑过而导致用户需要手动滚动并重看，有效地提高了用户的使用体验。
作为可选的实施例，如图4所示，所述步骤S200可以包括：步骤S400，将待显示内容从下到上移动并以预定动画效果进入到所述视窗中；其中，所述待显示内容为所述目标页面中位于所述视窗外并欲滚动到所述视窗的部分区域。举例来说，所述预定动画效果可以是匀速移动，并伴随透明度从0渐变至1。在本可选的实施例中，以渐进式动画方式呈现，展示方式更加具有趣味性和吸引力。
所述目标页面，可以是商品购买页面、新闻页面、对话页面中。
作为可选的实施例，所述目标页面包括对话页面，所述对话页面用于从上到下分列多条对话，所述待显示内容包括目标对话。如图5所示，所述步骤S400可以步骤S500～S502，其中：步骤S500，确定所述目标对话，所述目标对话为所述视窗当前显示的最后一条对话的下一条对话；步骤S502，伴随透明度逐渐增加的动画效果，将所述目标对话从所述视窗外自动移动到所述视窗内。在本可选的实施例中，除初始显示在所述视窗内的部分对话外，后续对话均可以逐条以渐进式动画展示，并将所述视窗内的部分对话自动滚出到所述视窗外。由于对话是逐条渐进式自动滚动到在所述视窗内，且伴随另一部分对话滚出所述视窗，因此，所述视窗内始终保持进行显示当前的若干条对话，提高当前对话的曝光率。
如图6中的左侧图，所述视窗中显示有6条对话，从上到下依次为：“何同学，你的粉丝等你更新好辛苦啊”、“每次我选题也好辛苦啊”、“我承包你下一期的制作表用，下一期选题上粉丝们决定如何？”、“这么好？具体怎么玩？”、“先透露一下品牌空语吧”和一张图片“被手机美颜功能种草”。欲滚入到所述视窗的目标对话，为“在21日23:59分前，最多粉丝想看的主题会是你的下一期内容，本金主将承包下期内容的制作费及催更成功的粉丝奖励！”。如图6中的右侧图，其显示了将该目标对话滚入到所述视窗，同时，“何同学，你的粉丝等你更新好辛苦啊”和“每次我选题也好辛苦啊”这两条对话则被滚动出了所述视窗。
其中，对话的数据结构可以如下：
“对话{
show:boolean；//是否展示对话，展示时出现动画；
type:string；//对话内容，是表情包图片或文字或投票或者是进度条；
text:string；
}
对话列表：对话[]。”
用户进入所述目标页面后，接收网络提供商2发送的对话列表，同时执行自动滚动(开始进入时默认采用自动滚动模式展示对话内容)，逐个渐进式展示对话内容。
用户进入所述目标页面时循环遍历对话列表，逐个将对话展示出来，即将对话结构体的show(渐进展示)字段置为true(或预定数值)，为对话添加CSS动画。以图6为例，在300毫秒内将目标对话“在21日23:59分前，最多粉丝想看的主题会是你的下一期内容，本金主将承包下期内容的制作费及催更成功的粉丝奖励！”的透明度从0渐变到1，及将目标对话的位移坐标从-40像素点移动到0(目标对话的高度)。
作为可选的实施例，如图7所示，所述步骤S400可以包括步骤S700～S702，其中：步骤S700，当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长；步骤S702，在所述暂停达到所述预设时长的情况下，继续执行所述自动滚动，以显示后续对话。在自动滚动模式下，每将一条对话滚动从所述视窗外滚动到所述视窗内，则暂停所述预设时长，以便用户可以由足够时间查看这条最新滚入的对话。
继续参考图6，在将目标对话“在21日23:59分前，最多粉丝想看的主题会是你的下一期内容，本金主将承包下期内容的制作费及催更成功的粉丝奖励！”完全滚到所述视窗后，停顿n秒，并且在停顿所述n秒之后，处理目标对话的下一条对话的显示。
作为可选的实施例，如图8所示，所述步骤S700可以包括步骤S800～S802，其中：步骤S800，确定所述目标对话的对话类型；及步骤S802，根据所述目标对话的对话类型，调整所述预设时长。在本可选的实施例中，在自动滚动模式下，根据最新进入到所述视窗的对话(即目标对话)的对话类型，自动调整停顿的时间长度。若为关键内容，则可以延长停顿的时间长度，引导用户交互。若为非关键内容，则可以缩短停顿的时间长度或对停顿的时间长度不做调整。需要说明的是，对话类型可以基于各种维度进行区分，如对话长短、形式、关键词、发送者等。当然，所述对话类型也可以通过深度神经网络、机器学习等识别得到。
参考图9，其提供了一个在自动滚动模式下的流程示例。
i表示对话的从上到下的序号，i的初始值为0；
s表示对话的数量，s可以随着对话的增加而增加。
步骤S900，i是否小于s。如果是，进入步骤S902，否则结束流程。
步骤S902，第i个对话是否在视窗内。如果是，进入步骤S906，否则进入步骤S904。
步骤S904，将第i个对话滚动到所述视窗中。进入步骤S906。
步骤S906，若show(渐变显示)为true，则对第i个对话渐变出现。进入步骤S908。
步骤S908，根据第i个对话的对话类型，停顿n秒，并在停止n秒之后进入步骤S900，i自加1。
作为可选的实施例，如图10所示，所述步骤S200还可以包括步骤S1000～S1002，其中：步骤S1000，在页面渲染之前，通过requestAnimationFrame为所述目标对话配置一个自动滚动任务；步骤S1002，基于所述自动滚动任务，对所述目标页面进行自动滚动；其中：当所述自动滚动任务开始时，配置表示处于自动滚动模式的第一标识；当所述自动滚动任务结束时，配置表示未处于所述自动滚动模式的第二标识。通过本可选的实施例中，可以实现逐条对话的自动滚动。且通过所述第一标识和所述第二标识，可以用于区分手动滚动和自动滚动。
为每条对话分片配置一个自动滚动任务，该自动滚动任务可以为一个不可中断的原子任务。各自动滚动任务之间具有时间先后顺序，例如，需要一个自动滚动任务完成之后，则接着配置下一条对话的自动滚动任务，直至自动滚动模式结束。
以下提供所述目标对话的自动滚动任务的实现过程：
(1)设置这个自动滚动任务的自动滚动总时间为300毫秒。
(2)确定目标页面的目标滚动高度和起始滚动高度。
目标滚动高度＝所述目标对话的高度+所述目标对话和所述目标页面顶部之间的距离-视窗的高度。
起始滚动高度为：在所述目标对话滚动之前，所述目标页面已经滚动的滚动高度。
(3)开始自动滚动，记录当前滚动开始时间，滚动标识(machineScrolling)标记置为第一标识(true)。
(4)计算滚动消耗时间。
滚动消耗时间＝当前时间-滚动开始时间。
(5)使用requestAnimationFrame在页面渲染前进行滚动，每次滚动距离根据目标滚动高度、起始滚动高度、滚动消耗时间以及自动滚动总时间(300毫秒)得到。
(6)判断是否已经滚动到目标滚动高度，如果没有完成滚动，重复步骤(4)和(5)；如果完成滚动，清除requestAnimationFrame，并将machineScrolling标记置为第二标识(false)。
作为可选的实施例，如图11所示，所述步骤S202还可以包括步骤S1100～S1106，其中：步骤S1100，接收基于滚动事件触发的滚动回调；步骤S1102，基于所述滚动回调，确定所述自动滚动的当前标识；步骤S1104，在所述当前标识为第一标识的情形下，确定所述滚动事件来源于所述自动滚动；步骤S1106，在所述当前标识为所述第二标识的情形下，确定所述滚动事件来源于用户滚动输入。requestionAnimationFrame和滚动回调是在页面渲染前执行的，手动滚动和自动滚动都会触发浏览器的滚动回调。在本可选的实施例中，在所述目标页面滚动时，本方法对应的程序可以收到滚动事件触发的滚动回调(程序本身并不能够直接监测到滚动事件，滚动事件通常是浏览器监测的)。若所述当前标识为所述第二标识(false)，则说明所述滚动回调不是自动滚动触发的，因此可以反推出所述滚动回调是基于手动滚动触发的，从而有效判定用户滚动输入(如图12所示)。
作为可选的实施例，如图13所示，所述步骤S204还可以包括：步骤S1300，在所述滚动事件来源于用户滚动输入的情形下，从所述自动滚动模式切换到所述手动滚动模式。需要说明的是，由于用户滚动事件是基于自动滚动模式下的滚动标识反推得到的，因此：在执行某个自动滚动任务的过程中，自动滚动任务并不会中断。而是，这个自动滚动任务对应的对话的后续对话，被自动切换为采用手动滚动模式。需要说明的是，在所述手动滚动模式下，从所述视窗外滚动到所述视窗内的对话仍然可以以渐进式动画方式呈现，展示方式更具有趣味性和吸引力。
作为可选的实施例，如图14所示，所述方法还可以包括：步骤S1400，在所述手动滚动模式下，确定所述目标页面的移动方向；步骤S1402，若所述移动方向为从下向上，则以预定动画效果显示从所述视窗外进入所述视窗内的对话。如用户手动向下滚动时，未出现在视窗内的对话，以渐进式动画形式出现在视窗内，提高用户体验。如用户手动向上滚动，则将滚动出所述视窗外的对话重新滚动回所述视窗外，此时可以没有渐进式动画形式，也可以以渐进式动画形式重新进入。
作为可选的实施例，如图15所示，所述方法还可以包括：步骤S1500，在所述目标页面停止滚动达到目标时长，则执行所述自动滚动模式。例如，之前为手动滚动模式，在所述目标页面停止滚动达到目标时长，则将所述手动滚动模式切换到所述自动滚动模式。在本可选的实施例中，可以进一步地提高用户体验和交互效率。
实施例二
图16示意性示出了根据本申请实施例二的页面显示系统的框图，该页面显示系统可以被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本申请实施例。本申请实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，以下描述将具体介绍本实施例中各程序模块的功能。
如图16所示，该页面显示系统1600可以包括获取模块1610、进入模块1620、自动滚动模块1630，其中：
获取模块1610，用于获取目标页面，并确定所述目标页面的页面高度；
进入模块1620，用于若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及
自动滚动模块1630，用于通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
作为可选的实施例，所述系统还包括：
确定模块，用于所述确定针对目标页面的用户滚动输入；及
响应模块，用于响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面。
作为可选的实施例，所述自动滚动模块1630，还用于：
若滚动到所述视窗中的内容包括符合预设规则的内容，则暂停滚动或降低滚动速度。
作为可选的实施例，所述自动滚动模块1630，还用于：
将待显示内容从下到上移动并以预定动画效果进入到所述视窗中；
其中，所述待显示内容为所述目标页面中位于所述视窗外并欲滚动到所述视窗的部分区域。
作为可选的实施例，所述目标页面包括对话页面，所述对话页面用于从上到下分列多条对话，所述待显示内容包括目标对话；所述自动滚动模块1630，还用于：
确定所述目标对话，所述目标对话为所述视窗当前显示的最后一条对话的下一条对话；
伴随透明度逐渐增加的动画效果，将所述目标对话从所述视窗外自动移动到所述视窗内。
作为可选的实施例，所述自动滚动模块1630，还用于：
当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长；
在所述暂停达到所述预设时长的情况下，继续执行所述自动滚动，以显示后续对话。
作为可选的实施例，所述自动滚动模块1630，还用于：
确定所述目标对话的对话类型；及
根据所述目标对话的对话类型，调整所述预设时长。
作为可选的实施例，所述自动滚动模块1630，还用于：
在页面渲染之前，通过requestAnimationFrame为所述目标对话配置一个自动滚动任务；
基于所述自动滚动任务，对所述目标页面进行自动滚动；其中：
当所述自动滚动任务开始时，配置表示处于自动滚动模式的第一标识；
当所述自动滚动任务结束时，配置表示未处于所述自动滚动模式的第二标识。
作为可选的实施例，所述确定模块，还用于：
接收基于滚动事件触发的滚动回调；
基于所述滚动回调，确定所述自动滚动的当前标识；
在所述当前标识为第一标识的情形下，确定所述滚动事件来源于所述自动滚动；
在所述当前标识为所述第二标识的情形下，确定所述滚动事件来源于用户滚动输入。
作为可选的实施例，所述响应模块，还用于：
在所述滚动事件来源于用户滚动输入的情形下，从所述自动滚动模式切换到所述手动滚动模式。
作为可选的实施例，所述系统还可以包括手动滚动显示模块，用于：
在所述手动滚动模式下，确定所述目标页面的移动方向；
若所述移动方向为从下向上，则以预定动画效果显示从所述视窗外进入所述视窗内的对话。
作为可选的实施例，所述自动滚动模块1630，还用于：
在所述目标页面停止滚动达到目标时长，则执行所述自动滚动模式。
实施例三
图17示意性示出了根据本申请实施例三的适于实现页面显示方法的计算机设备的硬件架构示意图。本实施例中，计算机设备10000也可以用于作为是计算机设备4或组成计算机设备4的组成部分。本实施例中，计算机设备10000是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备，例如，智能手机、平板电脑、电脑、投影仪、机顶盒、游戏机、虚拟设备等终端设备。
本实施例中，计算机设备10000是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。如图17所示，计算机设备10000至少包括但不限于：可通过系统总线相互通信链接存储器10010、处理器10020、网络接口10030。其中：
存储器10010至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器10010可以是计算机设备10000的内部存储模块，例如该计算机设备10000的硬盘或内存。在另一些实施例中，存储器10010也可以是计算机设备10000的外部存储设备，例如该计算机设备10000上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器10010还可以既包括计算机设备10000的内部存储模块也包括其外部存储设备。本实施例中，存储器10010通常用于存储安装于计算机设备10000的操作系统和各类应用软件，例如页面显示方法的程序代码等。此外，存储器10010还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器10020在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器10020通常用于控制计算机设备10000的总体操作，例如执行与计算机设备10000进行数据交互或者通信相关的控制和处理等。本实施例中，处理器10020用于运行存储器10010中存储的程序代码或者处理数据。
网络接口10030可包括无线网络接口或有线网络接口，该网络接口10030通常用于在计算机设备10000与其他计算机设备之间建立通信链接。例如，网络接口10030用于通过网络将计算机设备10000与外部终端相连，在计算机设备10000与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code Division Multiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图17仅示出了具有部件10010-10030的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器10010中的页面显示方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器10020)所执行，以完成本申请。
实施例四
本实施例还提供一种计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的页面显示方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的页面显示方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
显然，本领域的技术人员应该明白，上述的本申请实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请实施例不限制于任何特定的硬件和软件结合。
以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。
Claims (15)
1.一种页面显示方法，其特征在于，包括：
获取目标页面，并确定所述目标页面的页面高度；
若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及
通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
2.根据权利要求1所述的页面显示方法，其特征在于，还包括：
确定针对目标页面的用户滚动输入；及
响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面。
3.根据权利要求2所述的页面显示方法，其特征在于，所述通过自动滚动模式滚动所述目标页面，包括：
若滚动到所述视窗中的内容包括符合预设规则的内容，则暂停滚动或降低滚动速度。
4.根据权利要求2所述的页面显示方法，其特征在于，所述通过自动滚动模式滚动所述目标页面，包括：
将待显示内容从下到上移动并以预定动画效果进入到所述视窗中；
其中，所述待显示内容为所述目标页面中位于所述视窗外并欲滚动到所述视窗的部分区域。
5.根据权利要求4所述的页面显示方法，其特征在于，所述目标页面包括对话页面，所述对话页面用于从上到下分列多条对话，所述待显示内容包括目标对话；所述将待显示内容从下到上移动并以预定动画效果进入到所述视窗中，包括：
确定所述目标对话，所述目标对话为所述视窗当前显示的最后一条对话的下一条对话；
伴随透明度逐渐增加的动画效果，将所述目标对话从所述视窗外自动移动到所述视窗内。
6.根据权利要求5所述的页面显示方法，其特征在于，
所述将待显示内容从下到上移动并以预定动画效果进入到所述视窗中，还包括：
当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长；
在所述暂停达到所述预设时长的情况下，继续执行所述自动滚动，以显示后续对话。
7.根据权利要求6所述的页面显示方法，其特征在于，
所述当所述目标对话完全进入所述视窗中，则暂停所述自动滚动预设时长，包括：
确定所述目标对话的对话类型；及
根据所述目标对话的对话类型，调整所述预设时长。
8.根据权利要求5至7任意一项所述的页面显示方法，其特征在于，所述通过自动滚动模式滚动所述目标页面，还包括：
在页面渲染之前，通过requestAnimationFrame为所述目标对话配置一个自动滚动任务；
基于所述自动滚动任务，对所述目标页面进行自动滚动；其中：
当所述自动滚动任务开始时，配置表示处于自动滚动模式的第一标识；
当所述自动滚动任务结束时，配置表示未处于所述自动滚动模式的第二标识。
9.根据权利要求8所述的页面显示方法，其特征在于，所述确定针对目标页面的用户滚动输入，包括：
接收基于滚动事件触发的滚动回调；
基于所述滚动回调，确定所述自动滚动的当前标识；
在所述当前标识为第一标识的情形下，确定所述滚动事件来源于所述自动滚动；
在所述当前标识为所述第二标识的情形下，确定所述滚动事件来源于用户滚动输入。
10.根据权利要求9所述的页面显示方法，其特征在于，所述响应于所述用户滚动输入，停止所述自动滚动模式，并通过手动滚动模式滚动所述目标页面，包括：
在所述滚动事件来源于用户滚动输入的情形下，从所述自动滚动模式切换到所述手动滚动模式。
11.根据权利要求10所述的页面显示方法，其特征在于，还包括：
在所述手动滚动模式下，确定所述目标页面的移动方向；
若所述移动方向为从下向上，则以预定动画效果显示从所述视窗外进入所述视窗内的对话。
12.根据权利要求10所述的页面显示方法，其特征在于，还包括：
在所述目标页面停止滚动达到目标时长，则执行所述自动滚动模式。
13.一种页面显示系统，其特征在于，包括：
获取模块，用于获取目标页面，并确定所述目标页面的页面高度；
进入模块，用于若所述页面高度大于视窗的视窗高度，则进入自动滚动模式；及
自动滚动模块，用于通过视窗显示目标页面中的部分区域，并通过自动滚动模式滚动所述目标页面。
14.一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至12任一项所述方法的步骤。
15.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行权利要求1至12任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111588963.4A CN114281460A (zh) | 2021-12-23 | 2021-12-23 | 页面显示方法和系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111588963.4A CN114281460A (zh) | 2021-12-23 | 2021-12-23 | 页面显示方法和系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114281460A true CN114281460A (zh) | 2022-04-05 |
Family
ID=80874422
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111588963.4A Pending CN114281460A (zh) | 2021-12-23 | 2021-12-23 | 页面显示方法和系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114281460A (zh) |
Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110093811A1 (en) * | 2009-10-15 | 2011-04-21 | Nhn Corporation | System and method for performing auto scroll |
| US20110119714A1 (en) * | 2009-11-19 | 2011-05-19 | Verizon Patent And Licensing, Inc. | Autoscrolling through interactive television content |
| US20140137031A1 (en) * | 2012-11-15 | 2014-05-15 | Nintendo Co., Ltd. | Display control device, storing medium, display system, and display method |
| CN104714735A (zh) * | 2015-03-19 | 2015-06-17 | 小米科技有限责任公司 | 页面滚动显示方法及装置 |
| CN105094643A (zh) * | 2015-07-30 | 2015-11-25 | 努比亚技术有限公司 | 页面显示控制方法及装置 |
| US20160035119A1 (en) * | 2014-07-29 | 2016-02-04 | Naver Corporation | Method and apparatus for controlling display and computer program for executing the method |
| CN105426084A (zh) * | 2015-12-10 | 2016-03-23 | 小米科技有限责任公司 | 界面切换方法、装置及终端 |
| CN105608102A (zh) * | 2015-10-12 | 2016-05-25 | 网易传媒科技（北京）有限公司 | 一种页面加载方法和设备 |
| CN105745614A (zh) * | 2013-12-18 | 2016-07-06 | 三星电子株式会社 | 用于移动终端中的滚动控制的方法和设备 |
| CN105892848A (zh) * | 2015-12-31 | 2016-08-24 | 乐视移动智能信息技术（北京）有限公司 | 页面浏览方法及装置 |
| CN107728918A (zh) * | 2017-09-27 | 2018-02-23 | 北京三快在线科技有限公司 | 浏览连续页面的方法、装置及电子设备 |
| CN108108377A (zh) * | 2016-11-24 | 2018-06-01 | 广州市动景计算机科技有限公司 | 浏览器页面跳转方法、装置及终端设备 |
| CN110032320A (zh) * | 2019-04-08 | 2019-07-19 | 维沃移动通信有限公司 | 一种页面滚动的控制方法、装置及终端 |
| CN113821741A (zh) * | 2021-08-12 | 2021-12-21 | 深圳点猫科技有限公司 | 一种平滑滚动导航实现方法、装置、电子设备及存储介质 |
-
2021
- 2021-12-23 CN CN202111588963.4A patent/CN114281460A/zh active Pending
Patent Citations (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110093811A1 (en) * | 2009-10-15 | 2011-04-21 | Nhn Corporation | System and method for performing auto scroll |
| US20110119714A1 (en) * | 2009-11-19 | 2011-05-19 | Verizon Patent And Licensing, Inc. | Autoscrolling through interactive television content |
| US20140137031A1 (en) * | 2012-11-15 | 2014-05-15 | Nintendo Co., Ltd. | Display control device, storing medium, display system, and display method |
| CN105745614A (zh) * | 2013-12-18 | 2016-07-06 | 三星电子株式会社 | 用于移动终端中的滚动控制的方法和设备 |
| US20160035119A1 (en) * | 2014-07-29 | 2016-02-04 | Naver Corporation | Method and apparatus for controlling display and computer program for executing the method |
| CN104714735A (zh) * | 2015-03-19 | 2015-06-17 | 小米科技有限责任公司 | 页面滚动显示方法及装置 |
| CN105094643A (zh) * | 2015-07-30 | 2015-11-25 | 努比亚技术有限公司 | 页面显示控制方法及装置 |
| CN105608102A (zh) * | 2015-10-12 | 2016-05-25 | 网易传媒科技（北京）有限公司 | 一种页面加载方法和设备 |
| CN105426084A (zh) * | 2015-12-10 | 2016-03-23 | 小米科技有限责任公司 | 界面切换方法、装置及终端 |
| CN105892848A (zh) * | 2015-12-31 | 2016-08-24 | 乐视移动智能信息技术（北京）有限公司 | 页面浏览方法及装置 |
| CN108108377A (zh) * | 2016-11-24 | 2018-06-01 | 广州市动景计算机科技有限公司 | 浏览器页面跳转方法、装置及终端设备 |
| CN107728918A (zh) * | 2017-09-27 | 2018-02-23 | 北京三快在线科技有限公司 | 浏览连续页面的方法、装置及电子设备 |
| CN110032320A (zh) * | 2019-04-08 | 2019-07-19 | 维沃移动通信有限公司 | 一种页面滚动的控制方法、装置及终端 |
| CN113821741A (zh) * | 2021-08-12 | 2021-12-21 | 深圳点猫科技有限公司 | 一种平滑滚动导航实现方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11379108B2 (en) | Display controlling method, terminal, information processing apparatus, and storage medium | |
| CN106021549B (zh) | Web应用程序的页面控制方法、装置及终端设备 | |
| JP5897715B2 (ja) | コンピュータによる処理方法 | |
| CN106331345B (zh) | 一种交互消息展示方法、装置及系统 | |
| US11727197B2 (en) | System and method for serving interactive advertising content with responsive animations | |
| CN103020110A (zh) | 创建并维护所浏览的文档的图像 | |
| CN108282683B (zh) | 一种视频界面显示方法及装置 | |
| CA2810365A1 (en) | Branded browser frame | |
| CN113286201B (zh) | 推荐信息展示方法、装置、电子设备和存储介质 | |
| CN109740081B (zh) | 页面加载方法及装置 | |
| CN113434138B (zh) | 信息显示方法、装置和电子设备 | |
| CN113849713A (zh) | 一种搜索结果展现方法、装置、计算机设备及存储介质 | |
| CN114281460A (zh) | 页面显示方法和系统 | |
| CN112883212A (zh) | 多媒体内容展示的控制方法、装置、电子设备和介质 | |
| CN114640876B (zh) | 多媒体业务视频显示方法、装置、计算机设备及存储介质 | |
| CN112416216A (zh) | 作品的显示方法、电子设备和存储介质 | |
| CN112835502A (zh) | 一种页面显示方法、电子设备及存储介质 | |
| CN113434073A (zh) | 活动窗口的控制方法、装置、电子设备及可读存储介质 | |
| KR101893093B1 (ko) | 컨텐츠 제공 시스템, 방법 및 컴퓨터 프로그램 | |
| CN110968783A (zh) | 内容信息推荐的方法和装置 | |
| JP6665067B2 (ja) | 表示方法およびプログラム | |
| CN110955473A (zh) | 显示加载提示信息的方法及装置 | |
| CN114610190B (zh) | 界面编辑方法、装置、电子设备和可读介质 | |
| US20230244366A1 (en) | In-page navigation | |
| CN114138158B (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 |