1. 引言

从Cocos2d-x/lua/js过来的老鸟们肯定发现了，在CocosCreator属性检查器中Node节点竟然没有zIndex属性。

可就因为这一点，UI节点的遮挡关系控制不便，经常让策划、测试、甚至老板经常找程序员麻烦。不知道大家有没想过要用编辑器去控制zIndex呢，请思考一下？我发现自己是用了CocosCreator快一年才去想到这个问题的。

2. zIndex的编辑器实现

那怎么去做呢，请看下面代码：

/**
*SetZIndex.js 控制组件
**/
cc.Class({extends: cc.Component,//编辑器属性定义properties: {zIndex: 0},onLoad () {this.node.zIndex = this.zIndex;}
});
复制代码

代码非常简单，将这个组件脚本挂载到任意节点上，通过zIndex属性就能控制节点的zIndex了。

但上面的代码还是有点小问题，不知道你看出来没有？

3. 问题

上面的代码有两个小问题，不仔细还不易被发现：

zIndex:0 这样的属性定义zIndex是一个浮点数类型，你可以在编辑器设置0.1这样的值。运行在浏览器或H5环境没什么问题，但跑在原生环境zIndex对应的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函数，它的参数类型是整型。
这个组件只在onLoad时设置了节点的zIndex，如果运行过程中，给这个组件的zIndex属性赋值没有任何作用,并且在编辑器中，你设置zIndex也看不到节点层级的变化。

4. 改进

知道问题了就好办了，看下面代码：

/**
*SetZIndex.js 控制组件
**/
cc.Class({extends: cc.Component,//编辑器属性定义properties: {zIndex: {type: cc.Integer， //使用整型定义default: 0,//使用notify函数监听属性变化notify(oldValue) {//减少无效赋值if (oldValue === this.zIndex) {return;}this.node.zIndex = this.zIndex;}}},onLoad () {this.node.zIndex = this.zIndex;}
});
复制代码

使用一个对象来定义zIndex属性，同时监听zIndex的修改，问题解决。

5. 小结

SetZIndex组件它不依赖任何其它组件和节点，可以挂载任意节点，它是一个通用的组件。不要小看了这个组件的设计，它蕴涵了CocosCreator的组件编程模式和思想。

你有使用类似SetZIndex组件的模式编写可复用的组件代码？欢迎留言交流。

关注「奎特尔星球」微信公众号，我们一起成长。

转载于:https://juejin.im/post/5b7584dde51d45556f41c2e9

CreatorPrimer|从zIndex开始相关推荐

CreatorPrimer | 从zIndex开始
1. 引言从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性. 可就因为这一点,UI节点的遮挡关系控制不便,经常让策 ...
css z-index 的使用
z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注意: 1 元素可拥有负的 z-index 属性值. 2 Z-index 仅能在定位元素上奏效(例如 ...
CSS之定位（元素的层级z-index）
元素的层级z-index: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
css：z-index
针对position: absolute; 解决position:relative;z-index固定定位层级显示问题转载于:https://blog.51cto.com/13507333/2352 ...
excel html modify,在Excel 2010中修改Series对象上的Z-index(Modify Z-index on Series object in Excel 2010)...
在Excel 2010中修改Series对象上的Z-index(Modify Z-index on Series object in Excel 2010) 我正在使用excel 2010. 我有一个 ...
z-index 用法
现在来说说关于z-index的用法,刚刚在写看页面的时候遇见这样的CSS代码,z-index : 2; 当时还不知道是干嘛用的,也不知道有什么作用,上网查了资料才知道. 几个例子吧,当你在需要把页面中 ...
你不知道的z-index
关于z-inde w3c描述 (z-index ) 每个元素都具有三维空间位置,除了水平和垂直位置外,还能在 "Z轴" 上层层相叠.排列.元素在 "Z轴" ...
2015.7.13 第五课课程重点（z-index、overflow、浏览器兼容性）
1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条 ...
关于z-index介绍
兄弟级关系之间存在定位才能用z-index,并且z-index的值越大,图层的位置越上层. 父子级关系用z-index,父元素和子元素之间还是可以作比较的!!!只是需要我们把子元素的z-index值设 ...

CreatorPrimer|从zIndex开始