CN114936022A - 一种滚动视图的显示方法、装置、存储介质及电子设备 - Google Patents

Abstract

本申请实施例公开了一种滚动视图的显示方法、装置、存储介质及电子设备，方法包括：加载待显示的滚动视图，获取滚动视图的尺寸信息；基于滚动视图的滚动边界以及尺寸信息，在滚动视图中添加圆形视图；在图形用户界面的滚动视图显示区域显示滚动视图的部分内容；响应于针对滚动视图显示区域中滚动视图的滚动操作，控制滚动视图的内容沿滚动操作的滚动方向在滚动视图显示区域中滚动显示；当圆形视图逐渐被滚动至滚动视图显示区域在滚动方向的区域边界时，根据滚动操作逐渐显示圆形视图的部分区域。通过圆形视图根据尺寸信息以及滚动边界进行动态添加，可使得弧形效果适配于不同尺寸的滚动视图，提高复用性，降低开发成本。

Description

一种滚动视图的显示方法、装置、存储介质及电子设备

技术领域

本申请涉及计算机领域，具体涉及一种滚动视图的显示方法、装置、计算机可读存储介质及电子设备。

背景技术

近年来，手机，平板等移动设备因其功能强大以及小巧的便携性被用户所青睐，因此越来越多的移动设备制造商开始注重移动设备的用户体验。

现有技术中，为了提高用户在滚动移动设备中显示的内容时的体验，设计出了弹性滚动效果，其是滚动视图在面临展示内容到达上下的临界点时，触发的一种响应用户的无效移动指令所做出的的显示效果，并且在此基础上，当用户触发弹性滚动效果时，还会显示有弧形的可视化效果，从而提高用户体验。

在对现有技术的研究和实践过程中，本申请的发明人发现，现有技术中由于弧形效果对于不同页面不同场景的水平滚动视图不具有复用性，开发人员需要根据不同的滚动视图的高度重新进行动画调整，高度不同的情况下也需要调整对应的极限拖拽距离，故弧形效果需要根据不同的情况进行不同的开发设计，复用性较差，开发成本高。

发明内容

本申请实施例提供一种滚动视图的显示方法、装置、计算机可读存储介质及电子设备，可以提高使得弧形效果适配于尺寸的滚动视图，提高复用性，降低开发成本。

为解决上述技术问题，本申请实施例提供以下技术方案：

一种滚动视图的显示方法，包括：

加载待显示的滚动视图，获取所述滚动视图的尺寸信息；

基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；

在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；

响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；

当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

一种滚动视图的显示装置，包括：

获取模块，用于加载待显示的滚动视图，获取所述滚动视图的尺寸信息；

添加模块，用于基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；

第一显示模块，用于在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；

控制模块，用于响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；

第二显示模块，用于当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

在一些实施例中，所述添加模块，包括：

第一确定子模块，用于基于所述尺寸信息，确定构成所述滚动视图的滚动边界的线段中第一端点的第一位置以及第二端点的第二位置；

添加子模块，用于根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图。

在一些实施例中，所述添加子模块，包括：

第一计算单元，用于根据所述第一位置以及所述第二位置计算所述线段中心点的第三位置；

第一确定单元，用于将穿过所述第三位置中，且平行于所述滚动视图的侧边的直线确定为所述滚动视图的中心线；

第二确定单元，用于将所述中心线上与所述第一端点以及与所述第二端点连接所形成的夹角角度与预设角度相同的位置确定为圆形视图的圆心位置；

添加单元，用于按照所述圆心位置为圆心，圆心位置与所述第一端点的距离为半径，在所述滚动边界添加圆形视图。

在一些实施例中，所述装置，还包括：

第三显示模块，用于当所述滚动视图中第一指定点的第一指定位置被滚动进所述滚动视图显示区域内时，在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标。

在一些实施例中，所述第三显示模块，包括：

获取子模块，用于获取所述指向图标中第二指定点的第二指定位置，以及所述滚动视图中第三指定点的第三指定位置；

第二确定子模块，用于基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向；

显示子模块，用于按照所述显示透明度在所述指定显示区域内显示文案视图，以及按照所述指向方向在所述指定显示区域内显示指向图标。

在一些实施例中，所述第二确定子模块，包括：

第三确定单元，用于确定所述第一指定位置与所述第三指定位置的第一距离；

第四确定单元，用于确定所述第二指定位置与所述第三指定位置的第二距离；

第二计算单元，用于计算所述第二距离与所述第一距离的比值，得到计算结果；

第五确定单元，用于根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向。

在一些实施例中，所述第五确定单元，用于：

计算预设显示透明度与所述计算结果的乘积，得到所述文案视图的显示透明度；

计算预设旋转角度与所述计算结果的乘积，得到旋转角度；

控制所述指向图标按照所述旋转角度进行旋转，得到所述指向图标的指向方向。

在一些实施例中，所述装置还包括：

禁止模块，用于当所述滚动边界逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，禁止所述滚动视图随所述滚动操作进行滚动。

一种计算机可读存储介质，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行上述滚动视图的显示方法中的步骤。

一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上所述滚动视图的显示方法中的步骤。

本申请实施例通过加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。以此，通过滚动视图的尺寸信息以及滚动边界添加圆形视图，从而在圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域，以形成弧形效果。并且由于圆形视图是根据尺寸信息以及滚动边界进行动态添加，可使得弧形效果适配于不同尺寸的滚动视图，提高复用性，降低开发成本。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1a为本申请实施例提供的滚动视图的显示方法的场景示意图。

图1b为本申请实施例提供的滚动视图的显示方法的流程示意图。

图1c为本申请实施例提供的滚动视图的示意图。

图1d为本申请实施例提供的在滚动视图中添加圆形视图的示意图。

图1e为本申请实施例提供的在电子设备中显示滚动视图的部分内容的示意图。

图1f为本申请实施例提供的滚动视图在滚动视图显示区域中滚动显示的示意图。

图1g为本申请实施例提供的当滚动视图的内容区域的底部被滚动至滚动视图显示区域在滚动方向的区域边界时的显示示意图。

图1h为本申请实施例提供的圆形视图被滚动至滚动视图显示区域在滚动方向的区域边界时的示意图。

图2为本申请实施例提供的滚动视图的显示装置的结构示意图；

图3为本申请实施例提供的电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例提供了一滚动视图的显示方法、装置、计算机可读存储介质及电子设备。

请参阅图1a，图1a为本申请实施例所提供的滚动视图的显示系统的场景示意图，该系统可以包括至少一个电子设备1000，至少一个服务器2000，至少一个数据库3000，以及网络4000。电子设备1000可以为手机、平板或个人数字助理等计算机设备，在电子设备1000上可安装有各种业务程序，例如交互类应用，游戏应用，图片查看应用等，服务器2000与电子设备1000可通过网络4000建立连接，用户通过在电子设备1000上进行触控操作从而触发服务器2000向所述电子设备1000发送应用的可显示的显示画面，例如滚动视图等。其中，网络4000可以是无线网络或者有线网络，比如无线网络为无线局域网(WLAN)、局域网(LAN)、蜂窝网络、2G网络、3G网络、4G网络、5G网络等。另外，不同的电子设备1000之间也可以使用自身的蓝牙网络或者热点网络连接到服务器2000等。另外，该系统可以包括数据库3000，数据库3000可用于存储用户的业务信息。

本申请实施例提供了一种滚动视图的显示方法，该方法可以由电子设备执行。如图1a所示，该电子设备1000接收到用户针对于其上安装的应用的操控操作后，加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

需要说明的是，图1a所示的滚动视图的显示系统的场景示意图仅仅是一个示例，本申请实施例描述的滚动视图的显示系统以及场景是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着滚动视图的显示系统的演变和新业务场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

在本实施例中，将从滚动视图的显示装置的角度进行描述，该滚动视图的显示装置具体可以集成在具备储存单元并安装有微处理器而具有运算能力的电子设备中。

请参阅图1b，图1b为本申请实施例提供的滚动视图的显示方法的流程示意图。该滚动视图的显示方法包括：

在步骤101中，加载待显示的滚动视图，获取所述滚动视图的尺寸信息。

其中，用户在电子设备上开启某一应用或针对于应用进行触控操作时，存在需要在开启应用后或进入到某一用于显示滚动视图的界面。例如，用户点击相册应用中的某一需要滚动显示的图像。从而触发电子设备加载需要对滚动视图进行加载。

具体的，如图1c所示，图1c为本申请实施例提供的滚动视图的示意图。滚动视图包括有内容区域A，以及与内容区域A底部相连的空白区域B，内容区域A为用于显示实际带有应用显示内容的区域，空白区域B为当用户滚动滚动视图时，当内容区域A的底部显示出来后，若用户还在滚动滚动视图，则显示出空白区域B，从而以空白的方式提示用户内容区域A已经滚动到最底部。空白区域B即为弹性滚动效果的显示形式。

其中，在加载待显示的滚动视图时，若应用为无需后端服务器提供滚动视图的本地应用，则可以直接从本地的应用指定存储空间内获取滚动视图的尺寸信息；若应用为需要后端服务器提供滚动视图的联机应用，则可通过后端服务器在传输滚动视图至电子设备时一并将滚动视图的尺寸信息发送至电子设备，以使电子设备获取到滚动视图的尺寸信息。

在步骤102中，基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内。

其中，如图1d所示，图1d为本申请实施例提供的在滚动视图中添加圆形视图的示意图。为了实现形成一种图形跟着拖拽变形的弧形效果，可在滚动视图中添加圆形视图，从而使得圆形视图的部分区域C被所述滚动边界划分到所述滚动视图内。

具体的，为了实现圆形视图可根据滚动视图的尺寸进行动态调整，因此设计了一种圆形视图的添加方式，圆形视图可基于所述滚动视图的滚动边界以及所述尺寸信息进行动态调整。

在一些实施方式中，所述基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图的步骤，包括：

(1)基于所述尺寸信息，确定构成所述滚动视图的滚动边界的线段中第一端点的第一位置以及第二端点的第二位置；

(2)根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图。

其中，动态调整的方式可以为：通过获取到的尺寸信息来确定滚动边界(空白区域B的底部边界)的线段L中第一端点a的第一位置以及第二端点b第二位置。

例如，尺寸信息为宽50mm，高40mm，则以滚动视图的左上角的点为原点，建立坐标系，则第一端点a的第一位置用坐标可以表示为(50,0)，第二端点b的第二位置用坐标可以表示为(50，-40)。从而根据第一位置以及第二位置添加圆形视图。

在一些实施方式中，所述根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图的步骤，包括：

(1.1)根据所述第一位置以及所述第二位置计算所述线段中心点的第三位置；

(1.2)将穿过所述第三位置中，且平行于所述滚动视图的侧边的直线确定为所述滚动视图的中心线；

(1.3)将所述中心线上与所述第一端点以及与所述第二端点连接所形成的夹角角度与预设角度相同的位置确定为圆形视图的圆心位置；

(1.4)按照所述圆心位置为圆心，圆心位置与所述第一端点的距离为半径，在所述滚动边界添加圆形视图。

其中，如图1d所示，根据第一位置以及第二位置确定出滚动边界的中心点的第三位置，并确定出穿过该中心点且平行于所述滚动视图的侧边的滚动视图的中心线。从中心线中确定出与第一端点a以及第二端点b连线后所形成的夹角α的角度值为预设角度值的圆心位置，从而在确定出圆心位置后，以圆心位置为圆心，圆心位置与所述第一端点的距离为半径，在所述滚动边界添加圆形视图。从而添加出圆形视图。预设角度值可以为45°或60°等，此处不作限定。

具体的，通过在中心线中确定出与所述第一端点以及与所述第二端点连接所形成的夹角角度与预设角度相同的位置，使得圆心位置与第一端点a以及第二端点b连线所形成的夹角为预设角度，使得无论滚动视图的尺寸如何变更，夹角的角度值始终为预设角度，从而使得被滚动边界划分到滚动视图中的部位区域C所呈现的弧度的曲率不会过大或过小。

其中，上述的圆形视图添加逻辑可新增一个分类实现，避免跟滚动视图本身相关的逻辑和视图代码掺杂在一起。在实际使用的时候，只需要设置属性的值为YES，就会触发增加滚动视图拖拽控件的代码，脱离滚动视图相关业务，实现代码的复用和解耦实现，业务分离。

在步骤103中，在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容。

其中，请参阅图1e，图1e为本申请实施例提供的在电子设备中显示滚动视图的部分内容的示意图。由于电子设备1000的屏幕无法满足内容的全部显示，故采用滚动视图的方式进行显示。因此当在图形用户界面的滚动视图显示区域显示时，仅能显示出滚动视图的部分内容。

在步骤104中，响应于针对滚动视图显示区域中滚动视图的滚动操作，控制滚动视图的内容沿滚动操作的滚动方向在滚动视图显示区域中滚动显示。

其中，如图1f所示，图1f为本申请实施例提供的滚动视图在滚动视图显示区域中滚动显示的示意图。滚动操作可以为用户按住图形用户界面，并向滚动方向或与滚动方向相反的方向进行滑动，以使滚动视图的内容沿滚动操作的滚动方向在滚动视图显示区域D中滚动显示。图1f相对于图1e可以看出滚动视图随滚动操作向左滑动。

在一些实施方式中，在所述响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示的步骤之后，还包括：

当所述滚动视图中第一指定点的第一指定位置被滚动进所述滚动视图显示区域内时，在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标。

其中，如图1f所示，当滚动视图中的第一指定点的第一指定位置被滚动进滚动视图显示区域D内时，在所述滚动视图显示区域的指定显示区域内显示文案视图11以及指向图标12。第一指定点可以为滚动视图中的某一个预设点，例如该点在滚动视图的70％处。

具体的，文案视图里面的文案，是用于展示跟业务功能相关的指引文案，不是固定文案，可支持上层灵活配置。例如配置了“查看更多”文案可引导用户拖拽到最右端，以触发展示其他页面的事件。

在一些实施方式中，所述在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标的步骤，包括：

(1)获取所述指向图标中第二指定点的第二指定位置，以及所述滚动视图中第三指定点的第三指定位置；

(2)基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向；

(3)按照所述显示透明度在所述指定显示区域内显示文案视图，以及按照所述指向方向在所述指定显示区域内显示指向图标。

其中，指向图标中的第二指定点可以为指向图标的中心点，滚动视图的第三指定点可以为滚动视图的内容区域A与空白区域B所相连的线段中的点。

具体的，滚动视图中第三指定点的第三指定位置会随着滚动视图的滚动进行改变，因此指向图标中第二指定点与第三指定点之间的距离l1也会随之发生改变。而第一指定位置与第三指定位置为相对移动，故第一指定位置与第三指定位置之间的距离l2不会发生改变，为定值。故可以在第一指定点与第三指定点之间设置滚动时的可视化效果，例如设定文案视图11的显示透明度的变化以及指向图标12的指向方向的变化。

其中，在设定出可视化效果后，在实际滚动过程中基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向，并按照显示透明度在所述指定显示区域内显示文案视图，以及按照所述指向方向在所述指定显示区域内显示指向图标。

在一些实施方式中，所述基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向的步骤，包括：

(1.1)确定所述第一指定位置与所述第三指定位置的第一距离；

(1.2)确定所述第二指定位置与所述第三指定位置的第二距离；

(1.3)计算所述第二距离与所述第一距离的比值，得到计算结果；

(1.4)根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向。

其中，确定文案视图的显示透明度以及指向图标的指向方向的方式可以为：确定所述第一指定位置与所述第三指定位置的第一距离l1，确定所述第二指定位置与所述第三指定位置的第二距离l2，计算所述第二距离l2与所述第一距离的比值l1，得到计算结果。计算结果即为第二距离l2占l1的占比值。根据计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向。

在一些实施方式中，所述根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向的步骤，包括：

(1.1)计算预设显示透明度与所述计算结果的乘积，得到所述文案视图的显示透明度；

(1.2)计算预设旋转角度与所述计算结果的乘积，得到旋转角度；

(1.3)控制所述指向图标按照所述旋转角度进行旋转，得到所述指向图标的指向方向。

其中，可设定显示透明度的完全显示状态为100％显示，即不透明，指向图标的旋转最大角度为180°，从而计算预设显示透明度与所述计算结果的乘积，得到所述文案视图的显示透明度，以及计算预设旋转角度与所述计算结果的乘积，得到旋转角度。

例如，如图1g所示，图1g为本申请实施例提供的当滚动视图的内容区域的底部被滚动至滚动视图显示区域在滚动方向的区域边界时的显示示意图。当内容区域的底部被滚动至滚动视图显示区域在滚动方向的区域边界时，第一指定点与第二指定点重合，使得l1与l2相等，故此时的计算结果为1。因此计算预设显示透明度与所述计算结果的乘积为100％，计算预设旋转角度与所述计算结果的乘积为180°，故控制文案视图按照不透明显示，以及控制指向图标旋转180°显示。

在步骤105中，当所述圆形视图逐渐被滚动至滚动视图显示区域在滚动方向的区域边界时，根据滚动操作逐渐显示圆形视图的部分区域。

其中，如图1h所示，图1h为本申请实施例提供的圆形视图被滚动至滚动视图显示区域在滚动方向的区域边界时的示意图。由于在步骤102中在滚动视图内添加了圆形视图，故当所述圆形视图逐渐被滚动至滚动视图显示区域在滚动方向的区域边界时，会逐渐在滚动视图显示区域内显示出圆形视图的部分区域C。

在一些实施方式中，在所述当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域的步骤之后，还包括：

当所述滚动边界逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，禁止所述滚动视图随所述滚动操作进行滚动。

其中，当滚动边界逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，说明滚动视图中的空白区域B已经完全显示在滚动视图显示区域内，故以达到滚动操作的最大滚动极限，则禁止滚动视图随所述滚动操作进行滚动。

由上述可知，本申请实施例通过加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。以此，通过滚动视图的尺寸信息以及滚动边界添加圆形视图，从而在圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域，以形成弧形效果。并且由于圆形视图是根据尺寸信息以及滚动边界进行动态添加，可使得弧形效果适配于不同尺寸的滚动视图，提高复用性，降低开发成本。

结合上述实施例所描述的方法，以下将举例作进一步详细说明。

为便于更好的实施本申请实施例提供的滚动视图的显示方法，本申请实施例还提供一种基于上述滚动视图的显示方法的装置。其中名词的含义与上述滚动视图的显示方法中相同，具体实现细节可以参考方法实施例中的说明。

请参阅图2，图2为本申请实施例提供的滚动视图的显示装置的结构示意图。其中该滚动视图的显示装置应用于具有图形处理器的电子设备，该滚动视图的显示装置可以包括获取模块201、添加模块202、第一显示模块203、控制模块204以及第二显示模块205等。

获取模块201，用于加载待显示的滚动视图，获取所述滚动视图的尺寸信息；

添加模块202，用于基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；

第一显示模块203，用于在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；

控制模块204，用于响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；

第二显示模块205，用于当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

在一些实施方式中，所述添加模块202，包括：

第一确定子模块，用于基于所述尺寸信息，确定构成所述滚动视图的滚动边界的线段中第一端点的第一位置以及第二端点的第二位置；

添加子模块，用于根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图。

在一些实施方式中，所述添加子模块，包括：

第一计算单元，用于根据所述第一位置以及所述第二位置计算所述线段中心点的第三位置；

第一确定单元，用于将穿过所述第三位置中，且平行于所述滚动视图的侧边的直线确定为所述滚动视图的中心线；

第二确定单元，用于将所述中心线上与所述第一端点以及与所述第二端点连接所形成的夹角角度与预设角度相同的位置确定为圆形视图的圆心位置；

添加单元，用于按照所述圆心位置为圆心，圆心位置与所述第一端点的距离为半径，在所述滚动边界添加圆形视图。

在一些实施方式中，所述装置，还包括：

第三显示模块，用于当所述滚动视图中第一指定点的第一指定位置被滚动进所述滚动视图显示区域内时，在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标。

在一些实施方式中，所述第三显示模块，包括：

获取子模块，用于获取所述指向图标中第二指定点的第二指定位置，以及所述滚动视图中第三指定点的第三指定位置；

第二确定子模块，用于基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向；

显示子模块，用于按照所述显示透明度在所述指定显示区域内显示文案视图，以及按照所述指向方向在所述指定显示区域内显示指向图标。

在一些实施方式中，所述第二确定子模块，包括：

第三确定单元，用于确定所述第一指定位置与所述第三指定位置的第一距离；

第四确定单元，用于确定所述第二指定位置与所述第三指定位置的第二距离；

第二计算单元，用于计算所述第二距离与所述第一距离的比值，得到计算结果；

第五确定单元，用于根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向。

在一些实施方式中，所述第五确定单元，用于：

计算预设显示透明度与所述计算结果的乘积，得到所述文案视图的显示透明度；

计算预设旋转角度与所述计算结果的乘积，得到旋转角度；

控制所述指向图标按照所述旋转角度进行旋转，得到所述指向图标的指向方向。

在一些实施方式中，所述装置还包括：

禁止模块，用于当所述滚动边界逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，禁止所述滚动视图随所述滚动操作进行滚动。

由上述可知，本申请实施例通过获取模块201加载待显示的滚动视图，获取所述滚动视图的尺寸信息；添加模块202基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；第一显示模块203在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；控制模块204响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；第二显示模块205当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。以此，通过滚动视图的尺寸信息以及滚动边界添加圆形视图，从而在圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域，以形成弧形效果。并且由于圆形视图是根据尺寸信息以及滚动边界进行动态添加，可使得弧形效果适配于不同尺寸的滚动视图，提高复用性，降低开发成本。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

相应的，本申请实施例还提供一种电子设备，该电子设备可以为终端或者服务器，该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC，Personal Computer)、个人数字助理(Personal Digital Assistant，PDA)等终端设备。如图3所示，图3为本申请实施例提供的电子设备的结构示意图。该电子设备1000包括有一个或者一个以上处理核心的处理器301、有一个或一个以上计算机可读存储介质的存储器302及存储在存储器302上并可在处理器上运行的计算机程序。其中，处理器301与存储器302电性连接。本领域技术人员可以理解，图中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

处理器301是电子设备1000的控制中心，利用各种接口和线路连接整个电子设备1000的各个部分，通过运行或加载存储在存储器302内的软件程序和/或模块，以及调用存储在存储器302内的数据，执行电子设备1000的各种功能和处理数据，从而对电子设备1000进行整体监控。

在本申请实施例中，电子设备1000中的处理器301会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器302中，并由处理器301来运行存储在存储器302中的应用程序，从而实现各种功能：

加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

可选的，如图3所示，电子设备1000还包括：触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307。其中，处理器301分别与触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307电性连接。本领域技术人员可以理解，图3中示出的电子设备结构并不构成对电子设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

触控显示屏303可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏303可以包括显示面板和触控面板。其中，显示面板可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-Emitting Diode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并生成相应的操作指令，且操作指令执行对应程序。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器301，并能接收处理器301发来的命令并加以执行。触控面板可覆盖显示面板，当触控面板检测到在其上或附近的触摸操作后，传送给处理器301以确定触摸事件的类型，随后处理器301根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中，可以将触控面板与显示面板集成到触控显示屏303而实现输入和输出功能。但是在某些实施例中，触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏303也可以作为输入单元306的一部分实现输入功能。

在本申请实施例中，通过处理器301执行游戏应用程序在触控显示屏303上生成图形用户界面，图形用户界面上的虚拟场景中包含至少一个技能控制区域，技能控制区域中包含至少一个技能控件。该触控显示屏303用于呈现图形用户界面以及接收用户作用于图形用户界面产生的操作指令。

射频电路304可用于收发射频信号，以通过无线通信与网络设备或其他电子设备建立无线通讯，与网络设备或其他电子设备之间收发信号。

音频电路305可以用于通过扬声器、传声器提供用户与电子设备之间的音频接口。音频电路305可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路305接收后转换为音频数据，再将音频数据输出处理器301处理后，经射频电路304以发送给比如另一电子设备，或者将音频数据输出至存储器302以便进一步处理。音频电路305还可能包括耳塞插孔，以提供外设耳机与电子设备的通信。

输入单元306可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

电源307用于给电子设备1000的各个部件供电。可选的，电源307可以通过电源管理系统与处理器301逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源307还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管图3中未示出，电子设备1000还可以包括摄像头、传感器、无线保真模块、蓝牙模块等，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

由上可知，本实施例提供的电子设备，通过加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。以此，通过滚动视图的尺寸信息以及滚动边界添加圆形视图，从而在圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域，以形成弧形效果。并且由于圆形视图是根据尺寸信息以及滚动边界进行动态添加，可使得弧形效果适配于不同尺寸的滚动视图，提高复用性，降低开发成本。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行本申请实施例所提供的任一种技能的控制方法中的步骤。例如，该计算机程序可以执行如下步骤：

加载待显示的滚动视图，获取所述滚动视图的尺寸信息；基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的计算机程序，可以执行本申请实施例所提供的任一种滚动视图的显示方法中的步骤，因此，可以实现本申请实施例所提供的任一种滚动视图的显示方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种滚动视图的显示方法、装置、存储介质及电子设备进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (11)

1.一种滚动视图的显示方法，其特征在于，包括：

加载待显示的滚动视图，获取所述滚动视图的尺寸信息；

基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；

响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；

当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

2.根据权利要求1所述的滚动视图的显示方法，其特征在于，所述基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图的步骤，包括：

基于所述尺寸信息，确定构成所述滚动视图的滚动边界的线段中第一端点的第一位置以及第二端点的第二位置；

根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图。

3.根据权利要求2所述的滚动视图的显示方法，其特征在于，所述根据所述第一位置以及所述第二位置，在所述滚动边界添加圆形视图的步骤，包括：

根据所述第一位置以及所述第二位置计算所述线段中心点的第三位置；

将穿过所述第三位置中，且平行于所述滚动视图的侧边的直线确定为所述滚动视图的中心线；

将所述中心线上与所述第一端点以及与所述第二端点连接所形成的夹角角度与预设角度相同的位置确定为圆形视图的圆心位置；

按照所述圆心位置为圆心，圆心位置与所述第一端点的距离为半径，在所述滚动边界添加圆形视图。

4.根据权利要求1所述的滚动视图的显示方法，其特征在于，在所述响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示的步骤之后，还包括：

当所述滚动视图中第一指定点的第一指定位置被滚动进所述滚动视图显示区域内时，在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标。

5.根据权利要求4所述的滚动视图的显示方法，其特征在于，所述在所述滚动视图显示区域的指定显示区域内显示文案视图以及指向图标的步骤，包括：

获取所述指向图标中第二指定点的第二指定位置，以及所述滚动视图中第三指定点的第三指定位置；

基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向；

按照所述显示透明度在所述指定显示区域内显示文案视图，以及按照所述指向方向在所述指定显示区域内显示指向图标。

6.根据权利要求5所述的滚动视图的显示方法，其特征在于，所述基于所述第一指定位置、第二指定位置以及所述第三指定位置，确定所述文案视图的显示透明度以及所述指向图标的指向方向的步骤，包括：

确定所述第一指定位置与所述第三指定位置的第一距离；

确定所述第二指定位置与所述第三指定位置的第二距离；

计算所述第二距离与所述第一距离的比值，得到计算结果；

根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向。

7.根据权利要求6所述的滚动视图的显示方法，其特征在于，所述根据所述计算结果确定所述文案视图的显示透明度以及所述指向图标的指向方向的步骤，包括：

计算预设显示透明度与所述计算结果的乘积，得到所述文案视图的显示透明度；

计算预设旋转角度与所述计算结果的乘积，得到旋转角度；

控制所述指向图标按照所述旋转角度进行旋转，得到所述指向图标的指向方向。

8.根据权利要求1所述的滚动视图的显示方法，其特征在于，在所述当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域的步骤之后，还包括：

当所述滚动边界逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，禁止所述滚动视图随所述滚动操作进行滚动。

9.一种滚动视图的显示装置，其特征在于，包括：

获取模块，用于加载待显示的滚动视图，获取所述滚动视图的尺寸信息；

添加模块，用于基于所述滚动视图的滚动边界以及所述尺寸信息，在所述滚动视图中添加圆形视图，以使圆形视图的部分区域被所述滚动边界划分到所述滚动视图内；

第一显示模块，用于在图形用户界面的滚动视图显示区域显示所述滚动视图的部分内容；

控制模块，用于响应于针对所述滚动视图显示区域中滚动视图的滚动操作，控制所述滚动视图的内容沿所述滚动操作的滚动方向在所述滚动视图显示区域中滚动显示；

第二显示模块，用于当所述圆形视图逐渐被滚动至所述滚动视图显示区域在滚动方向的区域边界时，根据所述滚动操作逐渐显示所述圆形视图的部分区域。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至8任一项所述的滚动视图的显示方法中的步骤。

11.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至8任一项所述滚动视图的显示方法中的步骤。

Images