CN117492622A - 进度条展示方法和装置、电子设备、计算机可读介质 - Google Patents

Abstract

本公开提供了一种进度条展示方法和装置。该方法的一具体实施方式包括：确定待展示页面；为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。该实施方式简化了界面上进度条的显示方式。

Description

进度条展示方法和装置、电子设备、计算机可读介质

技术领域

本公开涉及计算机技术领域，具体涉及进度条展示方法和装置、电子设备以及计算机可读介质。

背景技术

在前端项目中，前端长展示页面中经常会在页面底部或顶部出现横向的滚动条，用以表示用户的阅读进度，长文章页面就是其中最典型的例子。

现有的技术，先要使用层叠样本表单处理进度条样式，然后通过直译式脚本语言方法监听页面滚动事件的触发，计算用户滑动页面的距离百分比，改变进度条的移动距离。此方法不仅在直译式脚本语言计算阶段较为繁琐，也因为需要通过直译式脚本语言监听页面滚动事件，导致页面频繁触发滚动事件，产生页面性能上的浪费。

发明内容

本公开的实施例提出了进度条展示方法和装置、电子设备、计算机可读介质。

第一方面，本公开的实施例提供了一种进度条展示方法，该方法包括：确定待展示页面；为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。

在一些实施例中，上述进度条层为待展示页面的背景层，为待展示页面设置进度条层包括：通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形；遮挡蒙层位于待展示页面的内容层与背景层之间。

在一些实施例中，上述线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形包括：设置为线性渐变的方向为从左下角到右上角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；进度条图形的一个直角边与第一方向平行，进度条图形的另一个直角边与第二方向平行，进度条图形的直角顶点与进度条显示区域的起始点重合。

在一些实施例中，上述进度条层为与具有进度条颜色的进度蒙层，为待展示页面设置进度条层包括：响应于进度蒙层在待展示页面的垂直投影为非三角形，旋转进度蒙层，直至进度蒙层在待展示页面的投影为直角三角形且该直角三角形的斜边与待展示页面的对角线重合为止，该直角三角形的直角顶点与进度条显示区域的起始点重合；固定进度蒙层和待展示页面之间的相对位置。

在一些实施例中，上述在进度条层上设置遮挡蒙层之前，方法还包括：调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外。

在一些实施例中，上述进度条层为待展示页面的背景层，调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外包括：采用层叠样本表单的计算属性调整背景层相对待展示页面沿第一方向偏移第一距离；采用层叠样本表单的计算属性调整背景层相对待展示页面沿第二方向偏移第二距离。

第二方面，本公开的实施例提供了一种进度条展示装置，该装置包括：确定单元，被配置成确定待展示页面；设置单元，被配置成为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；覆盖单元，被配置成在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；展示单元，被配置成响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。

在一些实施例中，上述进度条层为待展示页面的背景层，设置单元进一步被配置成：通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形；遮挡蒙层位于待展示页面的内容层与背景层之间。

在一些实施例中，线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；设置单元进一步被配置成：设置为线性渐变的方向为从左下角到右上角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；进度条图形的一个直角边与第一方向平行，进度条图形的另一个直角边与第二方向平行，进度条图形的直角顶点与进度条显示区域的起始点重合。

在一些实施例中，上述进度条层为与具有进度条颜色的进度蒙层，上述设置单元进一步被配置成：响应于进度蒙层在待展示页面的垂直投影为非三角形，旋转进度蒙层，直至进度蒙层在待展示页面的投影为直角三角形且该直角三角形的斜边与待展示页面的对角线重合为止，该直角三角形的直角顶点与进度条显示区域的起始点重合；固定进度蒙层和待展示页面之间的相对位置。

在一些实施例中，上述装置还包括调整单元，上述调整单元被配置成：调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外。

在一些实施例中，上述进度条层为待展示页面的背景层，上述调整单元进一步被配置成：采用层叠样本表单的计算属性调整背景层相对待展示页面沿第一方向偏移第一距离；采用层叠样本表单的计算属性调整背景层相对待展示页面沿第二方向偏移第二距离。

第三方面，本公开的实施例提供了一种电子设备，该电子设备包括：一个或多个处理器；存储装置，其上存储有一个或多个程序；当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如第一方面中任一实施例描述的方法。

第四方面，本公开的实施例提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面中任一实施例描述的方法。

本公开的实施例提供的进度条展示方法和装置，首先，确定待展示页面；其次，为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；再次，在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；最后，响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。由此，通过遮挡蒙层，为进度条显示区域的生成提供了可靠的支持；通过在待展示页面被滑动时，控制进度条层移动实现了进度条显示区域的进度条随着待展示页面内容变化而变化，通过本公开的进度条展示方法，简化了界面上进度条的显示方式。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本公开的其它特征、目的和优点将会变得更明显：

图1是根据本公开的进度条展示方法的一个实施例的流程图；

图2是本公开的进度条层的一种结构示意图；

图3是本公开的进度条层与遮挡蒙层相互配合的结构示意图；

图4是本公开的进度条显示区域展示进度条图形的结构示意图；

图5是本公开的进度条展示装置的一种结构示意图；

图6是适于用来实现本公开的实施例的电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。

传统技术中，先要使用CSS(Cascading Style Sheets，层叠样式表)处理进度条样式，然后通过直译式脚本语言监听页面滚动事件的触发，计算用户滑动页面的距离百分比，改变并显示进度条的移动距离，具体地，直译式脚本语言通过以下方式改变并显示进度条的移动距离：首先通过直译式脚本语言方法获取文档的高度、界面的滚动距离、浏览器窗口的可视高度，然后，通过这些值，计算出页面移动的百分比，最后得出滚动条需要移动的距离，计算完成后，再通过直译式脚本语言方法找到进度条的文档对象模型节点，移动对应的距离。

传统技术中，不仅直译式脚本语言计算阶段较为繁杂，由于需要通过直译式脚本语言监听页面滚动事件，会导致页面频繁触发滚动事件，产生页面性能上的浪费。

本公开提供了一种进度条展示方法，可以解决传统技术中需要通过直译式脚本语言频繁触发滚动事件、页面性能消耗严重的问题。如图1，示出了根据本公开的进度条展示方法的一个实施例的流程100，该进度条展示方法包括以下步骤：

步骤101，确定待展示页面。

本实施例中，待展示页面是待在屏幕上显示的页面，待展示页面可以具有相应的显示内容，也可以不具有相应的显示内容。

本实施例中，待展示页面包括：内容层和背景层，其中，对于实际要显示的内容，内容层用于显示文字、图形等实际内容，背景层用于为内容层配置相应的背景，例如，白色背景，或者蓝色背景。

本实施例中，待展示页面的规格一般大于屏幕的显示页面的规格，通过在显示页面上滑动待展示页面可以将待展示页面中包括所有内容显示出来。

本实施例中，待展示页面的形状为矩形，待展示页面的内容层和背景层的形状与待展示页面的形状相同。

步骤102，为待展示页面设置进度条层。

本实施例中，进度条层包括在第一方向上尺寸渐变的进度条图形。

本实施例中，进度条图形是尺寸渐变的图形，例如，进度条图形是直角三角形，第一方向是指由直角三角形的直角边至直角三角形的斜边的方向，通过第一方向三角形的面积变化，可以知道直角三角形在尺寸上逐渐增大，或者进度条图像是梯形，第一方向是指由梯形的上底到下底的方向，通过第一方向梯形的面积变化，可以知道梯形在尺寸上逐渐增大。

本实施例中，通过使进度条层包括在第一方向上尺寸渐变的进度条图形，可以凭借进度条图形的尺寸上的变化展示进度条的变化，进一步地，进度条图形上设置有进度条颜色或者进度条图像，通过进度条图形上进度条颜色或进度条图案可以在视觉上展示进度条图形的尺寸的变化，达到展示进度条变化的目的。

如图2所示，是进度条层200的一种结构示意图，在图2中，进度条图形201是三角形。

步骤103，在进度条层上设置遮挡蒙层。

本实施例中，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域。

本实施例中，遮挡蒙层是遮挡进度条层的图层，通过进度条层自身的进度条图形无法展示进度条对应的待展示页面的滑动进度的变化，并且通过进度条层的进度条图形一般也无法直接表现进度条的形状，而通过遮挡蒙层对进度条层进行部分遮挡(对进度条进行形状设置)，并且在进度条层移动(对进度条对应的待展示页面的滑动进度进行展示)时，可以有效地表现出进度条的形状和进度，其中，进度条是对应待展示页面的内容滑动速度和距离的可变化条。

本实施例中，遮挡蒙层的形状可以基于进度条形状的设置而设置，例如，当进度条为矩形时，则遮挡蒙层具有至少一条直线边，通过该直线边与显示屏幕配合，实现矩形的进度条显示区域，当进度条显示区域展示进度条图形时，可以实现相应矩形形状的进度条。

本实施例中，进度条可以是显示在屏幕的上部区域的上进度条，也可以是显示在屏幕的下部区域的下进度条，当进度条为下进度条时，进度条显示区域相应的位于屏幕的下部区域，如图3所示，进度条显示区域c显示有进度条层b的部分区域，在进度条层b上遮挡有遮挡蒙层a；当进度条为上进度条时，进度条显示区域相应的位于屏幕的上部区域。

本实施例中，遮挡蒙层可以安全通过CSS的属性进行设置得到，具体地，利用CSS的伪元素属性::after给整个页面增加一个遮挡蒙层，遮挡蒙层规格小于待展示页面的规格，相对于待展示页面规格，遮挡蒙层会留出待展示页面下面一个进度条的高度，再将蒙层背景属性background设置为白色#fff即可。

具体CSS属性::after参数设置示例如下：

content:""；

position:fixed；

top:0；

left:0；

bottom:5px；

right:0；

background:#fff；

z-index:-1；

在该设置示例中，content是遮挡蒙层显示内容；position是遮挡蒙层相对待展示页面的位置，通过该位置可知遮挡蒙层与待展示页面的相对位置固定；top、left、bottom、right是遮挡蒙层在待展示页面的在四个方向的投影，top是0说明遮挡蒙层与待展示页面的最顶边投影重合，left是0说明遮挡蒙层与待展示页面的最左边的边投影重合，right是0说明遮挡蒙层与待展示页面的最右边的边投影重合，bottom是5px说明遮挡蒙层的最下边小于待展示页面的最下边5px。Background是遮挡蒙层的颜色；z-index是遮挡蒙层的层级，相对于待展示页面，z-index较一个层级。

步骤104，响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。

本实施例中，当用户通过屏幕查看待展示页面的内容时，可以通过操作一些屏幕页面上的控件，达到滑动待展示页面的目的。进一步地，本公开进度提展示方法运行于其上的执行主体，可以在待展示页面被滑动时，控制进度条层沿第二方向移动，并在进度条层移动时，进度条图形也相应的展示在进度条显示区域。如图4所示，在待展示页面被滑动过程中，遮挡蒙层a遮挡了进度条层的部分区域，进度条显示区域c显示有进度条层的部分区域，d区域是进度条层还为被遮挡的部分，由于d区域位于屏幕外，属于不可显示区域。

本实施例中，执行主体可以通过设置层叠样本表单的属性，控制进度条层沿与第二方向移动。

可选地，待展示页面的滑动方向为第二方向，上述进度条展示方法运行于其上的执行主体还可以通过设置层叠样本表单的属性，使进度条层与待展示页面沿相同方向移动，由于进度条展示区域为展示进度条图形的区域，随着进度条图形的移动，进度条显示区域显示出进度条图形的不同尺寸的部分。例如，当进度条图形为直角三角形，则进度条显示区域在进度条图形移动过程，逐渐展示出直角三角形的顶角部分、直角三角形中间区域直至直角三角形的直角区域部分。

可选地，在屏幕上具有滚动条时，上述步骤204可以包括：通过设置层叠样本表单的背景图像的属性，使进度条层与滚动条沿相同方向移动，该背景图像的属性可以是background-attachment：fixed，通过设置的fixed可以使背景图片跟着滚动条一起移动。

本实施例中，通过进度条显示区域展示进度条图形可以得到进度条。当进度条显示区域设置在屏幕的下部区域时，进度条层与待展示页面的尺寸相同，并且进度条层与待展示页面正投影。

本实施例提供的进度条展示方法，通过页面层级视差，可以仅通过采取CSS处理得到待展示页面的进度条，简化了界面阅读进度条的实现方式。解决了传统方案通过JavaScript监听页面滚动事件，而因JavaScript监听频繁触发计算导致的页面性能浪费问题，提升了页面的性能。

本实施例提供的进度条展示方法，首先，确定待展示页面；其次，为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；再次，在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；最后，响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。由此，通过遮挡蒙层，为进度条显示区域的生成提供了可靠的支持；通过在待展示页面被滑动时，控制进度条层移动实现了进度条显示区域的进度条随着待展示页面内容变化而变化，通过本公开的进度条展示方法，简化了界面上进度条的显示方式。

在本公开的一些实施例中，上述进度条层为待展示页面的背景层，为待展示页面设置进度条层包括：通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形；遮挡蒙层位于待展示页面的内容层与背景层之间。

本实施例中，遮挡蒙层的层级比待展示页面的内容层的层级低，内容层位于遮挡蒙层的上层，待展示页面的内容层不会被遮挡蒙层遮挡；遮挡蒙层的层级比待展示页面的背景层的层级高，遮挡蒙层位于背景层的上层，背景层被遮挡蒙层部分遮挡，只有进度条显示区域可以显示背景层的颜色或图案。

本实施例中，通过设置层叠样本表单的背景图像的线性渐变属性可以在背景层上设置具有进度条颜色的进度条图形，通过进度条图形上进度条颜色与进度条层其他区域颜色的不同，有效地区分待展示页面的内容滑动的变化。

本实施例提供的进度条展示方法，在进度条层为待展示页面的背景层时，通过设置层叠样本表单的背景图像属性在背景层上生成具有渐变属性的进度条图形，简化了进度条层得到方式，提高了进度条层生成的便利性。

可选地，上述进度条层为待展示页面的背景层，为待展示页面设置进度条层包括：通过设置层叠样本表单的背景图像的图案属性，在背景层上生成进度条图形，该进度条图形具有统一的进度条图案，例如，网状图案、条状图案等。

在本公开的一些可选实现方式中，上述线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；上述通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形包括：设置为线性渐变的方向为从左下角到右上角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；进度条图形的一个直角边与第一方向平行，进度条图形的另一个直角边与第二方向平行，进度条图形的直角顶点与进度条显示区域的起始点重合。

本可选实现方式中，进度条颜色可以基于进度需求而设置，例如，进度条颜色为蓝色，或者进度条颜色为黑色。

如图2所示，是本公开的进度条层200的一种结构示意图，该进度条层200是待展示页面的背景层，在背景层设置直角三角形的进度条图形201，其中，进度条图形具有灰色的进度条颜色。

本可选实现方式中，背景图像的线性渐变属性是CSS中background-image的linear-gradient属性，该linear-gradient具有线性渐变的方向、起点颜色和终点颜色三种参数，通过设置三种参数可以得到进度条图形，并使进度条图形具有相应的进度条颜色。图2所示的进度条图形通过对三种参数进行如下式(1)设置得到。

background-image:linear-gradient(to right top，gray50％，#f 50％)(1)其中，在式(1)中，起点颜色是“gray”占整个背景层的50％，终点颜色是“#f”，是白色，也占整个背景层的50％。“to right top”是指从左下角到右上角的方向。

本可选实现方式提供的生成进度条图形的方式，依次设置线性渐变的方向、起始颜色以及终点颜色，得到直角三角形的进度条图形，为进度条图形的得到提供了一种可靠的实现方式。

可选地，线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；上述通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形包括：设置为线性渐变的方向为从右上角到左下角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；进度条图形的一个直角边与第一方向平行，进度条图形的另一个直角边与第二方向平行，进度条图形的直角顶点与进度条显示区域的起始点重合。

在本公开的一些可选实现方式中，上述进度条层为与具有进度条颜色的进度蒙层，上述为待展示页面设置进度条层包括：响应于进度蒙层在待展示页面的垂直投影为非三角形，旋转进度蒙层，直至进度蒙层在待展示页面的投影为直角三角形且该直角三角形的斜边与待展示页面的对角线重合为止，该直角三角形的直角顶点与进度条显示区域的起始点重合；固定进度蒙层和待展示页面之间的相对位置。

本可选实现方式中，进度条颜色可以基于进度显示需求而设置，例如，进度条颜色为蓝色，或者进度条颜色为灰色，或者进度条颜色为黑色等，通过旋转进度蒙层使进度蒙层在待展示页面的投影为直角三角形，且直角三角形的斜边与待展示页面的对角线重合，可以在控制进度蒙层沿第二方向运动时，有效地进行进度条的进度展示。

本可选实现方式中，遮挡蒙层的层级比待展示页面的层级低，待展示页面位于遮挡蒙层的上层，待展示页面的内容不会被遮挡蒙层遮挡；遮挡蒙层的层级比进度蒙层的层级高，遮挡蒙层位于进度蒙层的上层，进度蒙层被遮挡蒙层部分遮挡，只有进度条显示区域可以显示进度蒙层的颜色或图案。

本可选实现方式提供的为待展示页面设置进度条层的方法，通过设置具有进度条颜色的进度蒙层，并旋转进度蒙层，直至进度蒙层在待展示页面的投影为直角三角形且直角三角形的斜边与待展示页面的对角线重合，直角三角形的直角顶点与进度条显示区域的起始点重合，为进度条层的实现提供了一种可靠的实现方式。

可选地，上述为待展示页面设置进度条层包括：在待展示页面上方增加一个直角三角形的DIV(Division)块，且DIV块在待展示页面的投影的斜边与待展示页面的对角线重合，并且斜边的长度与对角线的长度相同，DIV块的直角顶点与进度条显示区域的起始点重合。

本实施例中，在待展示页面被滑动时，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形，可以得到了一个可以随着屏幕滑动而变化的进度条，但此时，当进度条层为待展示页面的背景层时，通过线性渐变属性可以进度条层设置进度条图形，由于是给整个背景层设置的线性渐变，线性渐变高度是整个页面的大小，且直角三角形的进度条图形此时是与整体页面文档的高度一致，此时页面滑动到最上方的时候进度条不会在最开始的位置，所处位置也在页面的最上方，但进度条要在页面的底部开始，即三角形的上角尖要在屏幕的左下角。同样当进度条层为进度蒙层时，也会面临上述问题。

在本公开的一些实施例中，上述在进度条层上设置遮挡蒙层之前，方法还包括：调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外。

本可选实现方式中，可以基于进度条层和待展示页面的规格，调整进度条层相对待展示页面之间的相对位置，具体地，当进度条层和待展示页面的规格相同时，将进度条层相对待展示页面调整设定距离，设定距离可以基于经验值决定，例如，设定距离为10px。

本可选实现方式提供的进度条展示方法，调整进度条相对待展示页面之间的相对位置，可以使进度条的进度条图形能够与待展示页面的页面内容相匹配，在待展示页面的页面内容初始滑动时，进度条图形可以是零位置开始，而在待展示页面的页面内容滑动到终止位置时，进度条图形还具有在进度条显示区域具有多余的显示，可以保证在待展示页面滑到最终位置时，进度条图形可以填充满进度条显示区域，保证进度条显示区域显示的可靠性。

可选地，上述进度条展示方法还包括：获取滑动条的位置，其中滑动条是标识待展示页面中内容的滑动距离的图形；基于滑动条的位置，确定进度条层的移动距离；上述响应于待展示页面被滑动时，控制进度条层沿与第一方向垂直的第二方向移动移动距离，并通过进度条显示区域展示进度条图形。

在本公开的一些可选实现方式中，上述进度条层为待展示页面的背景层，调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外包括：采用层叠样本表单的计算属性调整背景层相对待展示页面沿第一方向偏移第一距离；采用层叠样本表单的计算属性调整背景层相对待展示页面沿第二方向偏移第二距离。

本可选实现方式中，第二距离等于待展示页面的高度100％减去页面窗口高度100vh再加上进度条显示区域的高度。

或者，第二距离等于待展示页面的高度100％减去页面窗口高度100vh再加上进度条的高度，其中，进度条的高度可以预设高度，例如1px，如式(2)所示。

本可选实现方式中，第一距离等于待展示页面的宽度100％加上预设宽度值，预设宽度值可以基于需要而设置，例如，如式(2)所示，预设宽度值为10px。需要说明的是，px和vh都是浏览器技术里绘制页面样式的单位。px是像素，页面的相对长度单位，像素px是相对于显示器屏幕分辨率而言的。vh是相对于屏幕的高度，100vh即屏幕的高度。

本可选实现方式中，采用层叠样本表单的计算属性是背景大小设置属性，通过层叠样本表单的计算属性可以调整进度条图形的渐变的高度，具体地，层叠样本表单的计算属性如式(2)所示：

background-size:calc(100％+10px)calc(100％-100vh+1px)(2)

本可选实现方式中，通过将背景层偏移第一距离，可以使进度条在相对待展示页面的距进度条显示区域的起始的第一距离进行显示，当进度条是下进度条时，在待展示页面的页面内容开始位置，即相对屏幕中像素的列方向，滚动条滑动到顶部，进度条图形的直角三角形最小锐角的角尖处于屏幕的左下角，提高了显示的效果；通过将背景层偏移第二距离，可以使进度条在相对待展示页面的一定距离，当进度条是下进度条时，在待展示页面的页面内容的结束位置，即相对屏幕中像素的列方向，滚动条滑动到底部，进度条图形的直角三角形的下底边处于屏幕最下限，进度条显示区域被进度条图形被填充满，有效地填充进度条显示区域，提供了进度条显示效果。

进一步参考图5，作为对上述各图所示进度条展示方法的实现，本公开提供了进度条展示装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图5所示，本公开的实施例提供了一种进度条展示装置500，该装置500包括：确定单元501、设置单元502、覆盖单元503、展示单元504。其中，上述确定单元501，可以被配置成确定待展示页面。上述设置单元502，可以被配置成为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形。上述覆盖单元503，可以被配置成在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域。上述展示单元504，可以被配置成响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。

在本实施例中，进度条展示装置500中，确定单元501、设置单元502、覆盖单元503、排序单元504、展示单元505的具体处理及其所带来的技术效果可分别参考图1对应实施例中的步骤101、步骤102、步骤103、步骤104。

在一些实施例中，上述进度条层为待展示页面的背景层，设置单元502进一步被配置成：通过设置层叠样本表单的背景图像的线性渐变属性，在背景层生成进度条图形；遮挡蒙层位于待展示页面的内容层与背景层之间。

在一些实施例中，线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；设置单元502进一步被配置成：设置为线性渐变的方向为从左下角到右上角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；进度条图形的一个直角边与第一方向平行，进度条图形的另一个直角边与第二方向平行，进度条图形的直角顶点与进度条显示区域的起始点重合。

在一些实施例中，上述进度条层为与具有进度条颜色的进度蒙层，上述设置单元502进一步被配置成：响应于进度蒙层在待展示页面的垂直投影为非三角形，旋转进度蒙层，直至进度蒙层在待展示页面的投影为直角三角形且该直角三角形的斜边与待展示页面的对角线重合为止，该直角三角形的直角顶点与进度条显示区域的起始点重合；固定进度蒙层和待展示页面之间的相对位置。

在一些实施例中，上述装置还包括调整单元(图中未示出)，上述调整单元被配置成：调整进度条层相对待展示页面之间的相对位置，以使进度条图形在待展示页面的垂直投影在待展示页面之外。

在一些实施例中，上述进度条层为待展示页面的背景层，上述调整单元进一步被配置成：采用层叠样本表单的计算属性调整背景层相对待展示页面沿第一方向偏移第一距离；采用层叠样本表单的计算属性调整背景层相对待展示页面沿第二方向偏移第二距离。

本公开的实施例提供的进度条展示装置，首先，确定单元501确定待展示页面；其次，设置单元502为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；再次，覆盖单元503在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；最后，展示单元504响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。由此，通过遮挡蒙层，为进度条显示区域的生成提供了可靠的支持；通过在待展示页面被滑动时，控制进度条层移动实现了进度条显示区域的进度条随着待展示页面内容变化而变化，通过本公开的进度条展示方法，简化了界面上进度条的显示方式。

下面参考图6，其示出了适于用来实现本公开的实施例的电子设备600的结构示意图。

如图6所示，电子设备600可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM603中，还存储有电子设备600操作所需的各种程序和数据。处理装置601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、等的输入装置606；包括例如液晶显示器(LCD，Liquid Crystal Display)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然图6示出了具有各种装置的电子设备600，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图6中示出的每个方框可以代表一个装置，也可以根据需要代表多个装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处理装置601执行时，执行本公开的实施例的方法中限定的上述功能。

需要说明的是，本公开的实施例的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(Radio Frequency，射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述服务器中所包含的；也可以是单独存在，而未装配入该服务器中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该服务器执行时，使得该服务器：确定待展示页面；为待展示页面设置进度条层，进度条层包括在第一方向上尺寸渐变的进度条图形；在进度条层上设置遮挡蒙层，进度条层上未被遮挡的部分形成沿第一方向延伸的进度条显示区域；响应于待展示页面被滑动，控制进度条层沿与第一方向垂直的第二方向移动，并通过进度条显示区域展示进度条图形。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的实施例的操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开的各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开的实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器，包括确定单元、设置单元、覆盖单元、展示单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，确定单元还可以被描述为“被配置成确定待展示页面”的单元。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开的实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开的实施例中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种进度条展示方法，所述方法包括：

确定待展示页面；

为所述待展示页面设置进度条层，所述进度条层包括在第一方向上尺寸渐变的进度条图形；

在所述进度条层上设置遮挡蒙层，所述进度条层上未被遮挡的部分形成沿所述第一方向延伸的进度条显示区域；

响应于所述待展示页面被滑动，控制所述进度条层沿与所述第一方向垂直的第二方向移动，并通过所述进度条显示区域展示所述进度条图形。

2.根据权利要求1所述的方法，所述进度条层为所述待展示页面的背景层，所述为所述待展示页面设置进度条层包括：

通过设置层叠样本表单的背景图像的线性渐变属性，在所述背景层生成所述进度条图形；

所述遮挡蒙层位于所述待展示页面的内容层与所述背景层之间。

3.根据权利要求2所述的方法，其中，所述线性渐变属性的参数包括：线性渐变的方向、起点颜色和终点颜色；

所述通过设置层叠样本表单的背景图像的线性渐变属性，在所述背景层生成所述进度条图形包括：

设置为线性渐变的方向为从左下角到右上角，设置起点颜色为进度条颜色，设置终点颜色为白色，得到直角三角形的进度条图形；

所述进度条图形的一个直角边与所述第一方向平行，所述进度条图形的另一个直角边与所述第二方向平行，所述进度条图形的直角顶点与所述进度条显示区域的起始点重合。

4.根据权利要求1所述的方法，其中，所述进度条层为与所述具有进度条颜色的进度蒙层，所述为所述待展示页面设置进度条层包括：

响应于所述进度蒙层在所述待展示页面的垂直投影为非三角形，旋转所述进度蒙层，直至所述进度蒙层在所述待展示页面的投影为直角三角形且该直角三角形的斜边与所述待展示页面的对角线重合为止，该直角三角形的直角顶点与所述进度条显示区域的起始点重合；

固定所述进度蒙层和所述待展示页面之间的相对位置。

5.根据权利要求1-3之一所述的方法，其中，所述在所述进度条层上设置遮挡蒙层之前，所述方法还包括：

调整所述进度条层相对所述待展示页面之间的相对位置，以使所述进度条图形在所述待展示页面的垂直投影在所述待展示页面之外。

6.根据权利要求5所述的方法，其中，所述进度条层为所述待展示页面的背景层，所述调整所述进度条层相对所述待展示页面之间的相对位置，以使所述进度条图形在所述待展示页面的垂直投影在所述待展示页面之外包括：

采用层叠样本表单的计算属性调整所述背景层相对所述待展示页面沿所述第一方向偏移第一距离；

采用层叠样本表单的计算属性调整所述背景层相对所述待展示页面沿所述第二方向偏移第二距离。

7.一种进度条展示装置，所述装置包括：

确定单元，被配置成确定待展示页面；

设置单元，被配置成为所述待展示页面设置进度条层，所述进度条层包括在第一方向上尺寸渐变的进度条图形；

覆盖单元，被配置成在所述进度条层上设置遮挡蒙层，所述进度条层上未被遮挡的部分形成沿所述第一方向延伸的进度条显示区域；

展示单元，被配置成响应于所述待展示页面被滑动，控制所述进度条层沿与所述第一方向垂直的第二方向移动，并通过所述进度条显示区域展示所述进度条图形。

8.根据权利要求7所述的装置，所述进度条层为所述待展示页面的背景层，所述设置单元进一步被配置成：通过设置层叠样本表单的背景图像的线性渐变属性，在所述背景层生成所述进度条图形；所述遮挡蒙层位于所述待展示页面的内容层与所述背景层之间。

9.一种电子设备，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一项所述的方法。

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