OneCode实战——自定义悬停动画菜单
原创OneCode实战——自定义悬停动画菜单
原创
前言
基于模型驱动的低代码平台，将数据模型与展现模型做了有机的整合大幅降低了开发者的工作量。使程序员可以从繁重的业务编程和UI展现等技术细节上脱离出来。但在具体的项目当中，客户对于展现界面都会有自身独特的展示展现风格。特别是类似于门户主页、功能菜单框架等方面基本上都是定制应用方案。针对于类似的需求在低代码领域中也是一个应用难点，但也不乏优秀的低代码引擎在“全栈”支持上提供了很不错的解决方案。今天我们就选取了一个典型的例子，如何利用OneCode低代码引擎构建自定义应用。
一，需求描述
在官网演示的首页中，我们有两处的，动态菜单应用。
如图所示标号“1，2，3”是一个典型的鼠标悬停菜单。
根据主题风格的不同，我们将在后续章节中陆续讲解如何在无代码的情况下，修改匹配菜单跟样式，悬停菜单样式以及利用OneCode SVG画布绘制自定义过渡“形状”动画。
添加图片注释，不超过 140 字（可选）
标号“4”是一独立的悬停搜索框设计，也是在UI/UE中非常常见的交互设计。后续章节中我们也将做一个无代码展示说明。
*用例演示地址：
二，菜单样式组件准备
（1）快速进入页面设计器
添加图片注释，不超过 140 字（可选）
（2）跟菜单
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
跟菜单，由一个（1）占位符，（2）一个用户名标签 和一个（3）下拉标签组成
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
（3）弹出菜单
添加图片注释，不超过 140 字（可选）
List组件独立样式配置：
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
（4）SVG矢量图过渡动画
在当前用例中，我们利用SVGPage 绘制了一个，透明的下拉三角矢量图。
添加图片注释，不超过 140 字（可选）
三，动作关联配置
OneCode SVGPager是一个强大的绘图控件，在SVGPager中，用户可以自行利用画笔自行绘制矢量图，可以利用内制的矢量图库组合应用，下图是两个典型的应用。
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
动作编辑器
（1）跟菜单悬停
选中跟菜单组合，在DOCK悬停属性上选择，SVG矢量动画。
添加图片注释，不超过 140 字（可选）
（2）菜单点击动作
添加图片注释，不超过 140 字（可选）
四，延伸阅读
在上述示例中，主要使用到了OneCode两个关键的通用组件
（1）OneCode 通用样式管理器。
DOM树透视样式盒
DOM树透视
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
（2）OneCode动作管理器
动作可视化，逻辑片段的归类管理
在项目实施过程中业务需求是多变的而这些需求的变更与实现绝大多数情况下是通过在已有的设计中添加特定的动作监听，添加逻辑片段来实现。需求的变化是不容易预估的，这就造成了后期添加的的这些逻辑片段非常随机分散。如何管理并前并合理的归类展现这些逻辑将会是低代码逻辑编排实现的一个重点。
动作概览
动作逻辑片段的复用管理
在实际项目众多的动作与逻辑分析中会发现，页面大都是以表单、列表，详情为主，而其中90%的业务逻辑基本上都围绕在表单(校验，取值，赋值，提交)，对话框（显隐、提示），发送请求，消息提示，数据处理，路由跳转，条件判断等。这些逻辑复用度很高，对于程序员而言大量重复性的工作会极大的抵销其工作的积极性。这就需要将这些逻辑功能前置，通过动作的可视化以及智能导航将这一部分工作交由产品经理或者需求人员前置使用。
添加图片注释，不超过 140 字（可选）
复杂逻辑编排支持
实际项目中，业务复杂度是非常高的，每个页面会包含很多的的独立组件，每个组件都有其独立的动作逻辑，而实际的使用场景中往往是众多页面相关关联甚至嵌套，这期间组件与组件间，组件与页面间，页面与页面间会形成非常复杂的联动关系。这些联动关系的管理需要一套行之有效的管理方法和理论支持。
添加图片注释，不超过 140 字（可选）
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。