laya的pageView的简单实现

 

export default class ViewPageComp

{

//回弹距离

private moveOffset: number;

//当前pageIndex

private curPageIndex:number = 0;

//总页数

private totalPageNum:number;

private pageX:number[];

 

private mContainer:Laya.Box;

private cb:Function = null;

constructor() {

}

 

/**

* 初始化box

* @param box 容器

* @param pageWidth page宽度

* @param pageNum page数量

* @param cb 选定一页后的回调

*/

init(box:Laya.Box,pageWidth:number,pageNum:number,cb:Function = null)

{

if(!box)

{

return;

}

this.cb = cb;

this.mContainer = box;

this.totalPageNum = pageNum;

this.pageX = new Array<number>();

 

//初始化box能移动的最边界位置

this.moveOffset = Laya.stage.width / 6;

let max = (Laya.stage.width - pageWidth) / 2;

for(let i = 0 ; i < pageNum; i++)

{

let pagex = max - (pageWidth + 60) * i;

this.pageX.push(pagex);

}

this.mContainer.left = this.pageX[0];

 

this.mContainer.on(Laya.Event.MOUSE_DOWN, this, (event) => {

this.onMouseXDown(event.nativeEvent.changedTouches[0].clientX);

});

 

this.mContainer.on(Laya.Event.MOUSE_MOVE, this, (event) => {

this.onMouseXMove(event.nativeEvent.changedTouches[0].clientX);

});

 

this.mContainer.on(Laya.Event.MOUSE_UP, this, (event) => {

this.onMouseXUp(event.nativeEvent.changedTouches[0].clientX);

});

 

this.mContainer.on(Laya.Event.MOUSE_OUT, this, (event) => {

this.onMouseXUp(event.nativeEvent.changedTouches[0].clientX);

});

}

 

private _onMouseXDown: number = 0;

private touchMouseX:number = 0;

private _MoveDir: number = 0;

private isMouseDown:boolean = false;

private onMouseXDown(mouseX: number): void {

// Laya.Tween.clearTween(this.mContainer);

this._onMouseXDown = mouseX;

this.touchMouseX = mouseX;

this.isMouseDown = true;

}

 

private onMouseXMove(mouseX: number): void {

if(!this.isMouseDown)

{

return;

}

let containerLeft: number = this.mContainer.left;

let moveDis = mouseX - this._onMouseXDown;

this._onMouseXDown = mouseX;

this._MoveDir = moveDis > 0 ? 1 : -1;

if((containerLeft < this.pageX[this.pageX.length - 1] - this.moveOffset && this._MoveDir < 0) || (containerLeft > this.pageX[0] + this.moveOffset && this._MoveDir > 0))

{

return;

}

containerLeft += moveDis;

this.mContainer.left = containerLeft;

}

 

private onMouseXUp(mouseX: number): void {

let moveDis = Math.abs(mouseX - this.touchMouseX);

if(moveDis > 50)

{

let index = this.curPageIndex - this._MoveDir;

if(index < 0)

{

index = 0;

}

else if(index >= this.pageX.length)

{

index = this.pageX.length - 1;

}

this.moveToPage(index);

}

else

{

this.moveToPage(this.curPageIndex);

}

this.isMouseDown = false;

}

 

private moveToPage(pageIndex:number)

{

if(pageIndex >= this.pageX.length)

{

console.error("pageView pageIndex error");

return;

}

let targetX = this.pageX[pageIndex];

let tween = Laya.Tween.to(this.mContainer,{left:targetX},300,Laya.Ease.linearNone,Laya.Handler.create(this,()=>{

if(this.curPageIndex != pageIndex)

{

this.cb && this.cb(pageIndex);

this.curPageIndex = pageIndex;

}

Laya.Tween.clear(tween);

}),null,false);

}

}