Laya中的列表操作

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. 直接创建列表

直接在这里插入图片描述

  1. 在界面中右键添加List

  2. 在List下创建一个Box,更改Box的name为render

  3. 将List属性的renderType改为render模式

  4. 其他属性也可以在LIST的属性中一并修改在这里插入图片描述

  5. 然后就可以在render下创建单元格item啦

  6. 代码中的处理

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;
    }

猜你喜欢

转载自blog.csdn.net/the_vnas/article/details/123807831