# 悬浮按钮

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183669935901892616`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/导航类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 悬浮按钮

## 一、功能背景及价值用途

悬浮按钮组件是一种常用于网页或应用程序界面的交互元素。在界面设计中，为了不占用主要内容空间，同时又能方便用户快速访问某些常用功能或操作入口，悬浮按钮应运而生。它可以在不干扰用户浏览主要内容的情况下，始终处于用户视野范围内，随时可供操作。通过设置特定图标和单击事件，为用户提供快速执行某项操作的途径，提升操作效率。

## 二、功能概述

悬浮按钮提供了不同的单击事件，如打开子菜单、回到顶部、回到底部、自定义动作等，快速执行常用或重要操作。用户可根据业务需求配置合适的显示位置、偏移量、尺寸、圆角等外观属性，还可设置侧边收起、允许拖动，适配不同界面布局和交互需求。支持添加菜单，丰富操作选项，让用户在一个按钮上实现更多功能。

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/导航类”分类下选中悬浮按钮组件，在右侧配置面板操作相关配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329885634625544&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础配置

#### 2.1、按钮内容

按钮内容可选择不同的展示方式，如“图标”，“文字”或“图标+文字”。

1、图标：可自定义上传或选择合适的图标。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329885530931214&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、文字：可自定义输入不同的按钮名称，设置文字大小，文字换行显示，文字对齐方式。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329889811324934&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、图标+文字：可设置图标大小，按钮名称等文字相关设置，图标与文字相对位置、图标文字间距等。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329889719877643&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.2、显示设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329889811324947&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

显示位置：可选择在页面不同方位显示，如底部、右侧等，适应不同布局需求。

偏移量算法：可切换设置不同的算法，像素/百分比；像素算法根据按钮对应边角定位，百分比算法根据悬浮按钮中心位置定位。

距下偏移/距右偏移：以像素为单位，设置按钮距离页面底部、右侧的距离，微调显示位置。以百分比为单位，设置按钮中心位置在整个屏幕中的比例。

按钮宽度/按钮高度：以像素为单位，设定按钮自身的宽和高，调整按钮大小。

按钮圆角：以百分比形式，设置按钮边角的圆润程度，改变外观样式。

侧边收起：开启后，悬浮按钮会根据当前位置自动向同高度的左侧边或右侧边收起，节省空间，需要时可展开。效果如下图：

1、若悬浮按钮距离左侧区域近，则向左侧边收起;

2、若悬浮按钮距离右侧区域近，则向右侧边收起;

3、侧边收起与回到顶顶/底部功暂不支持同时启用。

    ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329894005628934&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

允许拖动：开启后，用户能在页面内拖动按钮，调整其位置。

#### 2.3、单击事件设置

悬浮按钮提供了不同的单击事件，如打开子菜单、回到顶部、回到底部、自定义动作等，快速执行常用或重要操作。

1、打开子菜单：单击按钮触发子菜单打开，配合 “打开方式”（如 “四周展开”“列表卡片” ），移动端打开方式还可设置下方滑出，以不同形式呈现子菜单内容，提供更多操作选项。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329894005628956&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、子菜单设置：

单击事件选择打开子菜单时，可通过 “+ 添加菜单” 按钮新增子菜单选项。每个子菜单用户可按需定制其图标、标题，事件动作，使悬浮按钮功能贴合业务需求合交互逻辑，增强灵活性与使用性。打开方式为四周展开时，当子菜单超出4个时，第4个及后续的子菜单显示再【更多】中。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329894014844952&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

下面分别是单击事件配置打开子菜单，打开方式配置“四周展开”“列表卡片””下方滑出“的移动端效果。PC端四周展开和列表卡片效果同移动端。

四周展开：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329898496458761&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

列表卡片：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329898496458774&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

下方滑出：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329902620729350&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、回到顶部或回到底部，单击按钮可使页面快速滚动至顶部或底部。

回到顶部配置如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329902715928627&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

回到底部部配置如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329902620729425&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、自定义动作：可根据具体业务需求定制单击按钮后执行的特定操作，配置其事件动作，赋予按钮灵活、个性化功能 。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329906918621186&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.4、悬浮按钮-提示

可配置数字提示及移入后的文字提示。数字提示可通过配置数据集，移入后文本提示可直接在文本中输入对应信息，数字提示展示在悬浮按钮右上角，移入提示可设置自适应位置或固定位置。

数字提示配置如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329906888327178&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1、数字提示开启后，相关数字提示功能生效，启用后下方显示数字提示相关设置；

2、提示内容：可通过配置数据集展示数字。如下图：

3、显示完整数字：若开启，当数字提示大于99时，会显示具体的完整数字，如100、101等；若关闭，当数字提示大于99时 ，则显示 “99+”，以简化显示方式。

4、数字为0时不展示：开启此选项后，如果数字提示为0，就不会展示数字提示；关闭的话，即使数字提示为 0 ，也会进行展示，方便用户了解当前状态为 “无” 相关情况。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329906916524054&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

移入提示配置如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329911286988809&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

可配置固定位置和自适应位置：

1、自适应位置：会根据悬浮按钮的位置自动调整提示文字的位置，显示在悬浮按钮的左侧或右侧；

2、固定位置：提示文字的位置会固定在是浮按钮旁，若存在固定位置显示不下的情况，系统会自适应调整位置。

## 四、上下游关联功能点

1、[ _事件动作配置参考文档_](https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693) 。

2、[ _数据集配置参考文档_](https://www.e-cology.com.cn/sp/doc/docDetail/1133941125198325506) 。
