# 标签栏

来源快照：`result_data_new_260518.json`

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

## 正文

# 标签栏

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

在低代码平台中,标签栏组件可以用于移动端app的底部导航,可以配置菜单选中和未选中样式及跳转页面,  实现在同一路由下展示多个不同的页面,方便用户通过标签栏的标签项快速定位到所需要的页面。

## 二、功能概述

标签栏可通过设置事件动作在当前页面显示配置好的页面,实现手机端菜单的效果,可以用于移动端应用或者页面的底部或者顶部菜单导航。

## 三、使用说明

### 1、功能入口

移动端设计器左侧“基础组件/导航类”分类下选中标签栏组件，在右侧配置面板操作相关配置。

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329997191692309&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、固定区域

此配置可以修改标签栏固定的的位置,若选择顶部则展示在页面最上方,若选择底部则展示在页面最下方

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330001394384907&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=1163330001394384916&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-5之间,最大不得大于5个,最小不得小于1个,若该数量为1且更多样式为点击更多,则只会展示一个名称为更多的额外标签项

#### 2.3、底部标签栏[更多]样式

当标签栏位于底部时,可选择上滑显示更多、左右滑动显示更多、点击更多；当标签栏位于顶部时,可选择左右滑动显示更多及点击更多

左右滑动:

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330001458233359&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=1163330005895806982&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=1163330005716721683&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、禁止自定义编辑

开关开启后，在更多标签页不显示【编辑】按钮，不能自定义调整显示标签及其显示顺序

#### 2.5、同步后台构建样式

开关开启，后台构建保存时，会根据后台构建的标签同步刷新前台用户的自定义内容；开关关闭，后台构建保存时，不会刷新前台用户自定义的标签位置和顺序，减少的标签会在前台隐藏，增加的标签会显示在前台【更多】标签的最后一个位置；

#### 2.6、记住上次选中菜单

开启，进入此标签栏页面时，执行“上次选中菜单”，无“上次选中菜单”时，执行“默认选中菜单”；关闭，进入此标签栏页面时，执行“默认选中菜单“

### 3、菜单设置

#### 3.1、数字提示

开启后可以通过配置数据集展示数字

#### 3.2、舵式标签

开启后，点击此标签直接打开关联页面（此页面不显示标签栏）

#### 3.3、标签切换

选择不重新加载则切换标签时该页面状态保留,选择重新加载,则切换标签时该页面刷新

#### 3.4、点击效果

当此菜单未配置"打开页面"动作且非“当前页面”时，点击此菜单的效果有：

①此菜单显示选中样式，并且打开空白页面；

②此菜单显示选中样式，不打开空白页面，保留点击此菜单前的页面；

③此菜单不显示选中样式，不打开空白页面，保留点击此菜单前的情况。

使用范围和使用范围中禁用:可以配置该菜单的展示权限

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163330005895807013&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://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693_](https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693)
