现在我来为您详细讲解如何在CocosCreator中做一个List的完整攻略。
首先我们需要在CocosCreator中用节点编辑器来创建一个List节点。创建节点的方式可以在菜单栏中选择Creator > Create Node。然后输入节点的名称并点击确定，此时我们将会得到一个空的节点。
在这个空节点上添加List组件。在节点编辑器中，选择这个空节点，然后转到属性检查器，在这里选择Add Component，并在弹出的对话框中选择UI > List。
在添加了List组件之后，我们需要进入属性检查器来设置该组件的各个属性。主要包括以下几个：
在以上设置完成之后，我们还需要做两个操作:
接下来，我们来分别说明如何完成这两个操作。
在代码中，我们需要将需要在List中显示的数据设置成一个数组，然后将这个数组传递给List组件。List启动后会自动从数据源中渲染每一项，并根据设定的模板来对每一项进行布局。
// 在代码中给List设置数据源
cc.Class({
properties: {
list: {
default: null,
type: cc.List,
},
prefab: {
default: null,
type: cc.Prefab,
},
},
onLoad () {
// 将数据添加到List组件中
this.populateList();
},
populateList () {
for (let i = 0; i < this.list.length; ++i) {
let item = cc.instantiate(this.prefab);
item.getComponent('ListItem').updateItem(this.list[i]);
this.listContent.addChild(item);
}
},
});
在代码中，我们需要将数据源中的数据通过渲染方式渲染到List中，通常的方法是通过自定义节点来实现渲染。
cc.Class({
extends: cc.Node,
properties: {
nameLabel: cc.Label,
priceLabel: cc.Label,
},
updateItem (data) {
this.nameLabel.string = data.name;
this.priceLabel.string = data.price;
},
});
至此，我们已经成功地创建了一个List组件，并实现了List的数据源和渲染方式。
本文链接：http://task.lmcjl.com/news/11777.html