Laya中使用List组件
Laya中的List组件使用 入门1.首先我们先单独创建一个测试场景,避免混乱。2.在场景中创建一个List组件,并且在右边属性栏Rendertype中选择render3.在List里创建一个Text,设置FontSize = 100后,在层级栏中 右键这个Text,选择转换为容器,类型为Box4.将box 右边属性栏Rendertype中选择render(同理步骤2)5.点击List,在右边属性
·
Laya中的List组件使用 入门
1.首先我们先单独创建一个测试场景,避免混乱。
2.在场景中创建一个List组件,并且在右边属性栏Rendertype中选择render
3.在List里创建一个Text,设置FontSize = 100后,在层级栏中 右键这个Text,选择转换为容器,类型为Box
4.将box 右边属性栏Rendertype中选择render(同理步骤2)
5.点击List,在右边属性框中设置RepeatX =》 1 RepeatY =》 5 ,并将Assets\comp中vscroll拖入vScrollBarSkin中(测试发现没有这个后面就无法滑动)。到这一步时list的轮廓已经出现(如果显示有问题,调整list长宽)
6.当前运行是无法进行滑动的(因为list当前可能是空的),需要创建一个脚本 如下,将该脚本绑定在List上。运行后就可以用鼠标滑动了。
···
var data = []
export default class RankList extends Laya.Script {
constructor() {
super();
}
onEnable() {
console.log(this.owner.getComponent(Laya.List));
for(var m =0;m<20;m++){
data.push({m_label:"No."+m});//参考官方文档创建20个对象
}
this.owner.array = data;//设置滑动容器的链表
this.owner.renderHandler = new Laya.Handler(this, this.onRender); // 渲染list
}
/**
* 渲染list
*/
onRender(cell, index)//cell就是list中包含的对象,在这里通过cell获取自己定义的属性
{
console.log(cell);
//这里cell就是层级中的box节点,其下text就是_children[0],当前我们就已经获得了之前创建的Text节点
let myTest = cell._children[0];
//设置Text的值
myTest.text = "6666";
//扩展后可以设置节点属性
// let PlayerName = cell._children[0]._children[2];
// let PlayerArealdyLevel = cell._children[0]._children[3];
// let PlayerRankImage = cell._children[0]._children[4];
//PlayerName.text = "Nice";
//PlayerArealdyLevel.text = "666" ;
//PlayerRankImage.visible = true;
}
onDisable() {
}
}
···
更多推荐
已为社区贡献1条内容
所有评论(0)