CN115437539A - 一种组件渲染方法、装置、设备及存储介质 - Google Patents

Abstract

本说明书实施例公开了一种组件渲染方法、装置、设备及存储介质。所述方法包括：检测目标滚动视图组件的当前滚动距离；所述目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含所述每个待悬浮组件的其他组件的堆叠顺序，高于所述每个待悬浮组件对应悬浮有效范围内的同级组件；在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。该方法可以通过移动组件的方式实现组件悬浮的展示效果，提高组件悬浮展示效果的设置自由度。

Description

一种组件渲染方法、装置、设备及存储介质

技术领域

本说明书实施例涉及计算机应用技术领域，尤其涉及一种组件渲染方法、装置、设备及存储介质。

背景技术

在前端设计中，存在一种组件悬浮的界面展示效果，具体可以将指定的组件固定在展示界面中的同一位置，不会随着界面滑动而变化位置，提高前端展示效果。

例如，可以将界面上的某个组件固定在展示界面的顶端，不会随着界面的上下滑动而变化位置，实现吸顶展示效果；也可以将界面上的某个组件固定在展示界面的左侧边，不会随着界面的左右滑动而变化位置，实现侧边吸附效果。

但是，在具体实现上述组件悬浮的界面展示效果的相关技术中，通常存在较多限制，无法只有设置组件的悬浮展示效果，组件悬浮展示效果的设置自由度较低。

例如，通常只能针对滚动视图的直接子视图设置悬浮吸顶展示效果，自由度较低，对于开发者的体验较差。

发明内容

为了解决上述问题，本说明书实施例提供了一种组件渲染方法、装置、设备及存储介质。技术方案如下所示。

一种组件渲染方法，应用于渲染前端，包括：

检测目标滚动视图组件的当前滚动距离；

所述目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含所述每个待悬浮组件的其他组件的堆叠顺序，高于所述每个待悬浮组件对应悬浮有效范围内的同级组件；

在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

可选地，所述当前滚动距离包括，当前垂直滚动距离；所述预设固定位置下目标待悬浮组件的顶端，与所述当前展示界面的顶端重合。

可选地，所述方法还包括：

在检测到当前滚动距离大于所述任一悬浮有效范围的最大值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，固定在第一预设位置；

所述第一预设位置下的目标待悬浮组件顶端，与所述目标滚动视图组件顶端之间的距离为所述任一悬浮有效范围的最大值。

可选地，所述悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与所述目标滚动视图组件顶端之间的距离。

可选地，所述悬浮有效范围的确定方法，包括：

从上到下遍历所述目标滚动视图组件中的每个待悬浮组件，执行以下步骤；

将当前遍历的待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值；

在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值；

在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将所述目标滚动视图组件的高度，与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

可选地，所述目标滚动视图组件中组件堆叠顺序的设置方法包括：

针对所述目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。

可选地，所述当前滚动距离包括，当前水平滚动距离；所述预设固定位置下目标待悬浮组件的左侧边，与所述当前展示界面的左侧边重合。

可选地，所述方法还包括：

在检测到当前滚动距离大于任一悬浮有效范围的最小值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；

在需要展示处于悬浮状态的目标待悬浮组件的情况下，基于所述目标待悬浮组件对应的预设悬浮样式进行渲染展示。

可选地，所述方法还包括：

获取控制后端针对所述目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

一种组件渲染装置，应用于渲染前端，包括：

检测单元，用于检测目标滚动视图组件的当前滚动距离；

所述目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含所述每个待悬浮组件的其他组件的堆叠顺序，高于所述每个待移动组件对应悬浮有效范围内的同级组件；

移动单元，用于在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

可选地，所述当前滚动距离包括，当前垂直滚动距离；所述预设固定位置下待悬浮组件的顶端，与所述当前展示界面的顶端重合。

可选地，所述移动单元还用于：

在检测到当前滚动距离大于所述任一悬浮有效范围的最大值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，固定在第一预设位置；

所述第一预设位置下的目标待悬浮组件顶端，与所述目标滚动视图组件顶端之间的距离为所述任一悬浮有效范围的最大值。

可选地，所述悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与所述目标滚动视图组件顶端之间的距离。

可选地，所述悬浮有效范围的确定方法，包括：

从上到下遍历所述目标滚动视图组件中的每个待悬浮组件，执行以下步骤；

将当前遍历的待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值；

在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值；

在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将所述目标滚动视图组件的高度，与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

可选地，所述目标滚动视图组件中组件堆叠顺序的设置方法包括：

针对所述目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。

可选地，所述当前滚动距离包括，当前水平滚动距离；所述预设固定位置下目标待悬浮组件的左侧边，与所述当前展示界面的左侧边重合。

可选地，所述移动单元还用于：

在检测到当前滚动距离大于任一悬浮有效范围的最小值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；

在需要展示处于悬浮状态的目标待悬浮组件的情况下，基于所述目标待悬浮组件对应的预设悬浮样式进行渲染展示。

可选地，所述装置还包括：

获取单元，用于获取控制后端针对所述目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

本技术方案对于滚动视图组件中任一层级的组件，可以通过移动组件的方式，实现组件悬浮的界面展示效果，进而可以提高组件悬浮的展示效果的设置自由度，提高开发者的体验。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1是本说明书实施例提供的一种组件渲染方法的流程示意图；

图2是本说明书实施例提供的一种组件悬浮吸顶的原理示意图；

图3是本说明书实施例提供的一种组件渲染装置的结构示意图；

图4是用于配置本说明书实施例方法的一种设备的结构示意图。

具体实施方式

为了使本领域技术人员更好地理解本说明书实施例中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行详细地描述，显然，所描述的实施例仅仅是本说明书的一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于公开的范围。

在前端设计中，存在一种组件悬浮的界面展示效果，具体可以将指定的组件固定在展示界面中的同一位置，不会随着界面滑动而变化位置，提高前端展示效果。

例如，可以将界面上的某个组件固定在展示界面的顶端，不会随着界面的上下滑动而变化位置，实现吸顶展示效果；也可以将界面上的某个组件固定在展示界面的左侧边，不会随着界面的左右滑动而变化位置，实现侧边吸附效果。

但是，在具体实现上述组件悬浮的界面展示效果的相关技术中，通常存在较多限制，无法只有设置组件的悬浮展示效果，组件悬浮展示效果的设置自由度较低。

例如，通常只能针对滚动视图的直接子视图设置悬浮吸顶展示效果，自由度较低，对于开发者的体验较差。

为了解决上述问题，提高组件悬浮展示效果的设置自由度，提高开发者的体验，本说明书实施例提供一种组件渲染方法。

在该方法中，可以由渲染前端针对需要悬浮展示的组件，检测滑动距离，从而可以在需要实现该组件的悬浮展示效果时，根据所检测的当前滑动距离，将该组件移动到当前展示界面的预设固定位置，从而可以将该组件固定在展示界面中的同一位置，不会随着界面的滑动而变化位置，从而可以实现组件悬浮展示效果。

其中，由于上述方法是通过移动组件实现组件悬浮展示效果，与组件是否是滚动视图组件的直接子视图无关，对于滚动视图组件中任一层级的组件都可以通过移动组件的方式，实现组件悬浮的界面展示效果，从而可以提高组件悬浮展示效果的设置自由度，提高开发者的体验。

此外，在目前的许多界面展示程序架构中，通常可以使用渲染前端和控制后端协同进行界面展示。例如，react native架构中的进行渲染的native端，以及用于控制的js端。

其中，渲染前端可以是用于实现页面渲染的一端；控制后端可以是用于控制页面渲染的一端，具体可以是控制渲染前端实现页面渲染的一端。

控制后端可以向渲染前端发送渲染指令和数据，使得渲染前端执行相应的渲染指令进行渲染。例如，是否进行组件悬浮。

渲染前端也可以向控制后端返回页面的交互操作和展示情况，例如，用户在界面上的滚动操作、滚动视图的滚动情况、和组件的当前位置等。

可选地，渲染前端和控制后端可以具体是两个进程。

在一种具体的示例中，使用渲染前端和控制后端协同进行界面渲染展示，通常可以是为了通过一次开发，使得代码能够在多种不同的环境中运行，例如，iOS和安卓平台。

通常随着界面的变化，或者在实现界面中的组件悬浮展示效果时，往往需要渲染前端与控制后端进行频繁的数据通信。

例如，由渲染前端检测滚动方向并发送到控制后端，由控制后端确定是否实现某种效果，再发送指令或数据到渲染前端进行渲染。或者由渲染前端检测滚动距离并发送到控制后端，由控制后端确定是否实现组件悬浮吸顶效果，再发送指令或数据到渲染前端进行渲染。

在一种具体的示例中，具体可以是由控制后端实时复制一个组件，在界面顶端进行渲染实现组件悬浮吸顶效果。其中，随着界面的滚动，需要控制后端频繁发送复制组件的指令，并频繁发送复制的组件所在位置的数据。

在本方法中，在具体实现组件悬浮展示效果时，可以由渲染前端一端进行计算和渲染(例如，由react native架构中的native端进行计算和渲染)，无需与其他程序进行数据通信(例如，在react native架构中，native端无需与js端进行数据通信)，具体可以无需与控制后端通信，从而可以提高前端的渲染效率，提高组件悬浮展示效果的实现效率，降低通信成本，进而可以提高渲染效果，具体可以提高组件悬浮展示效果的平滑程度。

在一种具体的示例中，具体可以是由控制后端将实现组件悬浮展示效果的相关规则或数据直接一次性发送到渲染前端，由渲染前端自身实现组件悬浮展示效果。也可以是在渲染前端内直接编写实现组件悬浮展示效果的相关规则，由渲染前端自身实现组件悬浮展示效果。

下面结合附图，针对本说明书实施例提供的一种组件渲染方法进行详细解释。

如图1所示，为本说明书实施例提供的一种组件渲染方法的流程示意图。

其中，该方法流程可以应用于渲染前端。在一种具体的示例中，渲染前端具体可以是react native架构中的native端。

可选的，对应于渲染前端，可以由控制后端进行控制和通信。在一种具体的示例中，控制后端具体可以是react native架构中的js端。

可选地，渲染前端可以是用于实现页面渲染的一端；控制后端可以是用于控制页面渲染的一端，具体可以是控制渲染前端实现页面渲染的一端。

本方法流程并不限定渲染前端和控制后端是否部署在同一设备上。可选地，渲染前端和控制后端可以部署在同一设备上，具体可以是同一应用中的不同功能模块，也可以是渲染前端部署在终端上，而控制后端部署在服务器上。

本方法流程具体可以包括以下步骤。

S101：检测目标滚动视图组件的当前滚动距离。

其中，可选地，目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，高于该待悬浮组件对应悬浮有效范围内的同级组件。

可选地，不同待悬浮组件对应的悬浮有效范围可以互不重合。

S102：在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将该悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

本方法流程可以通过检测目标滚动视图组件的当前滚动距离，从而可以在待悬浮组件需要实现悬浮效果的情况下，将待悬浮组件移动到当前展示界面的预设固定位置进行渲染展示，从而可以将待悬浮组件固定在展示界面中的同一位置，不会随着界面的滑动而变化位置，实现悬浮展示效果，从而可以通过移动组件的方式实现悬浮展示效果，与组件是否是滚动视图组件的直接子视图无关，对于滚动视图组件内任一层级的组件都可以通过移动的方式，实现悬浮展示效果，进而可以提高组件悬浮展示效果的设置自由度，提高开发者的体验。

并且，在本方法流程中，具体可以是由渲染前端自身直接检测当前滚动距离是否位于任一悬浮有效范围内，无需与其他程序通信，直接移动待悬浮组件实现组件悬浮效果，从而降低了通信成本，提高了渲染前端的渲染效率和渲染效果。具体可以是通过提高渲染效率，提高渲染速度和渲染平滑程度。

本方法流程并不限定待悬浮组件对应的预设固定位置。

可选地，不同待悬浮组件可以对应于相同或不同的预设固定位置。

可选地，预设固定位置可以是展示界面的顶端，从而实现悬浮吸顶效果；预设固定位置也可以是展示界面的底端；预设固定位置也可以是展示界面的侧边，从而实现侧边吸附效果；预设固定位置也可以是展示界面的中间等等。

本方法流程并不限定目标滚动视图组件的滚动方向。

可选地，目标滚动视图组件可以是垂直滚动，也可以是水平滚动。相对应地，当前滚动距离可以包括当前垂直滚动距离和/或当前水平滚动距离。

可选地，由于组件通常是从上向下滚动，针对当前垂直滚动距离，通常可以包括当前展示界面的顶端与目标滚动视图组件的顶端之间的距离，具体可以等于当前展示界面的顶端在目标滚动视图组件中的垂直位置，与目标滚动视图组件的顶端之间的距离。

可选地，针对从左向右滚动的目标滚动视图组件，针对当前水平滚动距离，通常可以等于当前展示界面的左侧边在目标滚动视图组件中的水平位置，与目标滚动视图组件的左侧边之间的距离。

可选地，对应于当前滚动距离，待悬浮组件需要实现组件悬浮效果的情况，通常是目标滚动视图组件滚动到某一位置的情况，也就是当前滚动距离在某一数值范围内的情况。

因此，可选地，待悬浮组件对应的悬浮有效范围可以包括目标滚动视图组件的滚动距离取值范围。在当前滚动距离位于悬浮有效范围的情况下，可以确定该悬浮有效范围对应的待悬浮组件需要实现悬浮展示效果。

在一种可选的实施例中，可以实现组件的悬浮吸顶效果。因此，可选地，当前滚动距离可以包括，当前垂直滚动距离；预设固定位置下目标待悬浮组件的顶端，可以与当前展示界面的顶端重合，从而可以实现目标待悬浮组件的悬浮吸顶效果。

在一种可选的实施例中，可以实现组件的悬浮吸顶效果。本实施例并不限定滚动方向与悬浮效果之间的关联。可选地，当前滚动距离可以包括，当前水平滚动距离；预设固定位置下目标待悬浮组件的顶端，可以与当前展示界面的顶端重合，从而可以实现目标待悬浮组件的悬浮吸顶效果。

在一种可选的实施例中，可以实现组件的左侧边吸附效果。因此，可选地，当前滚动距离可以包括，当前水平滚动距离；预设固定位置下目标待悬浮组件的左侧边，与当前展示界面的左侧边重合，从而仍可以实现目标待悬浮组件的左侧边吸附效果。

在一种可选的实施例中，可以实现组件的底端吸附效果。因此，可选地，当前滚动距离可以包括，当前垂直滚动距离；预设固定位置下目标待悬浮组件的底端，可以与当前展示界面的底端重合，从而可以实现目标待悬浮组件的底端吸附效果。

当然，其他的组件悬浮效果也可以对应实现，此处不再赘述。

下面针对上述方法流程进行详细的解释。

一、S101：检测目标滚动视图组件的当前滚动距离。

1、针对目标滚动视图组件，本方法流程并不限定具体的目标滚动视图组件，只要是渲染前端需要渲染展示的一个滚动视图组件即可，方便后续针对目标滚动视图组件，实现界面滚动下的组件悬浮展示效果。

可选地，在目标滚动视图组件中，可以包括一个或多个待悬浮组件。

可选地，待悬浮组件可以是需要实现组件悬浮效果的组件。

其中，待悬浮组件可以是目标滚动视图组件的直接子组件，也可以是多层级之下的子组件。

例如，目标滚动视图组件中可以包括多个容器子组件，每个容器子组件中可以包括一个子组件作为待悬浮组件。

2、针对目标滚动视图组件的当前滚动距离，可以由渲染前端进行检测，而不是由控制后端进行检测。

在本方法流程中，可以通过由渲染前端自行检测目标滚动视图组件的当前滚动距离，判断待悬浮组件是否需要实现组件悬浮效果，进而通过移动组件实现组件悬浮效果，无需控制后端参与，从而可以提高渲染前端实现组件悬浮效果的效率，提高组件悬浮效果的平滑程度，降低通信成本。

可选地，目标滚动视图组件的当前滚动距离，具体可以是当前滚动的像素值。

可选地，可以持续检测目标滚动视图组件的当前滚动距离。具体可以通过目标滚动视图组件的事件，持续检测或者监测目标滚动视图组件的当前滚动距离，从而可以更好地实现组件渲染，提高组件悬浮效果实现的实时性。

3、针对悬浮有效范围。

为了便于解释，下面以实现组件悬浮吸顶效果为例。

可选地，当前滚动距离可以包括，当前垂直滚动距离；预设固定位置下目标待悬浮组件的顶端，可以与当前展示界面的顶端重合。

可选地，目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围。

可选地，悬浮有效范围可以是对应的待悬浮组件需要实现悬浮吸顶效果的范围，具体可以是以垂直滚动距离为标准，悬浮有效范围可以包括目标滚动视图组件的垂直滚动距离取值范围。

例如，待悬浮组件对应的悬浮有效范围可以包括：目标滚动视图组件的垂直滚动距离从5到100的范围。因此，当目标滚动视图组件的实际垂直滚动距离在5到100之间时，可以确定该待悬浮组件需要实现悬浮效果，从而可以通过移动该待悬浮组件到当前展示界面的顶端的方式，实现悬浮效果。

因此，可以通过检测当前垂直滚动距离是否位于悬浮有效范围内，判断待悬浮组件是否需要实现悬浮效果。

本方法流程并不限定待悬浮组件的悬浮有效范围的取值情况。

可选地，待悬浮组件可以从初始位置的顶端开始实现悬浮效果。待悬浮组件对应的悬浮有效范围从该待悬浮组件初始位置的顶端开始。

例如，待悬浮组件的初始位置的顶端，对应于目标滚动视图组件的垂直滚动距离10，因此，在当前展示界面的顶端滑动到该待悬浮组件初始位置的顶端以下时，具体可以是滑动到15时，可以将该待悬浮组件移动到当前展示界面的顶端，实现悬浮吸顶效果。

可选地，待悬浮组件对应的悬浮有效范围可以从该待悬浮组件初始位置的顶端之上开始。

例如，待悬浮组件的初始位置的顶端，可以对应于目标滚动视图组件的垂直滚动距离50，而所对应的悬浮有效范围可以包括目标滚动视图组件的垂直滚动距离20到40。

可选地，待悬浮组件对应的悬浮有效范围可以从该待悬浮组件初始位置的顶端或底端之下开始。

例如，待悬浮组件的初始位置的顶端，可以对应于目标滚动视图组件的垂直滚动距离50，而所对应的悬浮有效范围可以包括目标滚动视图组件的垂直滚动距离70到80。

在本实施例中，可以根据实际需求，设置待悬浮组件的悬浮有效范围，从而实现多种悬浮吸顶效果，提高悬浮效果的实现自由度。

可选地，通常悬浮效果的实现，是从渲染展示初始位置的待悬浮组件之后，开始实现悬浮效果。

因此，可选地，悬浮有效范围的最小值可以大于或等于，对应的待悬浮组件初始位置顶端与目标滚动视图组件顶端之间的距离。

在本实施例中，可以限定每个待悬浮组件对应的悬浮有效范围是在该待悬浮组件初始位置的顶端以及之后开始的。

需要说明的是，待悬浮组件的初始位置，具体可以是待悬浮组件在目标滚动视图组件中的初始位置。

在一种可选的实施例中，由于目标滚动视图组件中可以包括多个待悬浮组件，而不同的待悬浮组件可以对应于不同的悬浮有效范围。

由于本方法流程是通过移动组件实现悬浮吸顶效果，而为了避免吸顶的不同组件互相遮挡，通常可以同时至多存在一个组件进行悬浮吸顶。

因此，可选地，不同待悬浮组件对应的悬浮有效范围可以互不重合，从而可以确保至多存在一个待悬浮组件实现悬浮吸顶效果。

当然，可选地，不同待悬浮组件对应的悬浮有效范围也可以存在重合部分。

本方法流程并不限定待悬浮组件对应的悬浮有效范围的确定方法。

可选地，可以由开发者人工根据实际需求设置。

可选地，也可以自动确定。具体可以是将悬浮有效范围设置为待悬浮组件初始位置以下固定距离的范围，也可以是将悬浮有效范围设置为待悬浮组件所在父组件的顶端和底端之间的范围。

在一种可选的实施例中，可以根据目标滚动视图组件中的各个待悬浮组件的初始位置，确定各自对应的悬浮有效范围。

可选地，悬浮有效范围的确定方法，可以包括：从上到下遍历目标滚动视图组件中的每个待悬浮组件，执行以下步骤；将当前遍历的待悬浮组件初始位置顶端，与目标滚动视图组件顶端之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值，再针对当前遍历的待悬浮组件，确定对应的悬浮有效范围最大值。

而针对悬浮有效范围的最大值，本实施例并不具体限定。

可选地，可以根据下一个待悬浮组件的初始位置，确定当前遍历的待悬浮组件对应悬浮有效范围的最大值。

可选地，具体可以是将下一个待悬浮组件的初始位置顶端对应的垂直滚动距离，确定为当前遍历的待悬浮组件对应悬浮有效范围的最大值。

具体地，由于当前遍历的待悬浮组件可以在悬浮有效范围内保持悬浮效果，直到下一个待悬浮组件滑动到界面顶端，因此，可以减去当前遍历的待悬浮组件的高度，从而可以在下一个待悬浮组件的顶端滑动到当前遍历的待悬浮组件的底端时，具体可以是下一个待悬浮组件的顶端滑动到与当前遍历的待悬浮组件的底端重合的位置，可以使得当前遍历的待悬浮组件无需保持悬浮效果。

可选地，可以确定下一个待悬浮组件初始位置顶端，与目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为当前遍历的待悬浮组件对应悬浮有效范围的最大值。

可选地，在具体遍历待悬浮组件时，存在最后一个待悬浮组件，无法根据下一个待悬浮组件确定对应悬浮有效范围的最大值。

本实施例并不限定最后一个待悬浮组件对应悬浮有效范围的最大值确定方法，可选地，可以直接将目标滚动视图组件的最大垂直滚动距离，确定为最后一个待悬浮组件对应悬浮有效范围的最大值。

可选地，可以将目标滚动视图组件的底端对应垂直滚动距离，与最后一个待悬浮组件的高度之间的差值，确定为最后一个待悬浮组件对应悬浮有效范围的最大值。

因此，可选地，在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置顶端，与目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

可选地，在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将目标滚动视图组件的高度，与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

在一种可选的实施例中，待悬浮组件对应的悬浮有效范围，可以是预先确定的，从而方便后续渲染前端直接利用预先确定的悬浮有效范围，确定需要实现悬浮效果的待悬浮组件。

本方法流程并不限定确定待悬浮组件对应的悬浮有效范围的执行主体。

可选地，可以是由控制后端或者渲染前端确定待悬浮组件对应的悬浮有效范围。

可选地，在具体确定悬浮有效范围时，可能需要利用待悬浮组件的高度或者初始位置，因此，可以针对目标滚动视图组件中的每个待悬浮组件，获取该待悬浮组件的高度和/或初始位置。

在一种具体的示例中，在react native架构中，可以通过onLayout事件获取各个待悬浮组件的初始位置screenY和高度height。

之后可以利用各个待悬浮组件的screenY和height排序计算得到每个待悬浮组件对应的悬浮有效范围。

可选地，在由控制后端确定悬浮有效范围的情况下，渲染前端可以获取控制后端，针对目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

可选地，渲染前端可以针对目标滚动视图组件中每个待悬浮组件，预先确定对应的悬浮有效范围。本实施例可以减少渲染前端与控制后端的通信。

上述实施例解释的是组件悬浮吸顶效果的实现。

而对于其他类型的组件悬浮，例如，组件悬浮左侧边吸附、组件悬浮底边吸附、组件悬浮中心固定等，可以也相应地确定悬浮有效范围。

在一种可选的实施例中，可以实现组件悬浮左侧边吸附效果。

可选地，当前滚动距离可以包括，当前水平滚动距离；预设固定位置下目标待悬浮组件的左侧边，可以与当前展示界面的左侧边重合。

可选地，悬浮有效范围的最小值可以大于或等于，对应的待悬浮组件初始位置左侧边与目标滚动视图组件左侧边之间的距离。

可选地，悬浮有效范围的确定方法，可以包括：从左到右遍历目标滚动视图组件中的每个待悬浮组件，执行以下步骤；

将当前遍历的待悬浮组件初始位置左侧边，与目标滚动视图组件左侧边之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值。

在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置左侧边，与目标滚动视图组件左侧边之间的距离，再将所确定的距离与当前遍历的待悬浮组件的宽度之间的差值，确定为对应悬浮有效范围的最大值。

在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将目标滚动视图组件的宽度，与当前遍历的待悬浮组件的宽度之间的差值，确定为对应悬浮有效范围的最大值。

当然，本实施例并不限定具体的悬浮有效范围的确定方法，上述实施例用于示例性说明。

其他类型的组件悬浮，可以基于上述实施例的解释，得到相应的悬浮有效范围确定方法。

本方法流程并不限定确定待悬浮组件对应的悬浮有效范围的执行主体。

可选地，可以是由控制后端或者渲染前端确定待悬浮组件对应的悬浮有效范围。

可选地，在由控制后端确定悬浮有效范围的情况下，渲染前端可以获取控制后端，针对目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

可选地，渲染前端可以针对目标滚动视图组件中每个待悬浮组件，预先确定对应的悬浮有效范围。本实施例可以减少渲染前端与控制后端的通信。

4、针对实现悬浮效果的组件与其他组件之间的堆叠顺序。

在本方法流程中，随着待悬浮组件实现悬浮效果，目标滑动视图组件中的其他组件可能随着滑动与实现悬浮效果的待悬浮组件重合。

而悬浮效果通常需要使得待悬浮组件位于其他组件的上方，使得待悬浮组件遮挡其他组件，实现悬浮效果，因此，待悬浮组件在对应需要实现悬浮效果的悬浮有效范围内，需要确保待悬浮组件不会被对应悬浮有效范围内的其他组件遮挡。

进一步地，在前端渲染时，由于存在父子组件的不同层级，具体针对重合的组件确定堆叠顺序时，通常是先比较所在父组件之间的堆叠顺序，堆叠顺序较高的父组件中的每个子组件，都能遮挡堆叠顺序较低的父组件以及其中的全部子组件。

因此，为了确保待悬浮组件的悬浮效果，可选地，每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，可以高于该待悬浮组件对应悬浮有效范围内的同级组件。

具体地，针对每个待悬浮组件，可以通过设置堆叠顺序，使得该待悬浮组件的堆叠顺序高于该待悬浮组件对应悬浮有效范围内的同级组件。

针对包括待悬浮组件的其他组件，具体地，其他组件与所包含的待悬浮组件可以是直接的父子组件关系，也可以是间接的父子组件关系，为了确保这些其他组件不会被遮挡，可以通过设置堆叠顺序，使得这些包含待悬浮组件的其他组件，堆叠顺序高于该待悬浮组件对应悬浮有效范围内的同级组件。

在本实施例中，对于每个待悬浮组件，在对应的悬浮有效范围内，由于该待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，高于对应悬浮有效范围内的同级组件，因此，随着目标滚动视图组件的滑动，对于悬浮有效范围内与该待悬浮组件重合的组件，可以无法遮挡该待悬浮组件，从而方便实现悬浮效果。

可选地，悬浮有效范围内的同级组件，具体可以包括与悬浮有效范围存在交集的同级组件。

在一种具体的示例中，组件之间的堆叠顺序，可以通过设置组件的z-index实现。

进一步地，本方法流程并不限定设置组件之间堆叠顺序的方法和执行主体。

可选地，可以由人工设置组件之间的堆叠顺序，只要满足每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，高于该待悬浮组件对应悬浮有效范围内的同级组件即可。

可选地，可以针对特定情况的悬浮有效范围，自动设置堆叠顺序。

在一种可选的实施例中，以组件悬浮吸顶效果为例。

可选地，在悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与目标滚动视图组件顶端之间的距离的情况下，每个待悬浮组件的悬浮有效范围，都从该待悬浮组件的初始位置顶端或者初始位置顶端以下开始。

相对应的，为了确保每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，高于该待悬浮组件对应悬浮有效范围内的同级组件，由于每个待悬浮组件对应的悬浮有效范围都在该待悬浮组件的初始位置顶端或者初始位置顶端以下开始，因此，可以针对目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。

在本实施例中，对于每个待悬浮组件，该待悬浮组件以下的同级组件的堆叠顺序，都低于该待悬浮组件。

对于包含待悬浮组件的其他组件，该其他组件以下的同级组件的堆叠顺序，都低于该其他组件。

进一步地，由于每个待悬浮组件对应的悬浮有效范围都在该待悬浮组件的初始位置顶端或者初始位置顶端以下开始，因此，对于每个待悬浮组件，对应的悬浮有效范围包含的同级组件都在该待悬浮组件以下，从而可以确定每个待悬浮组件的堆叠顺序，高于对应的悬浮有效范围包含的同级组件。

进一步地，对于包含待悬浮组件的其他组件，该待悬浮组件对应的悬浮有效范围包含的同级组件，也都在其他组件以下，从而可以确定包含待悬浮组件的其他组件的堆叠顺序，高于该待悬浮组件对应的悬浮有效范围包含的同级组件。

可选地，目标滚动视图组件中组件堆叠顺序的设置方法可以包括：针对目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。本实施例可以方便更好地实现待悬浮组件的悬浮效果。

其他类型的组件悬浮展示效果，也可以参考上述实施例，实现每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，高于该待悬浮组件对应悬浮有效范围内的同级组件。

在一种可选的实施例中，可以实现组件悬浮左侧边吸附效果。

可选地，悬浮有效范围的最小值可以大于或等于，对应的待悬浮组件初始位置左侧边与目标滚动视图组件左侧边之间的距离。

可选地，目标滚动视图组件中组件堆叠顺序的设置方法可以包括：针对目标滚动视图组件中每层同级组件，按照从左到右的顺序，设置从高到低的堆叠顺序。

具体解释可以参见上述实施例。

此外，在一种可选的实施例中，为了方便设置组件的堆叠顺序，可选地，不同待悬浮组件对应的悬浮有效范围可以互不重合，从而可以方便设置待悬浮组件和包含待悬浮组件的其他组件的堆叠顺序。

可选地，也可以针对任一待悬浮组件，在所针对的待悬浮组件位于其他待悬浮组件对应的悬浮有效范围的情况下，其他待悬浮组件不在所针对的待悬浮组件对应悬浮有效范围内。

可选地，针对任意两个待悬浮组件，可以不存在所针对的两个待悬浮组件在彼此对应的悬浮有效范围内的情况。

可选地，每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，可以高于该待悬浮组件对应悬浮有效范围内的预设同级组件。其中的预设同级组件可以不包括其他待悬浮组件。

而对于包括其他待悬浮组件的同级组件，本实施例并不限定具体的堆叠顺序关系。可选地，可以按照固定的顺序设置堆叠顺序，也可以设置相等的堆叠顺序。固定的顺序例如，从上到下的顺序，或者从左到右的顺序。

可选地，每个待悬浮组件和包含该待悬浮组件的其他组件的堆叠顺序，可以等于该待悬浮组件对应悬浮有效范围内的包含其他待悬浮组件的同级组件。

可选地，针对每个待悬浮组件和包含该待悬浮组件的其他组件，以及该待悬浮组件对应悬浮有效范围内的包含其他待悬浮组件的同级组件，可以基于固定的顺序设置堆叠顺序。

二、S102：在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将该悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

在一种可选的实施例中，以组件悬浮吸顶效果的实现为例。

可选地，为了实现吸顶效果，预设固定位置下目标待悬浮组件的顶端，可以与当前展示界面的顶端重合。

具体地，目标待悬浮组件的顶端，与目标滚动视图组件顶端之间的距离可以为当前垂直滚动距离。

可选地，在检测到当前垂直滚动距离位于任一悬浮有效范围内的情况下，可以确定该悬浮有效范围对应的待悬浮组件需要实现悬浮效果。

因此，可以将该悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

可选地，当前展示界面的预设固定位置可以是根据当前垂直滚动距离确定的，从而可以确保移动后的目标待悬浮组件位于当前渲染展示的界面顶端，实现悬浮吸顶效果。

在一种可选的实施例中，在悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与目标滚动视图组件顶端之间的距离的情况下，每个待悬浮组件的悬浮有效范围，都在该待悬浮组件的初始位置顶端或者初始位置顶端以下开始。

相对应地，具体将目标待悬浮组件移动到当前展示界面的预设固定位置进行悬浮渲染展示，可以是将目标待悬浮组件向下移动预设距离进行渲染展示。

可选地，预设距离的确定方法可以包括：确定目标待悬浮组件初始状态顶端与目标滚动视图组件顶端之间的距离，再将当前垂直滚动距离减去所确定的距离，得到预设距离。

此外，可选地，由于目标待悬浮组件需要在渲染过程中实现移动，因此，需要预先设置目标待悬浮组件是能够移动位置的组件。

可选地，目标待悬浮组件可以是动画组件，从而可以进行移动。

例如，在react native架构中，目标待悬浮组件可以使用Animated.View组件包裹，从而可以进行移动，实现动画效果。

针对其他类型的组件悬浮展示效果，也可以参考上述实施例，实现组件的移动。

三、在当前滚动距离超出任一悬浮有效范围的最大值的情况下，该悬浮有效范围对应的目标待悬浮组件可以无需实现悬浮效果。

可选地，随着当前滚动距离的增大，在当前滚动距离刚刚超出任一悬浮有效范围的最大值的时刻，可以取消该悬浮有效范围对应的目标待悬浮组件的悬浮效果。

本方法流程并不限定取消目标待悬浮组件悬浮效果的方式。

可选地，可以直接将目标待悬浮组件恢复到初始位置。

可选地，为了提高界面渲染展示的平滑程度，可以将目标待悬浮组件固定在一个位置，从而可以在取消悬浮效果的情况下，该组件可以随着视图的滚动而移动。

当然，本方法流程并不限定具体固定的位置，可选地，可以是目标待悬浮组件实现悬浮效果的某一位置。

因此，在一种可选的实施例中，以组件悬浮吸顶效果的实现为例。

可选地，在检测到当前滚动距离大于任一悬浮有效范围的最大值的情况下，将该悬浮有效范围对应的目标待悬浮组件，固定在第一预设位置。

其中，可选地，第一预设位置下的目标待悬浮组件顶端，可以与目标滚动视图组件顶端之间的距离为该悬浮有效范围的最大值。

第一预设位置具体可以是在当前滚动距离为该悬浮有效范围的最大值的情况下，对应的目标待悬浮组件所在位置。

可选地，在当前滚动距离等于任一悬浮有效范围的最大值的时刻，可以将该悬浮有效范围对应的目标待悬浮组件移动到第一预设位置，实现悬浮效果。

随着当前滚动距离的增大，在当前滚动距离刚刚大于任一悬浮有效范围的最大值的时刻，可以将该悬浮有效范围对应的目标待悬浮组件固定在第一预设位置，取消悬浮效果，从而可以随着当前滚动距离的增大，使得目标待悬浮组件随之移动，进而实现平滑过渡的展示效果。

此外，可选地，将目标待悬浮组件固定在第一预设位置，也可以在之后，随着当前滚动距离的减小，在当前滚动距离从大于对应悬浮有效范围最大值，减小到悬浮有效范围最大值的过程中，由于目标待悬浮组件的位置固定在第一预设位置，从而可以实现目标待悬浮组件的平滑过渡。

之后随着当前滚动距离进一步减小到刚刚小于对应悬浮有效范围最大值，可以基于第一预设位置的目标待悬浮组件，实现悬浮效果。

本实施例可以提高目标待悬浮组件的渲染展示效果。

其他类型的组件悬浮展示效果，也可以参考上述实施例，在检测到当前滚动距离大于任一悬浮有效范围的最大值的情况下，将该悬浮有效范围对应的目标待悬浮组件固定在一个位置。

在一种可选的实施例中，可以实现组件悬浮左侧边吸附效果。

可选地，在检测到当前滚动距离大于任一悬浮有效范围的最大值的情况下，将该悬浮有效范围对应的目标待悬浮组件，固定在第二预设位置；

第二预设位置下的目标待悬浮组件左侧边，与目标滚动视图组件左侧边之间的距离为该悬浮有效范围的最大值。

具体解释可以参见上述实施例。

此外，在一种可选的实施例中，为了进一步提高悬浮效果，可以针对正在实现悬浮效果的待悬浮组件，通过更新样式进行凸显。

例如，可以为正在实现悬浮效果的待悬浮组件添加阴影效果，从而凸显待悬浮组件的悬浮效果。

也可以为正在实现悬浮效果的待悬浮组件添加色彩或者加粗字符，从而凸显待悬浮组件的悬浮效果。

为了提高组件展示效果，可以根据组件的悬浮状态进行样式的更新。

可选地，在检测到当前滚动距离位于任一悬浮有效范围内的情况下，可以将该悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；在需要展示处于悬浮状态的目标待悬浮组件的情况下，可以利用目标待悬浮组件对应的预设悬浮样式进行渲染展示。

此外，可选地，对于当前滚动距离超出任一悬浮有效范围的最大值的情况，由于当前滚动距离也可能随着滚动减小，回到该悬浮有效范围内。而在回到该悬浮有效范围内的情况下，对应的目标待悬浮组件需要实现悬浮效果。

为了提高渲染效率，提高悬浮效果的平滑程度，可选地，一方面可以将对应的目标待悬浮组件固定在一个位置，另一方面，也可以使得对应的目标待悬浮组件保持悬浮时的样式不改变。

因此，可选地，在检测到当前滚动距离大于任一悬浮有效范围的最小值的情况下，可以将该悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；在需要展示处于悬浮状态的目标待悬浮组件的情况下，可以利用目标待悬浮组件对应的预设悬浮样式进行渲染展示。

需要说明的是，需要展示处于悬浮状态的目标待悬浮组件的情况，可以包括当前展示界面包含目标待悬浮组件的情况，具体可以与当前滚动距离是否在悬浮有效范围内无关。

本实施例并不限定具体的组件对应的预设悬浮样式。

可选地，不同待悬浮组件可以对应于不同预设悬浮样式，也可以对应于相同预设悬浮样式。

可选地，预设悬浮样式可以包括组件的颜色、阴影、字体粗细、边框样式等。

例如，待悬浮组件对应的预设悬浮样式可以包括：添加阴影效果并且加粗组件展示的字符。

为了便于理解，本说明书实施例还提供了一种具体的方法实施例。

如图2所示，为本说明书实施例提供的一种组件悬浮吸顶的原理示意图。

其中包括目标滚动视图组件和当前展示界面。目标滚动视图组件中可以包括3个容器组件(容器组件1-3)，每个容器组件中包括一个待悬浮组件(包括待悬浮组件1-3)。每个待悬浮组件对应于一个悬浮有效范围(包括悬浮有效范围1-3)。

图2中从前到后分别展示了时刻1-3的当前展示界面的情况。

随着目标滚动视图组件的滚动，当前展示界面也随之向下移动。

从时刻1到时刻2的过程中，由于垂直滚动距离位于悬浮有效范围1中，因此，可以实现待悬浮组件1的悬浮效果，将待悬浮组件1移动到第一预设位置，也就是当前展示界面的顶端。

从时刻2到时刻3的过程中，由于随着垂直滚动距离的增大，目标滚动视图组件向下继续滚动，垂直滚动距离逐渐从悬浮有效范围1中脱离，因此，待悬浮组件1可以固定在第二预设位置，也就是悬浮有效范围1的最大值所对应的位置。

针对图2中展示的目标滚动视图组件，可以通过以下步骤实现组件悬浮的方法。例如，具体可以是在react native架构下实现组件悬浮。

具体可以包括以下步骤。

S201：根据容器组件的创建顺序，设置递减的Zindex，也就是设置递减的堆叠顺序。具体可以是根据容器组件从上到下的顺序，也就是容器组件1的堆叠顺序，高于容器组件2的堆叠顺序；容器组件2的堆叠顺序，高于容器组件3的堆叠顺序。

S202：根据每个容器组件中子组件的创建顺序，设置递减的Zindex，也就是设置从上到下递减的堆叠顺序。

S203：通过onLayout事件获取各个待悬浮组件的初始位置screenY和高度height。

S204：根据各个待悬浮组件的screenY和height，确定每个待悬浮组件对应的悬浮有效区域。

可选地，具体可以是由人工设置，也可以是自动确定每个待悬浮组件对应的悬浮有效区域包括，从待悬浮组件初始位置顶端对应的垂直滚动距离top，到待悬浮组件所在父组件底端对应的垂直滚动距离。

具体地，可以排序计算得到每个待悬浮组件对应的areaBottom，下一个待悬浮组件的初始位置顶端对应的垂直滚动距离，可以设置为上一个待悬浮组件的areaBottom。其中，最后一个待悬浮组件的areaBottom可以设置为最大值或者固定值，例如目标滚动视图组件的底端，或者999999。

通过areaBottom可以确定每个待悬浮组件的悬浮有效区域，也就可以是从该待悬浮组件初始位置顶端对应的垂直滚动距离top，到该待悬浮组件对应的areaBottom与height的差值(areaBottom-height)。

可选地，步骤S201-S204可以是由控制后端执行的，也可以是由渲染前端执行的。例如，具体可以是react native架构下的JS端(控制后端)，或者native端(渲染前端)执行的。

进一步地，实现组件悬浮还需要执行以下步骤。

S205：为目标滚动视图组件添加滚动事件，从而可以持续检测当前垂直滚动距离ScrollY(具体可以设置ScrollY为Animated.Value类型)。

S206：根据所检测的当前垂直滚动距离，确定需要实现悬浮效果的待悬浮组件，进而确定该待悬浮组件的垂直移动距离tranlateY。

tranlateY可以包含在组件样式style中，从而可以将style应用到Animated.View上，也就是需要实现悬浮效果的待悬浮组件，使得该Anmated.View组件实现悬浮吸顶效果。

由于悬浮效果的实现，是通过对Animated.View的控制实现的，也就是直接由native端实现的，无需js端控制并通知native端更新，从而可以提高渲染性能和效率。

对应于上述方法实施例，本说明书实施例还提供了一种装置实施例。

如图3所示，为本说明书实施例提供的一种组件渲染装置的结构示意图。

该装置可以应用于渲染前端。其中可以包括以下单元。

检测单元301，用于检测目标滚动视图组件的当前滚动距离；

目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含每个待悬浮组件的其他组件的堆叠顺序，高于每个待移动组件对应悬浮有效范围内的同级组件；

移动单元302，用于在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

可选地，当前滚动距离包括，当前垂直滚动距离；预设固定位置下待悬浮组件的顶端，与当前展示界面的顶端重合。

可选地，移动单元302还用于：

在检测到当前滚动距离大于任一悬浮有效范围的最大值的情况下，将任一悬浮有效范围对应的目标待悬浮组件，固定在第一预设位置；

第一预设位置下的目标待悬浮组件顶端，与目标滚动视图组件顶端之间的距离为任一悬浮有效范围的最大值。

可选地，悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与目标滚动视图组件顶端之间的距离。

可选地，悬浮有效范围的确定方法，包括：

从上到下遍历目标滚动视图组件中的每个待悬浮组件，执行以下步骤；

将当前遍历的待悬浮组件初始位置顶端，与目标滚动视图组件顶端之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值；

在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置顶端，与目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值；

在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将目标滚动视图组件的高度，与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

可选地，目标滚动视图组件中组件堆叠顺序的设置方法包括：

针对目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。

可选地，当前滚动距离包括，当前水平滚动距离；预设固定位置下目标待悬浮组件的左侧边，与当前展示界面的左侧边重合。

可选地，移动单元302还用于：

在检测到当前滚动距离大于任一悬浮有效范围的最小值的情况下，将任一悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；

在需要展示处于悬浮状态的目标待悬浮组件的情况下，基于目标待悬浮组件对应的预设悬浮样式进行渲染展示。

可选地，上述装置还包括：

获取单元303，用于获取控制后端针对目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

上述装置实施例的解释可以参见上述方法实施例。

本说明书实施例还提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述任一方法实施例。

本说明书实施例还提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够实现上述任一方法实施例。

本说明书实施例还提供一种计算机设备，其至少包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，处理器执行所述程序时实现一种组件渲染方法。

图4示出了本说明书实施例所提供的一种更为具体的计算机设备硬件结构示意图，该设备可以包括：处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。

处理器1010可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的技术方案。

存储器1020可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。

输入/输出接口1030用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。

通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。

需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。

本说明书实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现一种组件渲染方法。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本说明书实施例可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本说明书实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本说明书实施例各个实施例或者实施例的某些部分所述的方法。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，在实施本说明书实施例方案时可以把各模块的功能在同一个或多个软件和/或硬件中实现。也可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述仅是本说明书实施例的具体实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本说明书实施例原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本说明书实施例的保护。

Claims (14)

1.一种组件渲染方法，应用于渲染前端，其特征在于，包括：

检测目标滚动视图组件的当前滚动距离；

所述目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含所述每个待悬浮组件的其他组件的堆叠顺序，高于所述每个待悬浮组件对应悬浮有效范围内的同级组件；

在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

2.根据权利要求1所述的方法，其特征在于，所述当前滚动距离包括，当前垂直滚动距离；所述预设固定位置下目标待悬浮组件的顶端，与所述当前展示界面的顶端重合。

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

在检测到当前滚动距离大于所述任一悬浮有效范围的最大值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，固定在第一预设位置；

所述第一预设位置下的目标待悬浮组件顶端，与所述目标滚动视图组件顶端之间的距离为所述任一悬浮有效范围的最大值。

4.根据权利要求2所述的方法，其特征在于，所述悬浮有效范围的最小值大于或等于，对应的待悬浮组件初始位置顶端与所述目标滚动视图组件顶端之间的距离。

5.根据权利要求2所述的方法，其特征在于，所述悬浮有效范围的确定方法，包括：

从上到下遍历所述目标滚动视图组件中的每个待悬浮组件，执行以下步骤；

将当前遍历的待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，确定为当前遍历的待悬浮组件对应的悬浮有效范围的最小值；

在当前遍历的待悬浮组件不是最后一个待悬浮组件的情况下，确定下一个待悬浮组件初始位置顶端，与所述目标滚动视图组件顶端之间的距离，再将所确定的距离与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值；

在当前遍历的待悬浮组件是最后一个待悬浮组件的情况下，将所述目标滚动视图组件的高度，与当前遍历的待悬浮组件的高度之间的差值，确定为对应悬浮有效范围的最大值。

6.根据权利要求4所述的方法，其特征在于，所述目标滚动视图组件中组件堆叠顺序的设置方法包括：

针对所述目标滚动视图组件中每层同级组件，按照从上到下的顺序，设置从高到低的堆叠顺序。

7.根据权利要求1所述的方法，其特征在于，所述当前滚动距离包括，当前水平滚动距离；所述预设固定位置下目标待悬浮组件的左侧边，与所述当前展示界面的左侧边重合。

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

在检测到当前滚动距离大于任一悬浮有效范围的最小值的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件确定为悬浮状态；

在需要展示处于悬浮状态的目标待悬浮组件的情况下，基于所述目标待悬浮组件对应的预设悬浮样式进行渲染展示。

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

获取控制后端针对所述目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

10.一种组件渲染装置，应用于渲染前端，其特征在于，包括：

检测单元，用于检测目标滚动视图组件的当前滚动距离；

所述目标滚动视图组件中的不同待悬浮组件，对应有不同的悬浮有效范围；每个待悬浮组件和包含所述每个待悬浮组件的其他组件的堆叠顺序，高于所述每个待移动组件对应悬浮有效范围内的同级组件；

移动单元，用于在检测到当前滚动距离位于任一悬浮有效范围内的情况下，将所述任一悬浮有效范围对应的目标待悬浮组件，移动到当前展示界面的预设固定位置进行悬浮渲染展示。

11.根据权利要求10所述的装置，其特征在于，所述当前滚动距离包括，当前垂直滚动距离；所述预设固定位置下待悬浮组件的顶端，与所述当前展示界面的顶端重合。

12.根据权利要求10所述的装置，其特征在于，还包括：

获取单元，用于获取控制后端针对所述目标滚动视图组件中每个待悬浮组件，预先确定的对应悬浮有效范围。

13.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至9中任一项所述的方法。

14.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够实现如权利要求1至9中任一项所述的方法。

Images