# 导航面板

来源快照：`result_data_new_260518.json`

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

## 正文

# 导航面板

一、

## 功能背景及价值用途

一种区别于菜单、选项切换的形式，通过面板的方式将用于导航的菜单平铺显示在一定的范围内，用户可以根据实际需求，直观的点击菜单跳转到想要到达的页面。多用于门户等不同的应用场景，并且灵活性跟高，可以满足不同的用户需求。

二、

## 功能概述

可以在e-builder设计器中导航类组件内为页面新增导航面板组件，通过对导航面板基础设置的配置可以实现面板内不同的数据展示形式，在菜单设置中，配置不同的事件动作或地址，可以达到导航与跳转的效果。

三、

## 使用说明

### 1、功能入口

设计器左侧“基础组件/导航类” 分类下选中导航面板组件，右侧进行详细配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329838383693845&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=1163329838383693856&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=1163329838271717398&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=1163329842645106691&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.

手动配置

在下方【**菜单设置】** 中进行手动配置，支持新增、修改、删除菜单。 支持对菜单的图标、名称、事件动作等进行自定义设置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329842507964428&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=1163329842507964435&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.

系统数据

配置系统数据后会展示系统内置的菜单数据，目前数据来自固定接口：

PC： /api/baseserver/queryApplicationList

Mobile：/api/app/baseserver/queryApplicationList

启用系统数据后，分组管理除分组排列之外禁止编辑；菜单设置禁止编辑，一切以系统数据接口返回为准。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329842623201304&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=1163329846988308481&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=1163329846998794247&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=1163329846998794251&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)

** **

默认给接口传递的参数：（暂无配置入口，发起请求时会默认携带）：

参数名| 类型| 默认值  
---|---|---  
pageId| string|    
compId| string|    
client| string|    
userId| string| window?.TEAMS?.currentUser?.id   
strParam| string|    
  
请求方法：

method: 'POST'

目前仅支持POST方法，暂无配置入口

事件模版：

用于配置事件动作，可直接填写js代码块，

代码块中可使用变量:  curClient:当前运行终端 curItemData:当前点击条目数据

如果想到达到点击菜单跳转到某一页面的效果，使用事件模版，不能在eventGroup中传参。

代码块执行时机： 菜单点击事件触发后执行

可供参考的接口返回格式：

{

    "msg": "接口返回成功",

    "code": 200,

    "status": true,

    "data": {

        "enableGroup": false, // 是否开启分组 （如果为false时groupManage无需传递，且menuConfig中单个条目group字段无须传递）

        "groupManage": [ // ，如果 enableGroup = true 这个字段需要传递

            {

                "id": "group_id_01", //唯一

                "name": {

                    "nameAlias": "分组名称01"

                }

            },

            {

                "id": "group_id_02",

                "name": {

                    "nameAlias": "分组名称02"}}

               

           

        ],

        "menuConfig": [

            {

                "group": "group_id_01", // 与groupManage中id字段匹配后进入这个分组,如果不需要分组则不要传递这个字段

                "id": "bd74a432", //唯一

                "numTips": true, //是否开始右上角的数字提示

                "tipsContent": "200", //数字提示数值  超过99 显示99+

                "icon": "https://img1.baidu.com/it/u=420421608,846052722&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=473", //可为icon或者图片地址

                "name": "写日报",

                "eventGroup": [], // 必传空数组

                "show": true, //当前条目是否展示

                "disabled": false, //当前条目是否禁用,禁用后置灰

                "widthFixed": false, //宽度为给定值还是自适应，

                // "defaultWidth": 205, // widthFixed 为true时传递宽度固值

                "heightFixed": false, //高度为给定值还是自适应

                // "defaultHeight": 186, //defaultHeight 为true时传递高度固值

                // "height":"100", //非必传控制单个条目高度

                // "menuFillColorPicker":"green", //非必传控制单个条目底色

                // "iconStyle": { //非必传

                //     "color": "green", //icon区域底色,当icon为url时谨慎处理

                //     "backgroundColor": "red", //单个条目底色menuFillColorPicker相同作用

                // },

                "showGrayScale":true

            },

            {

                "group": "group_id_02",

                "id": "cdbedf87",

                "numTips": false,

                "tipsContent": "",

                "icon": "#Icon-schedule12-mcolor",

                "name": "安排日程",

                "eventGroup": [],

                "show": true,

                "iconStyle": { //非必传递

                    "color": "green", //icon部分

                    "backgroundColor": "yellow", //与menuFillColorPicker相同作用}}

               

           

        ]}}

   

 

#### 2.2、基础设置

可在设计器右侧属性内的基础设置对导航菜单进行配置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329846998794257&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=1163329846825893917&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=1163329846903595022&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=1163329851129249794&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.

用户定制内容

若用户有任何定制行为，则不同步配置内容，保留用户定制后的内容。若用户无定制行为，则显示后台配置内容。

4.

完全同步

若用户有定制内容，则覆盖用户定制内容，显示后台配置内容。

允许用户定制开启的同时启用【常用菜单】，如果用户进行了定制化，则以用户定制化的为准，常用菜单效果失效。如果用户没有进行定制化，或者用户定制化后又在定制化界面恢复了默认，则按“启用常用菜单”的点击频率顺序排列。

五、

启用搜索

启用搜索开启后会在面板上部显示搜索框，目前已支持拼音搜索（针对多音字会有多个搜索结果）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329851191001100&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=1163329851064344587&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=1163329851191001109&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=1163329851191001115&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=1163329855485968387&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=1163329855491325956&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）。启用空列占位一般配合每行列数使用。

举例： 这个导航面板最多有6个菜单，但每行列数设置了8，不开启空列占位，菜单的宽度仍然按照最多的菜单数排列（6个）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329855485968404&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=1163329855491325965&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=1163329859635298307&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=1163329859755769864&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)

八、

分页显示

开启后可设置每页行数，可分的页数取决于每行页数与每行列数，例如：这个导航菜单总共有6个菜单，每行列数为3，每页行数位1，则会分成2（ 6除1乘3）页

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329859665592334&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=1163329859755769869&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=1163329859665592354&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=1163329864168177670&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、分组设置

启用分组之后，支持三种分组排列形式，支持配置分组名称与图标

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329864033132555&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=1163329868451725315&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=1163329868446367749&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=1163329872748896278&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=1163329872657448973&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=1163329872567271436&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=1163329872657448981&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=1163329872567271449&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=1163329877055176708&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=1163329876918861828&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=1163329876842537025&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=1163329877066825751&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: 边距说明

左侧、右侧、顶部、底部分别对应了 黄色线框与红色线框左侧，右侧，上侧，下侧的间距。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329877066825755&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=1163329881266257923&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=1163329881266257929&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=1163329881266257938&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=1163329881345015827&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=1163329881155108885&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=1163329881120727142&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=1163329885530931203&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)
