[LayaAir 2.0]List 组件做的手风琴Demo

注:鉴于之前群里有人问如何用 List 组件如何做一个手风琴效果 特贴出来此贴  (本来写代码很烂 大家凑合看下  =  =)
首先 讲一下我做这个组件原理  手风琴 效果原理: 点击Box   拿到此索引  用此索引更新前后所在索引 Box 的 y 或 x 坐标  达到显示隐藏效果
好了 废话不多说  上代码！
 
//此Demo纯代码实现  根据官网UI示例改编 
 
private index_num =99999; // 定义当前点击索引 默认值 最好比List 数据长度要大
private listArr =[]; //包含List 数组
private arr = [0,1,2,3]; //List 的数据源（此代码中arr只起到渲染数量作用）
/**
         * 创建List
         */
        var list =new Laya.List();
        list.bgColor ="#000000";
        list.size(100,300);
        list.repeatX =1;
        list.repeatY =this.arr.length;
        list.itemRender =Item; //Item 为继承BOX类
        list.vScrollBarSkin ="";
        Laya.stage.addChild(list);
        list.array =this.arr;
        list.renderHandler =new Laya.Handler(this,this.updateItem);
        this.listArr.push(list);
//------------------------------------------------------------------------------
updateItem(cell:Item,index:number){
 
        var img1 = cell.getChildByName("img1") as Laya.Image;
        var img2 = cell.getChildByName("img2") as Laya.Image;
        img1.on("click",this,this.onRefresh,[index])
        //当索引相同时 BOX 高度改变
        if(this.index_num ==index){
            cell.height=80;
            cell.y =index*30;
            //显示图片
         img2.visible =true;  
        }else
        {
        // 大于点击索引时 所有的Box的y轴都要多加上当前多显示图片的高度50   
        if(this.index_num<index)
        {
        cell.y = 50+index*30;
        }
         //小于点击索引时 所有的Box的y轴恢复原位
        if(this.index_num>index)
        {   
        cell.y = index*30;
        }
        //不是点击索引所在Box 所有Box恢复固定高度
        cell.height =30;
        //隐藏图片
        img2.visible =false; 
        }
        
    }
//点击重新渲染
onRefresh(index:number)
    {
     this.index_num = index; //赋值当前索引
     this.listArr[0].array =this.arr;
     this.listArr[0].refresh()    
    }
 
 
/**
* 创建BOX
*/
class Item extends Laya.Box{
    public static WID:number =100;
    public static HEI:number =30;
    constructor(){
        super()
        this.size(Item.WID,Item.HEI);
        var img1 =new Laya.Image("bg0.png");
        var img2 =new Laya.Image("bg1.png");
        this.pos(0,0);
        img1.size(100,30);
        img2.size(100,50);
        img1.name ="img1";
        img2.name ="img2";
        img2.visible =false; //默认img2隐藏
        img2.y =30,
        this.addChild(img1);
        this.addChild(img2);
    }
}
 
 
 
以上就是全部代码;