[]这样的panel请问如何实现比较好?

如图,如果只是左图的效果就比较简单,但是现在需要点击其中一个,然后像右图一样把隐藏的内容弹出来,然后下面的cell能自动适应下移。请问如何实现比较好?
QQ截图20180810013336.png
已邀请:

谢春

赞同来自:

实现步骤:
1、定义一个Item,界面分两层(可用两个Sprite进行划分)
class Item extends ui.itemUI {
private state = 0;
constructor() {
super();
//点击最先出来的按钮,会显示下一层界面,同时隐藏自己
this.btnFirst.on(Laya.Event.CLICK, this, this.change, [0]);
//点击上面一层的按钮,会隐藏该层,同时显示上一层
this.btnChange.on(Laya.Event.CLICK, this, this.change, [1]);
//初始时默认上面一层不可见
this.layoutSecond.visible = false;
}
//点击切换状态
private change(state: number, e: Laya.Event) {
e.stopPropagation();
this.state = state;
this.layoutSecond.visible = (state === 0);
this.btnFirst.visible = (state !== 0); 
}
}
 
2.定义一个界面,界面上放一个Panel(因为要滑动)
class TextUI extends ui.TestUI {
constructor() {
super();
//设置可滚动
this.container.vScrollBarSkin = '';
this.init();
}
private init() {
for (var i = 0; i < 10; i++) {
var item = new Item();
item.pos(0, i * (item.height + 1));
this.container.addChild(item);
}
}
}
 
3,加载资源,完成后再加载界面
import WebGL = Laya.WebGL;
// 程序入口
class GameMain {
constructor() {
Laya.init(500, 1000, WebGL);
Laya.stage.scaleMode = Laya.Stage.SCALE_FIXED_WIDTH;
var resPath = ['res/atlas/comp.atlas'];
Laya.loader.load(resPath, new Laya.Handler(this, function () {
var textUi = new TextUI();
Laya.stage.addChild(textUi);
}), null, Laya.Loader.ATLAS); 
}
}
new GameMain();
 

Bert

赞同来自:

感觉很简单,不知道难点在哪里
点击后改变状态,重新布局就行

该问题目前已经被锁定, 无法添加新回复

商务合作
商务合作