{"id":703,"date":"2020-04-22T19:16:15","date_gmt":"2020-04-22T11:16:15","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=703"},"modified":"2020-06-22T19:19:34","modified_gmt":"2020-06-22T11:19:34","slug":"%e8%87%aa%e5%ae%9a%e4%b9%89scrollview%e7%bb%84%e4%bb%b6%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=703","title":{"rendered":"\u81ea\u5b9a\u4e49Scrollview\u7ec4\u4ef6\u5f00\u53d1"},"content":{"rendered":"
\n
class CustomScrollerBar extends eui.Component {<\/div>\n
publicconstructor() {<\/div>\n
super();<\/div>\n
this.skinName = skins.CustomScrollerBarSkin;<\/div>\n
\/\/ this.addEventListener(egret.Event.RESIZE, this.viewResze, this);<\/div>\n
}<\/div>\n
publicscrollerBarGroup: eui.Group;<\/div>\n
publicscrollerBar: eui.Image;<\/div>\n
publicscrollerBg: eui.Image;<\/div>\n
publicmaskBg:eui.Image;<\/div>\n
privatescroller: eui.Scroller;<\/div>\n
privatescroller_bar_source: string;<\/div>\n
privatescroller_bg_source: string;<\/div>\n
privateui_loaded: boolean = false;<\/div>\n
protectedcreateChildren() {<\/div>\n
super.createChildren();<\/div>\n
\/\/ this.scrollerBar.height = this.scrollerBarGroup.height * 0.1;<\/div>\n
this.scrollerBarGroup.mask = this.maskBg;<\/div>\n
this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);<\/div>\n
this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onTouchMove, this);<\/div>\n
this.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);<\/div>\n
this.addEventListener(egret.TouchEvent.TOUCH_CANCEL, this.onTouchEnd, this);<\/div>\n
this.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, this.onTouchEnd, this);<\/div>\n
this.ui_loaded = true;<\/div>\n
if (this.scroller_bar_source != undefined)<\/div>\n
this.changeScrollerBarDisplayImage(this.scroller_bar_source, this.scroller_bg_source);<\/div>\n
}<\/div>\n
privatelastY: number = 0;<\/div>\n
privatetouch_id: number = -1;<\/div>\n
privateonTouchBegin(e: egret.TouchEvent) {<\/div>\n
if (!this.scrollerBar || this.touch_id != -1)<\/div>\n
return;<\/div>\n
if (this.scrollerBar.hitTestPoint(e.stageX, e.stageY)) {<\/div>\n
this.touch_id = e.touchPointID;<\/div>\n
this.lastY = e.stageY;<\/div>\n
}<\/div>\n
}<\/div>\n
privatechangeScrollBarHeight() {<\/div>\n
\/\/scroller bug \u9700\u8981\u5ef6\u8fdf\u83b7\u53d6 contentHeight, \u5426\u5219\u53d6\u5230\u7684\u503c\u4e3a0<\/div>\n
setTimeout(() => {<\/div>\n
if (!this.scroller || !this.scrollerBar)<\/div>\n
return;<\/div>\n
\/\/\u9664\u6570\u4e0d\u80fd\u4e3a\u96f6<\/div>\n
if (this.scroller.viewport.contentHeight == 0)<\/div>\n
return;<\/div>\n
this.scrollerBarGroup.height = this.height;<\/div>\n
letper = this.scroller.height \/ this.scroller.viewport.contentHeight;<\/div>\n
this.scrollerBar.height = this.scrollerBarGroup.height * per;<\/div>\n
}, 100);<\/div>\n
\/\/ console.log(“change scroller bar height “, this.scrollerBar.height, this.scrollerBarGroup.height, per, this.scroller.height, this.scroller.viewport.getBounds().height);<\/div>\n
}<\/div>\n
privateonTouchMove(e: egret.TouchEvent) {<\/div>\n
if (this.touch_id != e.touchPointID)<\/div>\n
return;<\/div>\n
lety = e.stageY;<\/div>\n
this.scrollerBar.y += (y – this.lastY);<\/div>\n
this.lastY = y;<\/div>\n
letmaxY = this.scrollerBarGroup.height – this.scrollerBar.height;<\/div>\n
if (this.scrollerBar.y > maxY) {<\/div>\n
this.scrollerBar.y = maxY;<\/div>\n
}<\/div>\n
if (this.scrollerBar.y < 0) {<\/div>\n
this.scrollerBar.y = 0;<\/div>\n
}<\/div>\n
this.changeScrollerV();<\/div>\n
}<\/div>\n
privateonTouchEnd(e: egret.TouchEvent) {<\/div>\n
this.touch_id = -1;<\/div>\n
this.lastY = 0;<\/div>\n
}<\/div>\n
privateonScrollerChange() {<\/div>\n
if (!this.scroller)<\/div>\n
return;<\/div>\n
letlength = this.scrollerBarGroup.height – this.scrollerBar.height;<\/div>\n
letpercent = this.scroller.viewport.scrollV \/ (this.scroller.viewport.contentHeight – this.scroller.height);<\/div>\n
\/\/ if (percent > 1)<\/div>\n
\/\/ percent = 1;<\/div>\n
\/\/ if (percent < 0)<\/div>\n
\/\/ percent = 0;<\/div>\n
lety = length * percent;<\/div>\n
this.scrollerBar.y = y;<\/div>\n
}<\/div>\n
privatechangeScrollerV() {<\/div>\n
letper = this.scrollerBar.y \/ (this.scrollerBarGroup.height – this.scrollerBar.height);<\/div>\n
if (per < 0)<\/div>\n
per = 0;<\/div>\n
this.scroller.viewport.scrollV = per * (this.scroller.viewport.contentHeight – this.scroller.height);<\/div>\n
}<\/div>\n
\/**<\/div>\n
* \u7ed1\u5b9ascroller<\/div>\n
*\/<\/div>\n
publicbindScroller(scroller: eui.Scroller) {<\/div>\n
this.scroller = scroller;<\/div>\n
this.scroller.addEventListener(egret.Event.CHANGE, this.onScrollerChange, this);<\/div>\n
this.scroller.verticalScrollBar.alpha = 0;<\/div>\n
this.scroller.horizontalScrollBar.alpha = 0;<\/div>\n
this.changeScrollBarHeight();<\/div>\n
}<\/div>\n
\/**<\/div>\n
* \u66ff\u6362ui\u56fe\u7247<\/div>\n
*\/<\/div>\n
publicchangeScrollerBarDisplayImage(scrollerBar: string, scrollerBg: string) {<\/div>\n
this.scroller_bar_source = scrollerBar;<\/div>\n
this.scroller_bg_source = scrollerBg;<\/div>\n
if (!this.ui_loaded)<\/div>\n
return;<\/div>\n
lettexture = RES.getRes(this.scroller_bg_source);<\/div>\n
this.scrollerBg.texture = texture;<\/div>\n
this.maskBg.texture = texture;<\/div>\n
this.scrollerBar.texture = RES.getRes(this.scroller_bar_source);<\/div>\n
this.width = this.scrollerBg.width;<\/div>\n
this.scrollerBarGroup.width = this.width;<\/div>\n
this.scrollerBg.height = this.scrollerBarGroup.height;<\/div>\n
this.maskBg.height = this.scrollerBarGroup.height;<\/div>\n
this.changeScrollBarHeight();<\/div>\n
}<\/div>\n
}<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

class CustomScrollerBar extends eui.Component { publicc […]<\/p>\n","protected":false},"author":1,"featured_media":469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[15],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/703"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=703"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":704,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/703\/revisions\/704"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/media\/469"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}