使用ivx制作移动端抽屉信息框的经验总结

之前的帖子里已经详细说了弹窗和气泡确认框是如何实现的,今天再补充一种用于移动端的抽屉信息框。它多用于一些轻量和低频率的交互,比如用户需要提交一些信息却又不会频繁使用这部分功能,这种情况下去跳转页面会使操作流程更加繁琐,我们就可以制作一个抽屉信息框。平时抽屉信息框是隐藏的,可以节省主页面的空间展示更加重要的内容,当需要进行操作时就让抽屉从屏幕侧面滑出,在抽屉信息框中操作完成后再将其重新隐藏。
在这里插入图片描述
1.组件结构
布局上则可以分为三个部分,列1 ,背景对象组和抽屉表单对象组。列1是案例的主页内容,这里只是放置了一个按钮用于显示抽屉信息框,抽屉表单中上方是三个输入项,底部是两个操作按钮,同时对象组内还有一个轨迹组件,关于它我们在第二点再详细介绍。背景对象组只是做一个蒙层的效果,所以宽高都绑定了两个变量,使对象组能铺满整个屏幕。
在这里插入图片描述
在这里插入图片描述
案例中两个变量的作用是在初始化或者设备宽高变化时获取设备的实时宽高,然后去设置列1的宽高使之占满整个屏幕。
在这里插入图片描述
2.轨迹
首先选中抽屉表单对象组,添加一个轨迹组件。顾名思义,轨迹指的是一个运动的过程,添加在抽屉表单对象组下的轨迹控制的自然就是抽屉表单这个对象组运动的过程。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值