1. 加载预设,添加到List
在界面中创建一个Box,然后依次制作自己的列表item
然后在界面文件夹创建个prefab文件夹直接拖进去,预设就做好啦
代码中的处理
list的单元格刷新处理使用的方法
export default class propsItem extends Laya.Box {
constructor() {
super();
this.initItem();
}
/**预制体 */
private item : Laya.Box;
// 特效
private eff : Laya.Animation;
private item_btn : Laya.Button;
private item_img : Laya.Image;
/**图片资源地址 */
private iconUrl : string = "propsView/";
initItem() {
let prefab = Laya.loader.getRes("prefab/btn_props.json");
this.item = Laya.Pool.getItemByCreateFun("btn_props", prefab.create, prefab) as Laya.Box;
this.addChild(this.item);
this.item_img = this.item.getChildByName("img_props_icon") as Laya.Image;
}
// 设置item的数据
public setItemInfo($data) {
console.log($data);
this.item_img.skin = this.iconUrl + $data.pname + ".png";
}
}
界面中的处理
先加载资源
// 初始化界面UI
// 列表
private list_props : Laya.List;
// 数据数组
private iconNameList : PropsList[] = new Array();
initUI(): void {
this.list_props = this.getChildByName("list_props") as Laya.List;
this.loadPropsPrefab();
}
// 加载做好的预设
loadPropsPrefab(){
Laya.loader.load("prefab/btn_props.json", Laya.Handler.create(this, this.initPropsList), null, Laya.Loader.PREFAB);
}
initPropsList(){
this.list_props.itemRender = propsItem;
// 设置竖向滑动及滑动条skin,地址为空则不显示
// 横向滑动 this.list_props.hScrollBarSkin
this.list_props.vScrollBarSkin = "";
// xy方向上的距离
this.list_props.spaceX = 0;
this.list_props.spaceY = 20;
// 允许点击item
this.list_props.selectEnable = true;
// 单元格刷新处理方法(默认返回参数cell:Box,index:int)。
this.list_props.renderHandler = new Laya.Handler(this, this.updateItem);
// 点击回调
this.list_props.selectHandler = new Laya.Handler(this, this.onPropsClick);
// 复制列表数据源
this.list_props.array = this.iconNameList;
}
private updateItem(cell: propsItem, index: number): void {
cell.setItemInfo(this.iconNameList[index]);
}
// 选中item
onPropsClick($index : number){
if ($index < 0) return;
// console.log("选中道具", $index);
// 选中处理方法
// 选中处理完毕后list会记录当前点击的$index
// 此时重复点击当前$index的item会无效
// 所以将记录的点击$index改为-1
this.list_props.selectedIndex = -1;
}
2. 直接创建列表
-
在界面中右键添加List
-
在List下创建一个Box,更改Box的name为render
-
将List属性的renderType改为render模式
-
其他属性也可以在LIST的属性中一并修改
-
然后就可以在render下创建单元格item啦
-
代码中的处理
private list_props : Laya.List;
private propInfo : PropsType[];
// 初始化UI
initUI(): void {
this.list_props = this.getChildByName("list_props") as Laya.List;
this.initPropData();
this.initPropList();
}
// 初始化列表源数据
initPropData(){
this.propInfo = new Array();
// 没有数据源的话,列表不会显示
for(index = 0; index < 9; index++){
this.propInfo.push({
iconUrl : "",
});
}
// console.log("列表源数据", this.propInfo);
// 初始化列表
initPropList(){
// this.list_props.vScrollBarSkin = "";
// this.list_props.selectEnable = true;
this.list_props.renderHandler = new Laya.Handler(this, this.updatePropsItem);
this.list_props.selectHandler = new Laya.Handler(this, this.onPropsClick)
// 添加数据源
this.list_props.array = this.propInfo;
}
// 单元格的处理方式
updatePropsItem(cell: headIcon, index: number): void {
(cell.getChildByName("img_props") as Laya.Image).skin = "gameView/" + this.propInfo[index].pname + ".png";
}
// 点击方法
onPropsClick($index : number){
if ($index < 0) return;
// // 移除数据源
// this.propInfo.splice($index, 1);
// if (this.propInfo.length <= 0){
// this.list_props.visible = false;
// return;
// }
// this.list_props.array = this.propInfo;
// 重设点击下标
this.list_props.selectedIndex = -1;
}