自定义Scrollview组件开发

class CustomScrollerBar extends eui.Component {

publicconstructor() {

super();

this.skinName = skins.CustomScrollerBarSkin;

// this.addEventListener(egret.Event.RESIZE, this.viewResze, this);

}

publicscrollerBarGroup: eui.Group;

publicscrollerBar: eui.Image;

publicscrollerBg: eui.Image;

publicmaskBg:eui.Image;

privatescroller: eui.Scroller;

privatescroller_bar_source: string;

privatescroller_bg_source: string;

privateui_loaded: boolean = false;

protectedcreateChildren() {

super.createChildren();

// this.scrollerBar.height = this.scrollerBarGroup.height * 0.1;

this.scrollerBarGroup.mask = this.maskBg;

this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);

this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);

this.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);

this.addEventListener(egret.TouchEvent.TOUCH_CANCEL, this.onTouchEnd, this);

this.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.onTouchEnd, this);

this.ui_loaded = true;

if (this.scroller_bar_source != undefined)

this.changeScrollerBarDisplayImage(this.scroller_bar_source, this.scroller_bg_source);

}

privatelastY: number = 0;

privatetouch_id: number = -1;

privateonTouchBegin(e: egret.TouchEvent) {

if (!this.scrollerBar || this.touch_id != -1)

return;

if (this.scrollerBar.hitTestPoint(e.stageX, e.stageY)) {

this.touch_id = e.touchPointID;

this.lastY = e.stageY;

}

}

privatechangeScrollBarHeight() {

//scroller bug 需要延迟获取 contentHeight, 否则取到的值为0

setTimeout(() => {

if (!this.scroller || !this.scrollerBar)

return;

//除数不能为零

if (this.scroller.viewport.contentHeight == 0)

return;

this.scrollerBarGroup.height = this.height;

letper = this.scroller.height / this.scroller.viewport.contentHeight;

this.scrollerBar.height = this.scrollerBarGroup.height * per;

}, 100);

// console.log(“change scroller bar height “, this.scrollerBar.height, this.scrollerBarGroup.height, per, this.scroller.height, this.scroller.viewport.getBounds().height);

}

privateonTouchMove(e: egret.TouchEvent) {

if (this.touch_id != e.touchPointID)

return;

lety = e.stageY;

this.scrollerBar.y += (y – this.lastY);

this.lastY = y;

letmaxY = this.scrollerBarGroup.height – this.scrollerBar.height;

if (this.scrollerBar.y > maxY) {

this.scrollerBar.y = maxY;

}

if (this.scrollerBar.y < 0) {

this.scrollerBar.y = 0;

}

this.changeScrollerV();

}

privateonTouchEnd(e: egret.TouchEvent) {

this.touch_id = -1;

this.lastY = 0;

}

privateonScrollerChange() {

if (!this.scroller)

return;

letlength = this.scrollerBarGroup.height – this.scrollerBar.height;

letpercent = this.scroller.viewport.scrollV / (this.scroller.viewport.contentHeight – this.scroller.height);

// if (percent > 1)

// percent = 1;

// if (percent < 0)

// percent = 0;

lety = length * percent;

this.scrollerBar.y = y;

}

privatechangeScrollerV() {

letper = this.scrollerBar.y / (this.scrollerBarGroup.height – this.scrollerBar.height);

if (per < 0)

per = 0;

this.scroller.viewport.scrollV = per * (this.scroller.viewport.contentHeight – this.scroller.height);

}

/**

* 绑定scroller

*/

publicbindScroller(scroller: eui.Scroller) {

this.scroller = scroller;

this.scroller.addEventListener(egret.Event.CHANGE, this.onScrollerChange, this);

this.scroller.verticalScrollBar.alpha = 0;

this.scroller.horizontalScrollBar.alpha = 0;

this.changeScrollBarHeight();

}

/**

* 替换ui图片

*/

publicchangeScrollerBarDisplayImage(scrollerBar: string, scrollerBg: string) {

this.scroller_bar_source = scrollerBar;

this.scroller_bg_source = scrollerBg;

if (!this.ui_loaded)

return;

lettexture = RES.getRes(this.scroller_bg_source);

this.scrollerBg.texture = texture;

this.maskBg.texture = texture;

this.scrollerBar.texture = RES.getRes(this.scroller_bar_source);

this.width = this.scrollerBg.width;

this.scrollerBarGroup.width = this.width;

this.scrollerBg.height = this.scrollerBarGroup.height;

this.maskBg.height = this.scrollerBarGroup.height;

this.changeScrollBarHeight();

}

}