【功能上新-H5】新增菜单组件


一、应用场景

菜单组件在用户使用场景中扮演着至关重要的角色,它们提供了直观的导航方式,帮助用户快速访问所需的功能或信息,从而提升用户体验和参与度。

一个精心设计的菜单组件可以为用户提供更直观、更便捷的导航方式,增强用户的黏性。例如,在美食展示页面中,菜单组件将各个菜品分类,用户可以根据自己的口味和需求快速找到心仪的美食。在新闻资讯页面中,菜单组件将不同的新闻分类,用户可以根据自己的兴趣选择浏览,提供了更好的阅读体验。

优势:菜单组件广泛应用于各种场景,如页面导航、工具栏、快捷操作等,通过提供清晰的页面导航、优化用户操作流程、增强用户参与度等方式,显著提升了用户体验和参与度。

 

二、操作流程

①通过模板/空白创建打开H5编辑器→②添加菜单组件→③进行组件设置→④其他设置→⑤保存发布

步骤①:通过模板/空白创建打开H5编辑器(略)

步骤②:添加菜单组件

步骤③:进行组件设置

将菜单组件添加进画布之后,点击编辑菜单组件按钮

弹出组件设置:

菜单组件包括抽屉菜单和tab菜单

(1)、抽屉菜单

抽屉菜单包括纵向子菜单和横向子菜单;其中纵向子菜单又包括四种弹出方向:向上弹出、向下弹出、从左弹出和从头弹出,满足不同用户场景的需要;

横向子菜单包括两种弹出方向:从上弹出和从下弹出;

以下设置内容以纵向子菜单中向下弹出的方式进行举例,大家可参考去体验其他方式:

  • 支持将画布中主菜单icon拖动出一个框,支持更换主菜单背景颜色,支持更换主菜单按钮对齐方式:左对齐、右对齐;

  • 子菜单配置:输入子菜单名称,设置关联页面,允许增加和减少子菜单;
  • 子菜单关联页面:可以设置无触发、切换外链或者切换本作品中的页面

  • 允许固定当前组件位置,即在长页面中,不会随着访客滑动而滑动,会一直固定在设置的位置;
  • 允许设置主菜单按钮图标样式、子菜单按钮图标样式;主菜单背景颜色、主菜单字体颜色;子菜单背景颜色和子菜单字体颜色;

(2)、TAB菜单

  • TAB菜单包括纵向菜单和横向菜单;其中两种菜单样式又包括一级菜单和多级菜单的选择,用户可根据自己的需求选择不同的层级;
  • 横向子菜单包括两种弹出方向:从上弹出和从下弹出;

  • 子菜单配置,设置菜单名称和管理页面,点击菜单后的添加,可添加子菜单
  • 点击下方添加主菜单,可添加主菜单,TAB菜单最多添加4个主菜单

  • 支持固定当前组件设置,支持固定在最底端

步骤④:其他设置(略)

步骤⑦:保存发布(略)

三、访客视角

1、抽屉菜单样式(简单演示)点击菜单直接跳转至关联页面

2、TAB菜单样式(简单演示)点击菜单直接跳转至关联页面


changli 2024年9月4日 18:01 1216 收藏文档