关于ivx鼠标移入移出事件的经验总结

在ivx中很多组件，如文本、图片、按钮、行列容器等，都是可以监听到鼠标移入移出事件的。今天就以此功能为基础，制作一个将鼠标移入显示详细信息的demo。

1.第一步，我们使用循环创建做一个列表，这个功能在各种demo中经常出现，这里就不再赘述了。


2.第二步，我们将列的背景图片设置为当前数据中的image，然后在列的下面添加一个文本组件展示当前数据中的title。

3.第三步，我们来做鼠标移入后要显示的部分。首先添加一个数值变量用于数据绑定，其初始值设为-1；列1是作为一个背景蒙层，我们设置它的属性为撑开，让它占满循环创建列的剩余区域，其可见属性与数值变量进行数据绑定，只有当数值变量等于当前序号时它才是可见的；行1用来显示具体的描述信息，我们将行1的高度设置为1px，宽度设置为100%，同时剪切属性设置为否，这样它的子组件即使高度超出行1的高度也可以显示完整，这里我们添加一个文本组件展示当前数据的description，和列1一样我们也将行1的可见属性做相同的数据绑定。


4.最后就是事件的设置了，给循环创建列，列1和文本组件都添加上事件，当鼠标移入是将数值变量赋值为当前序号1，当鼠标移出是再将数值变量重置为-1，至此整个功能就完成了。

总结
这种案例最好使用数据绑定，如果直接设置当鼠标移入循环创建列时让行1和列1显示，鼠标移出行1和列1时再让行1和列1隐藏的话事件会比较混乱。另外就是这个效果在绝对定位环境下会更容易实现一些，因为绝对定位环境下子组件可以相互重叠，位置只跟坐标有关，而相对定位环境下子组件都是按行或列进行排序，像这个demo比较简单，只有蒙层和描述信息两个行列容器，一个设置撑开，另一个设置高度为1px即可，但是组件再多一些就需要对位置关系进行详细的计算了。