LayaAir实现游戏选项卡无限循环

在Laya里面,List和Panel都能实现选项开之间的来回滑动,但是我只会左右和上下滑动,但是 想要无限制的滑动不行,例如 我有三个选项卡 ,向左一直滑动的时候 开始标号是 1,2,3 滑动之后变成 2,3,1 再变成 3,1,2这样实现转圈了的效果.
自己做的思路 效果不佳,被放弃了,先记录一下,说不定哪天想好了来完善,没弄明白list的 mouseHandler,renderHandler和selectHandler是怎么处理的,
要显示的选项卡存放在固定的数组里面,每一次移动成功后对立面的单元进行重新排序,3个的时候一点也不卡顿
选项卡代码

private _index: number = -1;
public setIndex(index: number): void {
	this._index = index;
}

public getIndex(index: number): number {
	return this._index
}
public moveAndDark(posX: number): void {
	Laya.Tween.to(this, { x: posX }, 300, Laya.Ease.linearIn, Laya.Handler.create(this, () => { this.tl.play(0, true) }))
}

public moveAndLight(posX: number): void {
	Laya.Tween.to(this, { x: posX}, 300, Laya.Ease.linearIn, Laya.Handler.create(this, () => { this.tl.play(0, true) }))
		}

主要是控制移动,外加一个点击事件,被点击了要移动到中间,可以加放大,或者变灰之类的显示效果.
下面是根据发来的要居中显示的选项进行重排序显示代码

private freshFishView(index: number): void {
	if (index == 1 && inSlipStage) { return }
	if (this.viewArr.length != 3) {
		return
	}
	let movDir: number = 0;//移动方向，0不动，-1向左，1向右
	if (index == this.curMiddleIndex && !inSlipStage) {
		movDir = 0;
		console.log("当前状态不需要移动");
		return;
	} else if (index < this.curMiddleIndex) {
		movDir = 1
	} else {
		movDir = -1
	}
	let arr: any[] = [];//倒手
	for (let i: number = 0; i < this.viewArr.length; i++) {
		arr.push(this.viewArr[i])
	}

	this.viewArr[index].moveAndLight(this.posX[1])
	switch (movDir) {
		case 1://右 
			this.viewArr[index + 1].moveAndDark(this.posX[2])
			this.viewArr[index + 2].moveAndDark(this.posX[0])
			this.viewArr = [];
			this.viewArr.push(arr[2])
			this.viewArr.push(arr[0])
			this.viewArr.push(arr[1])
			break;
		case -1://左 
			this.viewArr[index - 1].moveAndDark(this.posX[0])
			this.viewArr[index - 2].moveAndDark(this.posX[2])
			this.viewArr = [];
			this.viewArr.push(arr[1])
			this.viewArr.push(arr[2])
			this.viewArr.push(arr[0])
			break;
	}
	for (let i: number = 0; i < this.viewArr.length; i++) {
		this.viewArr[i].setIndex(i)
	}
}

当然,上面只是三个选项,可以拓展成单个的,懒得弄,因为最终效果没达到
界面滑动事件监听处理

private onViewClick(e: Laya.Event): void {//起点
	this.lastPosX = Laya.stage.mouseX
	this.view.on(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
	this.view.once(Laya.Event.MOUSE_UP, this, this.onMouseOut)
}
public static inSlipStage: boolean = false
private lastPosX: number = 0;
private lastMoveTime: number = 0
private onMouseMove(e: Laya.Event): void {
		inSlipStage = true;
	if (Math.abs(getTimer() - this.lastMoveTime) < 400) {
		this.lastPosX = Laya.stage.mouseX
		return
	}
	let curPosX: number = Laya.stage.mouseX//当前位置和上一个起点位置差值大于一定值的时候向左右移动一个物体,重新记录起点
	if (curPosX > this.lastPosX) {
		if (Math.abs(curPosX - this.lastPosX) > 80) {
			this.lastPosX = curPosX
			this.freshFishView(0)
			this.lastMoveTime = getTimer();
		}
	} else {
		if (Math.abs(curPosX - this.lastPosX) > 80) {
			this.lastPosX = curPosX
			this.freshFishView(2)
			this.lastMoveTime = getTimer();
		}
	}
}

private onMouseOut(e: Laya.Event): void {
	this.view.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
	Laya.timer.once(100, this, () => { inSlipStage = false; })
}

最终效果滑动是可以的,轮着展示也没问题,就是在每个选项卡的点击事件处理的不好,其中也加延迟来把是在滑动中还是单个点击做辨别,不是很理想,再就是中间显示的有从后面蹿出来的感觉,不好,先记录下,改天再想想看,哈哈

在FairyGUI里面有LoopList,参考那个例子,把他整合到自己的界面里面就好了,我猜,打算实现以下
FairGUI入门参考