ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结

评论131

在ivx中很多组件,如文本、图片、按钮、行列容器等,都是可以监听到鼠标移入移出事件的。今天就以此功能为基础,制作一个将鼠标移入显示详细信息的demo。
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片1
1.第一步,我们使用循环创建做一个列表,这个功能在各种demo中经常出现,这里就不再赘述了。
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片2
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片3
2.第二步,我们将列的背景图片设置为当前数据中的image,然后在列的下面添加一个文本组件展示当前数据中的title。
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片4
3.第三步,我们来做鼠标移入后要显示的部分。首先添加一个数值变量用于数据绑定,其初始值设为-1;列1是作为一个背景蒙层,我们设置它的属性为撑开,让它占满循环创建列的剩余区域,其可见属性与数值变量进行数据绑定,只有当数值变量等于当前序号时它才是可见的;行1用来显示具体的描述信息,我们将行1的高度设置为1px,宽度设置为100%,同时剪切属性设置为否,这样它的子组件即使高度超出行1的高度也可以显示完整,这里我们添加一个文本组件展示当前数据的description,和列1一样我们也将行1的可见属性做相同的数据绑定。
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片5
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片6
4.最后就是事件的设置了,给循环创建列,列1和文本组件都添加上事件,当鼠标移入是将数值变量赋值为当前序号1,当鼠标移出是再将数值变量重置为-1,至此整个功能就完成了。
ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片7
总结
这种案例最好使用数据绑定,如果直接设置当鼠标移入循环创建列时让行1和列1显示,鼠标移出行1和列1时再让行1和列1隐藏的话事件会比较混乱。另外就是这个效果在绝对定位环境下会更容易实现一些,因为绝对定位环境下子组件可以相互重叠,位置只跟坐标有关,而相对定位环境下子组件都是按行或列进行排序,像这个demo比较简单,只有蒙层和描述信息两个行列容器,一个设置撑开,另一个设置高度为1px即可,但是组件再多一些就需要对位置关系进行详细的计算了。

ivx编辑器教程 关于ivx鼠标移入移出事件的经验总结-图片8

 

发表评论

匿名网友