CN114690980A - 页面浏览进度显示方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请提供了一种页面浏览进度显示方法、装置、计算机设备和存储介质，该方法包括：显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；在所述内容显示区中，显示所述当前页签的页面内容的至少部分；在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。本方案能大大提高信息量。

Description

页面浏览进度显示方法、装置、计算机设备和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种页面浏览进度显示方法、装置、计算机设备和存储介质。

背景技术

随着科学技术的飞速发展，线上方式越来越高效便捷，所以，大家越来越习惯于线上获取信息。浏览页面即为一种线上获取信息的重要方式。用户可以通过滚动页面来查看更多的页面内容。在用户查看页面内容的过程中，通常需要知道当前查看的页面内容量，以便对当前阅读浏览进行把控。

传统方法中，不论是PC端、web端还是移动终端，用户均是通过右侧滚动条来自我感知当前查看的页面内容量。然而，滚动条位于界面最右侧，显示隐蔽，且移动端多为非常显滚动条，从而导致能够给用户做页面内容浏览把控的信息量很少，具有一定的局限性。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高信息量的页面浏览进度显示方法、装置、计算机设备、存储介质和计算机程序产品。

第一方面，本申请提供了一种页面浏览进度显示方法。所述方法包括：

显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；

在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

第二方面，本申请还提供了一种页面浏览进度显示装置。该装置包括：

显示模块，用于显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

浏览进度提示模块，用于在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

在其中一个实施例中，所述浏览进度提示模块还用于当所述当前页签的页面内容在所述内容显示区中的浏览进度发生变化时执行以下至少一种处理：改变所述当前页签的页签标题栏的显示状态，使得所述显示状态与所述浏览进度相匹配；在所述当前页签的页签标题栏中添加用于反映所述浏览进度的附加提示信息。

在其中一个实施例中，所述浏览进度提示模块还用于执行以下至少一种处理：更新显示所述页签标题栏上挂载的进度条元素；其中，所述进度条元素呈现的进度大小与所述浏览进度的大小相关；更新显示所述页签标题栏的颜色；其中，所述颜色的深浅程度与所述浏览进度的大小相关；更新显示所述页签标题栏的文字；其中，所述文字的大小与所述浏览进度的大小相关。

在其中一个实施例中，所述浏览进度提示模块还用于根据当前浏览至的页面内容在所述当前页签的页面内容中所处的位置，确定所述进度条元素的进度表征属性的值；所述进度表征属性是表征进度的属性；基于所述进度表征属性的值更新显示所述进度条元素。

在其中一个实施例中，所述浏览进度提示模块还用于监听浏览相关事件，并实时获取基于所述浏览相关事件针对所述当前标签的页面内容产生的浏览高度；基于所述浏览高度和所述当前页签的页面内容的总高度，计算所述进度条元素的进度表征属性的值。

在其中一个实施例中，所述浏览进度提示模块还用于调用元素创建函数创建进度条元素；将创建的进度条元素挂载在所述页签标题栏上。

在其中一个实施例中，所述目标页面中显示有所述至少一个页签中各页签分别对应的页签标题栏；显示的页签标题栏中包括所述当前页签的页签标题栏；显示模块还用于响应于页签切换操作，在所述内容显示区中显示切换后的页签的页面内容，并保持切换前的页签的页签标题栏中显示的浏览进度或在切换前的页签的页签标题栏中不再显示相应浏览进度。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；

在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；

在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；

在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

上述页面浏览进度显示方法、装置、计算机设备、存储介质和计算机程序产品，针对具有至少一个页签的目标页面，在目标页面的内容显示区中显示当前页签的页面内容的至少部分，可以在内容显示区中对当前页签的页面内容进行浏览，并对当前页签的页签标题栏进行了改进，从而能够在当前页签的页签标题栏上，显示在内容显示区中针对当前页签的页面内容的浏览进度，能够更为准确、直观地表达页面浏览进度，大大提高了信息量。

附图说明

图1为一个实施例中页面浏览进度显示方法的应用环境图；

图2为一个实施例中页面浏览进度显示方法的流程示意图；

图3为一个实施例中未进行滚动浏览的初始状态的界面示意图；

图4为一个实施例中的滚动浏览状态下的界面示意图；

图5为一个实施例中当前页签的页面内容滚动浏览完毕的界面示意图；

图6为一个实施例中页签切换后的界面示意图；

图7为一个实施例中纵向页签视图；

图8为另一个实施例中页面浏览进度显示方法的流程示意图；

图9为一个实施例中页面浏览进度显示装置的结构框图；

图10为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的页面浏览进度显示方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

终端102显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签。终端102可以在所述内容显示区中，显示从服务器104中获取的当前页签的页面内容的至少部分。终端102可以在当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

在一个实施例中，终端102所显示的目标页面也可以是离线页面，即本申请实施例可以由终端102独立实现。

在一个实施例中，如图2所示，提供了一种页面浏览进度显示方法，该方法可以由终端实现，也可以通过终端和服务器的交互来实现。该方法包括以下步骤：

步骤202，显示具有至少一个页签的目标页面；目标页面中存在内容显示区和当前页签的页签标题栏。

可以理解，当前页签是至少一个页签中当前被选中的页签。

页签，即Tab，也称页面内容的选项卡。可以理解，一个页签对应一类页面内容，即，每个页签具有相对应的页面内容。比如，不同页签可以对应不同主题的页面内容。

内容显示区，是目标页面中用于显示页面内容的区域。可以理解，内容显示区中每次仅显示一个页签的页面内容。即，目标页面具有的至少一个页签中，仅有当前被选中的页签(即当前页签)的页面内容会在内容显示区中显示。

目标页面中还会显示当前页签的页签标题栏。页签标题栏中显示有页签的标题，相当于页签的一种可视化标识，用于标识页签对应的页面内容所属的主题。

可以理解，这里并不限定目标页面仅显示当前页签的页签标题栏，还可以显示其他至少部分非当前页签的页签标题栏，对此不限定。

需要说明的是，本申请对不同页签的页面内容之间的关系不做限定，只要通过页签形式来进行相应页面内容展示的情况，都属于本申请所涉及的场景。可以理解，各个页签对应的页面内容彼此之间可以具有关联关系。比如，将同一对象的内容通过多页签的形式进行分主题展示，每个页签用于展示其中一个主题下的页面内容，那么，多个页签的页面内容就构成了这个对象的全部内容，所以，这多个页签的页面内容之间彼此具有一定的关联关系。各个页签的页面内容也可以是相互独立彼此之间不相关，比如，不同页签各自显示的页面内容可以属于不同对象的内容，这种情况下各个页签对应的页面内容就是彼此独立的。

步骤204，在内容显示区中，显示当前页签的页面内容的至少部分。

至少部分是指一部分或者全部。如果内容显示区比当前页签的页面内容所占据的区域要大，则可以一次性显示当前页签的所有页面内容。然而，内容显示区也可能比当前页签的页面内容所占据的区域要小，而无法一次性显示当前页签的所有页面内容。因此，内容显示区中显示有当前页签的页面内容中的至少部分内容。

需要说明的是，步骤202和204并不限定存在时序上的先后顺序，这里仅是为了表述清晰，以两个步骤的形式来描述而已，对于用户而言，可以在看到目标页面的时候一并看到内容显示区中显示的当前页签的页面内容的至少部分内容。

为便于理解，现结合图3进行示意说明。图3示意出一个目标页面，假设该目标页面中具有3个页签，该目标页面中显示有3个页签的页签标题栏，分别用页签标题1至页签标题3来进行示意。即，页签标题1至页签标题3所位于的标题区域即为各自示意的页签标题栏。图3中用XXX表示的即为在内容显示区中显示的页面内容。可以理解，内容显示区中仅会显示当前被选中的页签的页面内容，其余2个未被选中的页签的页面内容则不会在内容显示区中显示。假设是对应于页签标题1的页签被选中，而该页签的页面内容比较多比较长，则在内容显示区中仅会显示该页签的一部分页面内容，而不会显示该页签的全部页面内容。后续用户可以在该内容显示区中对该页签的页面内容进行滚动浏览。从图3中看到，图3中页签标题1至页签标题3上面还显示有一个“标题”字样，这里的“标题”只是在图3的示例中用于示意主体框架的标题，并不限定必须存在这个主体框架的标题。

步骤206，在当前页签的页签标题栏上，显示在内容显示区中针对当前页签的页面内容的浏览进度。

可以理解，在内容显示区中显示当前页签的页面内容的至少部分内容的情况下，用户就可以在内容显示区中对当前页签的页面内容进行浏览，比如，可以通过拖动滚动条、滚动鼠标、点击或长按键盘方向键等方式来滚动当前页签的页面内容，从而让内容显示区中显示的当前页签的页面内容发生变化，以对当前页签的页面内容进行浏览。

需要说明的是，传统的页签标题栏仅用于标识页签，充当一个标题的作用，本申请中的页签标题栏是改进后的、不同于传统的页签标题栏，本申请的页签标题栏被赋予了显示浏览进度的功能。因此，在对当前页签的页面内容进行浏览的过程中，终端可以在当前页签的页签标题栏上，显示在内容显示区中针对所述当前页签的页面内容的浏览进度。

在一个实施例中，终端可以通过改变当前页签的页签标题栏自身的显示状态，来起到显示针对当前页签的页面内容的浏览进度的作用。

在另一个实施例中，终端也可以通过在当前页签的页签标题栏上添加反映浏览进度的附加提示信息，来使得页签标题栏显示针对当前页签的页面内容的浏览进度。举例说明，可以在页签标题栏上添加反映浏览进度的提示文字或者提示图片等进度提示信息。比如，假设针对当前页签的页面内容浏览了20％的页面内容，则可以在页签标题栏上添加“20％”的提示文字。

可以理解，当所述当前页签的页面内容在所述内容显示区中的浏览进度发生变化时，可以执行改变所述当前页签的页签标题栏的显示状态和在所述当前页签的页签标题栏中添加用于反映所述浏览进度的附加提示信息处理中的至少一种处理。

上述页面浏览进度显示方法，针对具有至少一个页签的目标页面，在目标页面的内容显示区中显示当前页签的页面内容的至少部分，可以在内容显示区中对当前页签的页面内容进行浏览，并对当前页签的页签标题栏进行了改进，从而能够在当前页签的页签标题栏上，显示在内容显示区中针对当前页签的页面内容的浏览进度，能够更为准确、直观地表达页面浏览进度，因而也能让用户直观、便捷地掌握当前页签下的内容量、当前的阅读位置以及剩余阅读量，大大提高了信息量。

此外，如果用户因无法准确知晓浏览进度则一般会反复进行重复翻看和重复加载显示一些页面内容，从而会造成不必要的***资源浪费，本申请的方案则可以通过提高更为准确直观的信息量，一定程度上减少***资源浪费。

在一个实施例中，步骤206在当前页签的页签标题栏上，显示在内容显示区中针对当前页签的页面内容的浏览进度包括：当该当前页签的页面内容在内容显示区中的浏览进度发生变化时，相应改变当前页签的页签标题栏的显示状态，使得显示状态与浏览进度相匹配。

可以理解，改变页签标题栏的显示状态，是指对页签标题栏自身做改变，从而随着浏览进度的变化对页签标题栏进行不同的呈现。需要说明的是，不论是通过哪种方式改变页签标题栏的显示状态，其显示状态都需要始终与浏览进度相匹配，从而实现通过页签标题栏的改变来提示当前页签的页面内容的浏览进度。

在一个实施例中，终端可以基于针对当前页签的页面内容的浏览进度，相应改变页签标题栏自身的可视化属性，从而使得页签标题栏的显示状态始终与当前页签的页面内容的浏览进度相匹配。

具体地，终端可以基于针对当前页签的页面内容的浏览进度，相应改变页签标题栏自身的颜色、页签标题栏中标题文字的格式、以及页签标题栏自身的结构样式等至少一种可视化属性，来改变页签标题栏的显示状态，以使得页签标题栏的显示状态始终与当前页签的页面内容的浏览进度相匹配。

举例说明，终端可以通过改变页签标题栏自身的颜色的深浅，来显示针对当前页签的页面内容的浏览进度，颜色的深浅随着浏览进度的大小的变化而变化。即，颜色的深浅程度与所述浏览进度的大小相关。比如，浏览进度越大，颜色越深，浏览进度越小，颜色越浅。

终端也可以通过改变页签标题栏中标题文字的大小或者字体等格式，来显示针对当前页签的页面内容的浏览进度。文字的大小与浏览进度的大小相关。比如，浏览进度越大，字体越大，浏览进度越小，字体越小。

终端还可以改变页签标题栏自身的结构样式，比如，页签标题栏本身是图3所示的长方形，浏览到不同的进度，页签标题栏就呈现不同形状的几何图形，假设浏览进度越大，角越圆滑，随着浏览进度的变化，逐渐由长方形变成圆角矩形、再变成椭圆形，最终变成圆形。

在另一个实施例中，终端也可以对页签标题栏进行区域化的区分显示。区域化的区分显示，可以是将页签标题栏这整个区域分为两个子区域进行显示，通过实时地动态改变两个子区域的大小来体现针对当前页签的页面内容的浏览进度。具体地，第一子区域代表针对当前页签的页面内容已浏览的部分，该第一子区域的大小反映已浏览的内容的多少。第二子区域代表针对当前页签的页面内容剩余未浏览的部分，该第二子区域的大小反映剩余未浏览的内容的多少。第一子区域和第二子区域组合起来始终构成页签标题栏的区域。因而，通过动态改变第一子区域和第二子区域的大小，能够反映出针对当前页签的页面内容的浏览进度。

上述实施例中，通过改变页签标题栏的显示状态，使得显示状态与浏览进度相匹配，能够非常直观、便捷地向用户提供浏览进度把控的有效信息量，大大提高了阅读便利性。

在一个实施例中，改变当前页签的页签标题栏的显示状态，使得显示状态与浏览进度相匹配包括：更新显示页签标题栏上挂载的进度条元素。

其中，进度条元素呈现的进度大小与浏览进度的大小相关。

具体地，当前页签的页签标题栏上预先挂载有进度条元素。因此，当该当前页签的页面内容的浏览进度发生变化时，可以通过更新显示页签标题栏上挂载的进度条元素所呈现的进度大小，来反映出针对当前页签的页面内容的浏览进度。

在一个实施例中，终端可以预先创建进度条元素，并将创建的进度条元素挂载在页签标题栏上。具体地，终端可以调用元素创建函数创建初始的进度条元素，并为创建的进度条元素的各个属性配置相应的初始属性值。终端可以通过挂载函数，将创建的进度条元素作为页签标题栏的子元素挂载在页签标题栏上。

在一个实施例中，终端可以在页签标题栏的最底层***进度条元素，以实现进度条元素在页签标题栏上的挂载。

在一个实施例中，终端可以使用元素创建函数document.createElement('div')创建进度条元素progressBar，并配置进度条元素progressBar的颜色、高度、宽度等属性的初始属性值。可以理解，各个属性的初始属性值可以为0。配置完成后，调用挂载函数append()，执行tabPanel.appendChild(progressBar)的处理，以将该进度条元素progressBar作为页签标题栏tabPanel的子元素(即Child)挂载在页签标题栏tabPanel上。需要说明的是，进度条元素可以是div类型的块级元素还可以是其他类型的块级元素，对此不作限定，本实施例仅以div类型为例进行示意。

可以理解，图3中示意的是未进行滚动浏览的初始状态，所以，页签标题栏上尚未显示浏览进度。图4至图5则示意出在浏览过程中，通过挂载在页签标题栏上的进度条元素显示浏览进度。图4中示意出的是滚动浏览状态下的界面，当前标签是页签标题1对应的页签，页签标题1所示意的页签标题栏402中，前一段子区域的颜色与后一段子区域的颜色进行了区分显示，反映了挂载在页签标题1示意的页签标题栏中的进度条元素的进度，以此反映浏览进度。图5是对当前页签浏览完毕的界面，页面滚动到底部的页面状态。从图5中可知，由于当前页签的页面内容已经浏览完毕，所以页签标题1所示意的页签标题栏上挂载的进度条元素已经显示为进度加载完毕，即整个进度条元素都加载完毕了，页签标题栏的整个区域都进行了突出显示。从图5可以看到，页签标题1所位于的页签标题栏与页签标题2和页签标题3位于的页签标题栏的颜色不同，由此示意出页签标题1对应的整个页面内容都浏览完毕。

上述实施例中，通过在页签标题栏上挂载进度条的方式，在页签标题栏上通过进度条元素实时更新页签下页面内容的浏览进度，而不需要对页签标题栏进行很复杂的修改或再处理，能够更加便捷地向用户提供浏览进度把控的有效信息量，因而便捷所以一定程度上节省了***资源。

在一个实施例中，更新显示页签标题栏上挂载的进度条元素包括：根据当前浏览至的页面内容在当前页签的页面内容中所处的位置，确定进度条元素的进度表征属性的值；基于进度表征属性的值更新显示进度条元素。

其中，进度表征属性是表征进度的属性。

具体地，终端可以随时监听浏览相关事件，根据监听到的浏览相关事件来确定当前浏览至的页面内容在当前页签的页面内容中所处的位置，进而根据确定的位置确定进度条元素的进度表征属性的值。终端可以基于确定的进度表征属性的值实时更新显示进度条元素。其中，浏览相关事件，是用于触发对当前标签的页面内容进行浏览的事件。

在一个实施例中，进度表征属性可以包括进度条元素的宽度属性、高度属性和颜色属性中的至少一种。

上述实施例中，根据当前浏览至的页面内容在当前页签的页面内容中所处的位置，更新挂载在页签标题栏上进度条元素的进度表征属性的值，即可以直观显示当前页签的页面内容的浏览进度，非常的便捷、有效，避免了大量分析处理，一定程度上也节省了***资源。

在一个实施例中，根据当前浏览至的页面内容在当前页签的页面内容中所处的位置，确定进度条元素的进度表征属性的值包括：监听浏览相关事件，并实时获取基于浏览相关事件针对当前标签的页面内容产生的浏览高度；基于浏览高度和当前页签的页面内容的总高度，计算进度条元素的进度表征属性的值。

具体地，终端可以监听浏览相关事件。由于浏览相关事件可以对当前标签的页面内容产生滚动浏览，所以，终端可以实时获取基于浏览相关事件针对当前标签的页面内容产生的浏览高度。浏览高度，用于表征当前浏览至的位置与当前标签的顶部起始浏览位置之间的大小。终端可以基于浏览高度和当前页签的页面内容的总高度，计算进度条元素的进度表征属性的值。

在一个实施例中，终端可以确定浏览高度和当前页签的页面内容的总高度的比值，将该比值乘以页签标题栏的宽度值，得到进度条元素的进度表征属性的值。

在一个实施例中，浏览相关事件包括鼠标滚动事件、滚动条拖动事件和按键事件中的任意一种。即，可以通过鼠标滚动事件、拖动内容显示区边缘处的滚动条、或者点击键盘中的方向键来触发滚动浏览页面内容。

在一个实施例中，终端可以监听鼠标滚动事件，实时获取页面已向上滚动的浏览高度scrollTop值，并获取当前页签的页面内容的总高度scrollHeight，通过进度条元素宽度计算函数getProgressBarWidth()计算当前进度条宽度值，并将该宽度值更新到进度条元素progressBar的宽度属性中，以对进度条元素progressBar进行更新显示。

在一个实施例中，进度条元素宽度计算函数可以通过以下方式计算进度条元素的宽度值。

const getProgressBarWidth＝()＝>{

const barWidth＝scrollTop*tabPanelWidth/scrollHeight。

return barWidth

}

可以理解，上述说明，进度条元素宽度计算函数可以将浏览高度和当前页签的页面内容的总高度的比值乘以页签标题栏的宽度值，得到进度条元素的宽度值。

在一个实施例中，当页面滚动到底部，即进度条元素的宽度与页签标题栏宽度相等时，则对进度条元素进行浏览完毕标示，比如，可以更新进度条元素的背景色为预设颜色，还可以通过其他方式进行浏览完毕的标示。

上述实施例中，只需要简单地进行事件监听以及高度比值的计算，就能确定出更新挂载在页签标题栏上进度条元素的进度表征属性的值，从而直观显示当前页签的页面内容的浏览进度，非常的便捷、有效，避免了大量分析处理，一定程度上也节省了***资源。而且，通过实时更新进度表征属性的值，能够及时、准确地在页签标题栏上显示所挂载的进度条元素的进度，因而及时、准确地直观呈现了对当前页面的页面内容的浏览进度。

在一个实施例中，目标页面中显示有至少一个页签中各页签分别对应的页签标题栏；显示的页签标题栏中包括当前页签的页签标题栏；该方法还包括：响应于页签切换操作，在内容显示区中显示切换后的页签的页面内容，以及在切换后的页签的页签标题栏上显示针对该切换后的页签的页面内容的浏览进度。

可以理解，切换后的页签即为新的当前页签，所以在页签切换后，可以在内容显示区中更新显示为切换后的页签的页面内容的至少部分，并在该切换后的页签的页签标题栏上，显示在内容显示区中针对该切换后的页签的页面内容的浏览进度。

图6即为一个实施例中页签切换后的示意图。图6是从页签标题1对应的页签切换为页签标题2对应的页签，所以，内容显示区中显示的是页签标题2对应的页签下的页面内容，且页签标题2所示意的页签标题栏上显示了相应的浏览进度。

需要说明的是，在切换页签之后，对于切换前的页签的页签标题栏来说，可以在该切换前的页签的页签标题栏中保持显示相应的浏览进度，也可以在切换前的页签的页签标题栏中不再显示浏览进度，对此不做限定。

上述实施例中，由于在各个页签的页签标题栏上显示相应的浏览进度，所以，在切换页签的情况下，也能便捷、直观地反映切换后的页签的页面内容的浏览进度，而不会让各个页签下的页面内容的浏览进度混淆，非常的便捷和准确。

在一个实施例中，目标页面中显示有至少一个页签中各页签分别对应的页签标题栏；显示的页签标题栏中包括当前页签的页签标题栏；该方法还包括：响应于页签切换操作，在内容显示区中显示切换后的页签的页面内容，并保持切换前的页签的页签标题栏中显示的浏览进度。

具体地，目标页面中显示有至少一个页签中各页签分别对应的页签标题栏，用户可以进行页签切换操作，以从中选中想要切换显示的页签。终端可以响应于页签切换操作，在内容显示区中显示切换后的页签的页面内容。可以理解，在进行页签切换后，可以在切换前的页签的页签标题栏中保持切换前所显示的浏览进度，从而即使切换了页签，也能知晓其他页签的内容浏览进度，大大提高了信息量。可以理解，在页签切换时，无论切换前的页签的页面内容是否被浏览完毕，都可以在切换前的页签的页签标题栏中保持切换前所显示的浏览进度。

在一个实施例中，在接收到页签切换操作时，若切换前的页签的页面内容未被浏览完毕，则可以在页签切换后，在切换前的页签的页签标题栏中保持切换前所显示的浏览进度。可以理解，若切换前的页签的页面内容未被浏览完毕则表明再被重新浏览的可能性比较大，所以，针对重新浏览可能性大的页签在其页签标题栏上显示浏览进度，能起到有效的标识提醒作用，对于重新浏览可能性小的页签，可以不再在其页签标题栏上显示相应浏览进度，一定程度上也节省了用于显示浏览进度的***资源。

需要说明的是，对于切换前的页签的页签标题栏来说，浏览进度的保持时间可以根据实际应用场景进行设定，例如，可以在切换前的页签未被选中的时长达到时长阈值时停止保持，在该情况下，用户长时间未选中切换前的页签，一定程度上证明用户暂时不需要浏览切换前的页签的页面内容，因此可以在切换前的页签的页签标题栏中停止显示浏览进度，如此，可以避免对用户的干扰；又例如，也可以一直保持至目标页面被关闭。

在一个实施例中，目标页面中还含有页签标识区，该页签标识区中显示有至少部分页签标题栏。图3中页签标题1至3所示意的页签标题栏位于页签标识区中。

在一个实施例中，页签标识区中的各个页签标题栏可以横向排列展示也可以纵向排列展示。图3至图5中示意的是横向页签视图。即示意的是页签标题栏横向排列展示的视图。图7为一个实施例中页签标题栏纵向排列展示的纵向页签视图。

在一个实施例中，针对之前浏览过但未浏览完毕的页签，若重新切回为当前页签，则可以基于该页签的页签标题栏中显示的浏览进度，在内容显示区中直接定位显示到相应的之前已浏览至的页面内容。通过合理利用页签标题栏中显示的浏览进度可以快速定位至之前已浏览至的页面内容，提高了浏览效率，避免了无效浏览造成的资源浪费。

图8为一个实施例中页面浏览进度显示方法的流程示意图。参照图8，预先创建进度条元素，将进度条元素的属性的初始默认值设置为0，并在页签标题栏最底层***进度条元素，以将进度条元素挂载至页签标题栏上。在检测到针对当前页签的页面内容的滚动事件后，计算已滚动的页面内容占当前页签的页面内容的总高度的比值，基于该比值更新到页签标题栏上挂载的进度条元素中，将进度条元素中对应已浏览部分的进度表示区域进行突出显示，以体现浏览进度。判断页面是否滚动到底部，若否，则返回继续计算已滚动的页面内容占当前页签的页面内容的总高度的比值，直至页面滚动到底部后，将进度条元素的比值更新为100％，并设置完成状态颜色。

应该理解的是，虽然上述流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，本申请各实施例中的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图9所示，提供了一种页面浏览进度显示装置900，该装置包括：显示模块902以及浏览进度提示模块904；其中：

显示模块902，用于显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；在所述内容显示区中，显示所述当前页签的页面内容的至少部分。

浏览进度提示模块904，用于在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

在一个实施例中，所述浏览进度提示模块904还用于当所述当前页签的页面内容在所述内容显示区中的浏览进度发生变化时执行以下至少一种处理：改变所述当前页签的页签标题栏的显示状态，使得所述显示状态与所述浏览进度相匹配；在所述当前页签的页签标题栏中添加用于反映所述浏览进度的附加提示信息。

在一个实施例中，所述浏览进度提示模块904还用于执行以下至少一种处理：更新显示所述页签标题栏上挂载的进度条元素；其中，所述进度条元素呈现的进度大小与所述浏览进度的大小相关；更新显示所述页签标题栏的颜色；其中，所述颜色的深浅程度与所述浏览进度的大小相关；更新显示所述页签标题栏的文字；其中，所述文字的大小与所述浏览进度的大小相关。

在一个实施例中，所述浏览进度提示模块904还用于根据当前浏览至的页面内容在所述当前页签的页面内容中所处的位置，确定所述进度条元素的进度表征属性的值；所述进度表征属性是表征进度的属性；基于所述进度表征属性的值更新显示所述进度条元素。

在一个实施例中，所述浏览进度提示模块904还用于监听浏览相关事件，并实时获取基于所述浏览相关事件针对所述当前标签的页面内容产生的浏览高度；基于所述浏览高度和所述当前页签的页面内容的总高度，计算所述进度条元素的进度表征属性的值。

在一个实施例中，所述浏览进度提示模块904还用于调用元素创建函数创建进度条元素；将创建的进度条元素挂载在所述页签标题栏上。

在一个实施例中，所述目标页面中显示有所述至少一个页签中各页签分别对应的页签标题栏；显示的页签标题栏中包括所述当前页签的页签标题栏；显示模块902还用于响应于页签切换操作，在所述内容显示区中显示切换后的页签的页面内容，并保持切换前的页签的页签标题栏中显示的浏览进度或在切换前的页签的页签标题栏中不再显示相应浏览进度。

上述页面浏览进度显示装置，针对具有至少一个页签的目标页面，在目标页面的内容显示区中显示当前页签的页面内容的至少部分，可以在内容显示区中对当前页签的页面内容进行浏览，并对当前页签的页签标题栏进行了改进，从而能够在当前页签的页签标题栏上，显示在内容显示区中针对当前页签的页面内容的浏览进度，能够更为准确、直观地表达页面浏览进度，大大提高了信息量。

关于页面浏览进度显示装置的具体限定可以参见上文中对于页面浏览进度显示方法的限定，在此不再赘述。上述页面浏览进度显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器或终端，其内部结构图可以如图10所示。在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图10所示。该计算机设备包括通过***总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作***和计算机程序。该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面浏览进度显示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图10中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面浏览进度显示方法，其特征在于，包括：

显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；

在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

2.根据权利要求1所述的方法，其特征在于，所述在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度包括：

当所述当前页签的页面内容在所述内容显示区中的浏览进度发生变化时，执行以下至少一种处理：

改变所述当前页签的页签标题栏的显示状态，使得所述显示状态与所述浏览进度相匹配；

在所述当前页签的页签标题栏中添加用于反映所述浏览进度的附加提示信息。

3.根据权利要求2所述的方法，其特征在于，所述改变所述当前页签的页签标题栏的显示状态，使得所述显示状态与所述浏览进度相匹配包括：

执行以下至少一种处理：

更新显示所述页签标题栏上挂载的进度条元素；其中，所述进度条元素呈现的进度大小与所述浏览进度的大小相关；

更新显示所述页签标题栏的颜色；其中，所述颜色的深浅程度与所述浏览进度的大小相关；

更新显示所述页签标题栏的文字；其中，所述文字的大小与所述浏览进度的大小相关。

4.根据权利要求3所述的方法，其特征在于，所述更新显示所述页签标题栏上挂载的进度条元素包括：

根据当前浏览至的页面内容在所述当前页签的页面内容中所处的位置，确定所述进度条元素的进度表征属性的值；所述进度表征属性是表征进度的属性；

基于所述进度表征属性的值更新显示所述进度条元素。

5.根据权利要求4所述的方法，其特征在于，所述根据当前浏览至的页面内容在所述当前页签的页面内容中所处的位置，确定所述进度条元素的进度表征属性的值包括：

监听浏览相关事件，并实时获取基于所述浏览相关事件针对所述当前标签的页面内容产生的浏览高度；

基于所述浏览高度和所述当前页签的页面内容的总高度，计算所述进度条元素的进度表征属性的值。

6.根据权利要求3所述的方法，其特征在于，所述方法还包括：

调用元素创建函数创建进度条元素；

将创建的进度条元素挂载在所述页签标题栏上。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述目标页面中显示有所述至少一个页签中各页签分别对应的页签标题栏；显示的页签标题栏中包括所述当前页签的页签标题栏；

所述方法还包括：

响应于页签切换操作，在所述内容显示区中显示切换后的页签的页面内容，并保持切换前的页签的页签标题栏中显示的浏览进度或在切换前的页签的页签标题栏中不再显示相应浏览进度。

8.一种页面浏览进度显示装置，其特征在于，所述装置包括：

显示模块，用于显示具有至少一个页签的目标页面；所述目标页面中存在内容显示区和当前页签的页签标题栏；所述当前页签是所述至少一个页签中当前被选中的页签；在所述内容显示区中，显示所述当前页签的页面内容的至少部分；

浏览进度提示模块，用于在所述当前页签的页签标题栏上，显示在所述内容显示区中针对所述当前页签的页面内容的浏览进度。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images