cocos Creator 制作列表并添加监听

需要的控件就是一个Scrollview,子项做成一个预制文件（在场景中编辑好，然后拖入下方的资源目录就可以生成一个预制文件）。

设置Scrollview的属性，每一个属性鼠标放上去会有对应的中文，根据需要设置就可以了，content这里将我们的一个layout拖进去，就可以实现拖动layout。creator的layout区别于studio，这里的layout功能真的是太强大了，自带列表属性。

然后写layout下的绑定脚本，在properties下添加预制子项的属性，

 itemPrefab: {
 default:null,
 type:cc.Prefab
 },

在creator中会看到

cocos Creator 制作列表并添加监听

将我们之前的预制文件拖进去。

在脚本中合适的位置去生成列表，通过克隆也就是cc.instantiate()

 for (let i = 0; i < data.length; i++) 
{
 var item = cc.instantiate(this.itemPrefab);
 item.setAnchorPoint(cc.p(0,0));
 item.idx = i;
 //添加回调
 item.on(cc.Node.EventType.TOUCH_END, self.btnItemClickHandler, self);
 //设置类型
 item.getComponent("MailItem").setType(type);
 this.node.addChild(item); 
 layoutHeight += item.height;
 }
 this.node.height = layoutHeight;
}

这样就初步生成了一个列表，我在上边会去根据子项的数量更改layout的高度，因为我发现不更改好想layout的高度不会随着项目的数量而改变从而只能看到一版，所以我使用了这样的方法，也是因为自己刚接触这些，可能会有更好的方法或者有什么的我没有去规避。

当我们想要通过点击事件来改变列表的项目，可以移除节点上的所有项目从新调用上边的方法：

//清除所有子项
 clearItems()
 {
 this.node.removeAllChildren();
 },

(ps:数组的长度计算可以直接.length得到，数组也是用[]包围而不是{})

有点击事件就有有监听，creator两种发事件方式，emit和dispatcherEvent。个人觉得这个冒事件用起来很不舒服，比如emit发事件。

发：this.node.emit("IWANT");

监听：this.node.on("IWANT",this.onWantHandler,this);(推荐使用成员函数，如果是闭包可能会有作用域的问题)

然后去监听他就还要同一个节点才能监听到，就是说在第一个组件里边发送消息，我在第二个组件里边想要去监听触发回调，我还要在第二个组件里边去拿到第一个组件，这样才能监听到。

还有一个是dispatchEvent，这个东西冒出来的事件就只能他或者他的爸爸爷爷们去监听，儿子是听不到的，也就是说它只会一层层向上传递，就算是他叔叔都监听不到。

所以，派发事件的时候要多多注意了，稍有不慎就监听不到事件。

另外，我之前做东西的时候喜欢把东西放一堆一堆的，就是我今天在做预制的时候，创了一个空节点，把该有的一些东西放进去，然后布局的时候位置总是不对，后来发现空节点的size是（0,0），难受。

cocos Creator 制作列表并添加监听

相关推荐