打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
文档系统用户端
与后台功能相搭配,iVX在前端应用制作中,也针对“动态”的UI界面进行了更好的支持。

在iH5展示类应用中,我们制作的大多数UI界面是“静态”的,即各种UI元素,比如图片、文本、视频等,都是在编辑器里预先设置好,在案例运行时,这些元素按照我们定义好的交互逻辑,来显示、隐藏、运动,达到交互展示的效果。但在大多应用系统中,我们展示给用户的UI界面都是“动态”的,即由后台数据来决定。比如,一个点餐页面,一个购物车商品展示,一个OA任务列表等等,这些界面的数据都是实时请求后台数据库获得的,并不是可以预先定义好,这类的界面,我们称之为“动态”的UI界面。

制作动态的UI界面,在iH5中可以使用数据单元或是循环事件创建,但数据单元功能太单一,仅能“直白”的展示数据库里的数据,而循环事件创建,操作比较复杂,且需要相应所有用户交互操作,对元素进行属性设置,当界面相对复杂时,维护起来成本非常高。

因此,在iVX中,我们采用了“数据驱动”的前端框架,让我们能使用最快捷的方法来制作动态UI界面。简单来说,我们可以将一个UI元素的任意属性,绑定一个“数据来源”(可以是变量或另一个元素的某个属性), 然后当这个数据来源改变时,UI元素就自动改变了。有了数据绑定功能,我们就只需要关注数据的变化,而不需要手动管理每个UI元素的状态变化了。



如上图所示,在iH5,我们需要针对没一个交互事件,去事件面板定义处理逻辑,比如,点击按钮的时候做什么,数据改变的时候做什么,每个事件处理逻辑,都要直接操作各个UI元素。当交互逻辑复杂的时候,工作量会非常大。在iVX中,我们直接支持将UI元素的属性绑定数据变量,当绑定关系设置完成之后,我们就不需要关心UI元素的操作了,直接使用交互事件,对数据变量进行赋值即可。这样的UI元素管理方法,针对动态的UI界面的制作非常高效。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
交互设计技巧——创造好的用户体验(2)
优漫动游:聊聊UI设计中的交互原则
从想法到落地,原型演示的五个口诀
国内H5行业现状
平面设计与UI设计各有什么不同?
UI设计的十大原则!
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服